apache myfaces and ajax

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


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


(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


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


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


Ajax-Integration mit JSF

• Servlets• Außerhalb von JSF...

• ServletFilters• Außerhalb von JSF...

• PhaseListeners• Innerhalb der JSF Engine

8


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


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


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


AjaxDecodePhaseListener(ApplyRequestValues)

12


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


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


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


InputSuggestAjax:suggestedItemsMethod

• Implementierung:

public List getCustomers(String secondname){ return getCustomerService() .queryCustomerBySecondname(secondname);}

• Service Spring Bean• Spring Bean DAO / Repository

• Query JPA Query

16


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


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


PPRPhaseListener

19


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


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


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


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


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


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


Dojo Widgets der Sandbox

• Image Loop<s:imageLoop ...>

<s:imageLoopItem url="images/imageloop1.png"/>

<s:imageLoopItems value="#{imageLoopBean.imageCollection}"/>

</s:imageLoop>

26


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


Fragen?

apache myfaces and ajax

Technology