Apache MyFaces and Ajax

Slide 1: Ajax in Apache MyFaces „A new Approach to Web Applications“

Slide 2: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Agenda • AJAX und JavaServer Faces • AJAX Komponenten in MyFaces • Widgets in Tomahawk & Sandbox 2

Slide 3: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Web 2.0 - Überblick Web 1.0 Statisches HTML Web 1.5 Dynamisches HTML JSP, Servlets Web 2.0 Web-Anwendungen mit hoher! Dynamischer Interaktion mit dem Server. * 3

Slide 4: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax (Ajax) JavaScript Bibliotheken • Abstraktion • Kein direktes Arbeiten mit XMLHttpRequest (XHR) • Bibliotheken bieten… • ... AJAX support • …”visual effects” • …”widgets” (dojo toolkit oder YUI) • …einfaches Arbeiten JavaScript • …objektorientiertes JavaScript! 4

Slide 5: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax JavaScript und OO function TrDateTimeRangeValidator( maxValue, minValue, messages) { this._maxValue = maxValue; this._minValue = minValue; this._messages = messages; // for debugging this._class = "TrDateTimeRangeValidator"; } TrDateTimeRangeValidator.prototype = new TrValidator(); TrDateTimeRangeValidator.prototype.validate = function( value, label, converter) { ... } 5

Slide 6: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax JSF ist... • ein(e) ... • ... Java-Technik für Web-Anwendung • API für Components • Lightweight Framework • ... Komponenten-orientiertes Framework • ... Event-basiertes Framework framework • ... RAD • ... Industrie Standard (JCP; JSRs) • Oracle, Sun, IBM, Apache, … 6

Slide 7: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Ajax-Integration mit JSF • Servlets • Außerhalb von JSF... • ServletFilters • Außerhalb von JSF... • PhaseListeners • Innerhalb der JSF Engine 7

Slide 8: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax AJAX in MyFaces • Ajax API in Sandbox: • AjaxComponent • AjaxRenderer • AjaxSuggestRenderer • AjaxDecodePhaseListener • Verwendung von JSF PhaseListener • AjaxDecodePhaseListener für Phase 2 (Apply Request Values) • beforePhase() ausprogrammiert • afterPhase() leer 8

Slide 9: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax AJAX in MyFaces • AjaxDecodePhaseListener • Warten auf eingehenden AJAX request • Kennzeichnung durch Http Request Parameter • Lädt die betroffene Komponente aus dem JSF Komponentenbaum • decode() und encode() wird an die Komponente / den Renderer delegiert für die weitere Verarbeitung • Nach der Auslieferung des Response wird der JSF Lifecycle gestoppt • facesContext.responseComplete(); 9

Slide 10: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax AJAX in MyFaces public class SuggestAjax ... implements AjaxComponent { ... public void encodeAjax(FacesContext context) throws IOException { if (context == null) throw new NullPointerException("context"); if (!isRendered()) return; Renderer renderer = getRenderer(context); if (renderer != null && renderer instanceof AjaxRenderer) { ((AjaxRenderer) renderer).encodeAjax(context, this); } } 10

Slide 11: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax AjaxDecodePhaseListener (ApplyRequestValues) 11

Slide 12: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax AJAX in MyFaces Beispiele • Ajax Suggest Komponenten • InputSuggest (standard) • Zeigt Liste von vorgeschlagenen Werten • Basiert auf Dojo Toolkit “comboBox” widget • TableSuggest (advanced mode) • Vorgeschlagene Werte mit Tabellen-Syntax • Basiert auf der Dojo Toolkit AJAX API (dojo.io.bind) • Partial Page Rendering (PPR) mit Tomahawk/Sandbox • Einfaches PPR mit MyFaces • DataScroller mit PPR • Periodical update einer Tabellen-Komponente 12

Slide 13: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax SuggestAjax (Basisklasse) • suggestedItemsMethod • Methode einer JSF Backing Bean • Liefert die gewünschten Daten für die “Suggest Liste” • Komponente benutzt JSF’s MethodBinding für den Aufruf • Arbeitsweise: • 1.) Ajax request • 2.) AjaxDecodePhaseListener ruft SuggestAjax comp. auf • 3.) Delegation an den Renderer • 4.) Aufruf der Managed Bean Method • 5.) Methode liefert java.util.List • 6.) Ergebnis zum Client senden 13

Slide 14: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax InputSuggestAjax: .jsp <h:form> <h:panelGrid columns="3"> <x:outputLabel value="#{label.title_product}"/> <s:inputSuggestAjax suggestedItemsMethod= "#{bean.getCustomers}" value= "#{bean.customer}"/> <x:commandButton value="#{label.productButton}" action="#{product.searchForProducts}"/> </h:panelGrid> </h:form> 14

Slide 15: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax InputSuggestAjax:suggestedItemsMethod • Implementierung: public List getCustomers(String secondname) { return getCustomerService() .queryCustomerBySecondname(secondname); } • Service  Spring Bean • Spring Bean  DAO / Repository • Query  JPA Query 15

Slide 16: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax TableSuggestAjax: .jsp <s:tableSuggestAjax var=“customer“ startRequest="2“ suggestedItemsMethod="#{bean.getCustomers}"> <t:column> <f:facet name="header"> <s:outputText value="city"/> </f:facet> <s:outputText for="cityField" label="#{address.city}"/> </t:column> … </s:tableSuggestAjax> 16

Slide 17: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax PPR mit pprPanelGroup • Eine PPR-Implementierung innerhalb von MyFaces Tomahawk • Realisierung mit PhaseListener • RenderResponse (beforePhase()) • der AJAX-Request ist ein vollständiger JSF- Request • Rendered XML statt HTML... 17

Slide 18: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax PPRPhaseListener 18

Slide 19: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Einfaches PPR <h:form id="mainform"> <h:inputText value="#{exampleBean.suggestValue}"/> <h:commandButton value="update" id=„button" /> <s:pprPanelGroup id="suggestValue" partialTriggers="button"> <h:outputText value="#{exampleBean.suggestValue}"/> </s:pprPanelGroup> </h:form> 19

Slide 20: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Data Scroller mit PPR <s:pprPanelGroup id="dataTableArea" partialTriggerPattern="mainform:.*"> <t:dataTable id=„data“ var="address" ...> <t:column> <f:facet name="header"> <h:outputText value="streetnumber"/> </f:facet> <h:outputText value="#{address.streetNumber}"/> </t:column> ... </t:dataTable> <t:dataScroller for=„data“> ... </t:dataScroller> </s:pprPanelGroup> 20

Slide 21: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Tabellen Updates mit PPR <s:pprPanelGroup id="periodicalUpdatedArea„ periodicalUpdate="2000"> <t:dataTable var="address" value="#{pprExampleBean.periodicalUpdatedValues}"> <t:column> ... </t:column> ... </t:dataTable> </s:pprPanelGroup> 21

Slide 22: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Dojo Toolkit und MyFaces • MyFaces erst Prototype nun Dojo! • Vorteile • Große Bibliothek • Abstraktions-Layer für JS-Handling • AJAX api (dojo.io.bind) • Visuelle Effekte • JavaScript Events / Event Handling • Viele schöne Widgets! (Komponenten) • Package-System “namespacing” • Keine Namenskonflikte! • Lazy-load für JavaScript Module (Performance) • Obfuscating möglich 22

Slide 23: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Dojo Toolkit und MyFaces • Integration von Dojo in Tomahawk (1.1.5) • Sandbox hat viele Widgets • Dojo-Widgets auf JSF-Komponenten abgebildet • <t:dojoInitializer …/> • Deployment der JavaScript Files • Einfache Integration von Dojo in die JSF- Anwendung • WYSIWYG-Editor: <t:dojoInitializer require="dojo.widget.Editor"/> <h:inputTextarea id="editarea2" styleClass="dojo-Editor" value="hello world“/> 23

Slide 24: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Dojo Widgets der Sandbox • FishEye <s:fishEyeNavigationMenu ... visibleWindow="3" > <s:fishEyeCommandLink caption="#{labels.labels[item.caption]}" iconSrc="#{item.iconSrc}" target="#{item.target}" actionListener="#{item.action}"/> </s:fishEyeNavigationMenu> 24

Slide 25: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Dojo Widgets der Sandbox • Image Loop <s:imageLoop ...> <s:imageLoopItem url="images/imageloop1.png"/> <s:imageLoopItems value="#{imageLoopBean.imageCollection}"/> </s:imageLoop> 25

Slide 26: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Weitere Informationen • Folien • http://www.slideshare.net/mwessendorf • Apache MyFaces Buch • JSF @Work – Martin Marinschek • Apache MyFaces Beispiele • http://www.irian.at/myfaces.jsf • Apache MyFaces und JSF Support • http://www.irian.at 26

Slide 27: Matthias Wessendorf, Oracle Corp. MyFaces & Ajax Fragen? 27