apache myfaces and ajax
DESCRIPTION
A German talk on Ajax in JSF/MyFacesTRANSCRIPT
Ajax in Apache MyFaces
„A new Approach to Web Applications“
2
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
Agenda
• AJAX und JavaServer Faces• AJAX Komponenten in MyFaces • Widgets in Tomahawk & Sandbox
3
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
Web 2.0 - Überblick
Web 1.0
Statisches HTML
Web 1.5
Dynamisches HTMLJSP, Servlets
Web 2.0
Web-Anwendungen mit hoher! Dynamischer Interaktion mit dem Server. *
4
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
(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!
5
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
JavaScript und OOfunction 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) { ... }
6
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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, …
7
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
Ajax-Integration mit JSF
• Servlets• Außerhalb von JSF...
• ServletFilters• Außerhalb von JSF...
• PhaseListeners• Innerhalb der JSF Engine
8
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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
9
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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();
10
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
AJAX in MyFacespublic 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); }}
11
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
AjaxDecodePhaseListener(ApplyRequestValues)
12
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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
13
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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
14
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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>
15
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
InputSuggestAjax:suggestedItemsMethod
• Implementierung:
public List getCustomers(String secondname){ return getCustomerService() .queryCustomerBySecondname(secondname);}
• Service Spring Bean• Spring Bean DAO / Repository
• Query JPA Query
16
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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>
17
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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...
18
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
PPRPhaseListener
19
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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>
20
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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>
21
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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>
22
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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
23
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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“/>
24
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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>
25
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
Dojo Widgets der Sandbox
• Image Loop<s:imageLoop ...>
<s:imageLoopItem url="images/imageloop1.png"/>
<s:imageLoopItems value="#{imageLoopBean.imageCollection}"/>
</s:imageLoop>
26
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
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
27
MyFaces & Ajax Matthias Wessendorf, Oracle Corp.
Fragen?