Your SlideShare is downloading. ×
0
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Apache MyFaces and Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Apache MyFaces and Ajax

9,120

Published on

A German talk on Ajax in JSF/MyFaces

A German talk on Ajax in JSF/MyFaces

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
9,120
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
211
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Ajax in Apache MyFaces „ A new Approach to Web Applications“
    • 2. Agenda <ul><li>AJAX und JavaServer Faces </li></ul><ul><li>AJAX Komponenten in MyFaces </li></ul><ul><li>Widgets in Tomahawk & Sandbox </li></ul>
    • 3. Web 2.0 - Überblick Web-Anwendungen mit hoher! Dynamischer Interaktion mit dem Server. * Web 2.0 Dynamisches HTML JSP, Servlets Web 1.5 Statisches HTML Web 1.0
    • 4. (Ajax) JavaScript Bibliotheken <ul><li>Abstraktion </li></ul><ul><ul><li>Kein direktes Arbeiten mit XMLHttpRequest (XHR) </li></ul></ul><ul><li>Bibliotheken bieten… </li></ul><ul><ul><li>... AJAX support </li></ul></ul><ul><ul><li>…” visual effects” </li></ul></ul><ul><ul><li>…” widgets” (dojo toolkit oder YUI) </li></ul></ul><ul><ul><li>… einfaches Arbeiten JavaScript </li></ul></ul><ul><ul><li>… objektorientiertes JavaScript! </li></ul></ul>
    • 5. JavaScript und OO <ul><li>function TrDateTimeRangeValidator( </li></ul><ul><li>maxValue, minValue, messages) </li></ul><ul><li>{ </li></ul><ul><li>this._maxValue = maxValue; </li></ul><ul><li>this._minValue = minValue; </li></ul><ul><li>this._messages = messages; </li></ul><ul><li>// for debugging </li></ul><ul><li>this._class = &quot;TrDateTimeRangeValidator&quot;; </li></ul><ul><li>} </li></ul><ul><li>TrDateTimeRangeValidator.prototype = new TrValidator(); </li></ul><ul><li>TrDateTimeRangeValidator.prototype.validate = function( </li></ul><ul><li>value, label, converter) { ... } </li></ul>
    • 6. JSF ist... <ul><li>ein(e) ... </li></ul><ul><ul><li>... Java-Technik für Web-Anwendung </li></ul></ul><ul><ul><ul><li>API für Components </li></ul></ul></ul><ul><ul><ul><li>Lightweight Framework </li></ul></ul></ul><ul><ul><li>... Komponenten-orientiertes Framework </li></ul></ul><ul><ul><li>... Event-basiertes Framework framework </li></ul></ul><ul><ul><li>... RAD </li></ul></ul><ul><ul><li>... Industrie Standard (JCP; JSRs) </li></ul></ul><ul><ul><ul><li>Oracle, Sun, IBM, Apache, … </li></ul></ul></ul>
    • 7. Ajax-Integration mit JSF <ul><li>Servlets </li></ul><ul><ul><li>Außerhalb von JSF... </li></ul></ul><ul><li>ServletFilters </li></ul><ul><ul><li>Außerhalb von JSF... </li></ul></ul><ul><li>PhaseListeners </li></ul><ul><ul><li>Innerhalb der JSF Engine </li></ul></ul>
    • 8. AJAX in MyFaces <ul><li>Ajax API in Sandbox: </li></ul><ul><ul><li>AjaxComponent </li></ul></ul><ul><ul><li>AjaxRenderer </li></ul></ul><ul><ul><li>AjaxSuggestRenderer </li></ul></ul><ul><ul><li>AjaxDecodePhaseListener </li></ul></ul><ul><li>Verwendung von JSF PhaseListener </li></ul><ul><ul><li>AjaxDecodePhaseListener für Phase 2 (Apply Request Values) </li></ul></ul><ul><ul><li>beforePhase() ausprogrammiert </li></ul></ul><ul><ul><li>afterPhase() leer </li></ul></ul>
    • 9. AJAX in MyFaces <ul><li>AjaxDecodePhaseListener </li></ul><ul><ul><li>Warten auf eingehenden AJAX request </li></ul></ul><ul><ul><ul><li>Kennzeichnung durch Http Request Parameter </li></ul></ul></ul><ul><ul><li>Lädt die betroffene Komponente aus dem JSF Komponentenbaum </li></ul></ul><ul><ul><li>decode() und encode() wird an die Komponente / den Renderer delegiert für die weitere Verarbeitung </li></ul></ul><ul><ul><li>Nach der Auslieferung des Response wird der JSF Lifecycle gestoppt </li></ul></ul><ul><ul><ul><li>facesContext.responseComplete(); </li></ul></ul></ul>
    • 10. AJAX in MyFaces <ul><li>public class SuggestAjax ... implements AjaxComponent </li></ul><ul><li>{ </li></ul><ul><li>... </li></ul><ul><li>public void encodeAjax(FacesContext context) </li></ul><ul><li>throws IOException { </li></ul><ul><li>if (context == null ) </li></ul><ul><li>throw new NullPointerException( &quot;context&quot; ); </li></ul><ul><li>if (!isRendered()) </li></ul><ul><li>return ; </li></ul><ul><li>Renderer renderer = getRenderer(context); </li></ul><ul><li>if (renderer != null && renderer instanceof AjaxRenderer ) </li></ul><ul><li>{ </li></ul><ul><li>((AjaxRenderer) renderer).encodeAjax(context, this ); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    • 11. AjaxDecodePhaseListener (ApplyRequestValues)
    • 12. AJAX in MyFaces Beispiele <ul><li>Ajax Suggest Komponenten </li></ul><ul><ul><li>InputSuggest (standard) </li></ul></ul><ul><ul><ul><li>Zeigt Liste von vorgeschlagenen Werten </li></ul></ul></ul><ul><ul><ul><li>Basiert auf Dojo Toolkit “comboBox” widget </li></ul></ul></ul><ul><ul><li>TableSuggest (advanced mode) </li></ul></ul><ul><ul><ul><li>Vorgeschlagene Werte mit Tabellen-Syntax </li></ul></ul></ul><ul><ul><ul><li>Basiert auf der Dojo Toolkit AJAX API (dojo.io.bind) </li></ul></ul></ul><ul><li>Partial Page Rendering (PPR) mit Tomahawk/Sandbox </li></ul><ul><ul><li>Einfaches PPR mit MyFaces </li></ul></ul><ul><ul><li>DataScroller mit PPR </li></ul></ul><ul><ul><li>Periodical update einer Tabellen-Komponente </li></ul></ul>
    • 13. SuggestAjax (Basisklasse) <ul><li>suggestedItemsMethod </li></ul><ul><ul><li>Methode einer JSF Backing Bean </li></ul></ul><ul><ul><li>Liefert die gewünschten Daten für die “Suggest Liste” </li></ul></ul><ul><ul><li>Komponente benutzt JSF’s MethodBinding für den Aufruf </li></ul></ul><ul><li>Arbeitsweise: </li></ul><ul><ul><li>1.) Ajax request </li></ul></ul><ul><ul><li>2.) AjaxDecodePhaseListener ruft SuggestAjax comp. auf </li></ul></ul><ul><ul><li>3.) Delegation an den Renderer </li></ul></ul><ul><ul><li>4.) Aufruf der Managed Bean Method </li></ul></ul><ul><ul><li>5.) Methode liefert java.util.List </li></ul></ul><ul><ul><li>6.) Ergebnis zum Client senden </li></ul></ul>
    • 14. InputSuggestAjax: .jsp <ul><li><h:form> </li></ul><ul><li><h:panelGrid columns=&quot;3&quot;> </li></ul><ul><li> <x:outputLabel value=&quot;#{label.title_product}&quot;/> </li></ul><ul><li><s:inputSuggestAjax </li></ul><ul><li>suggestedItemsMethod= </li></ul><ul><li>&quot;#{bean.getCustomers}&quot; </li></ul><ul><li>value= </li></ul><ul><li>&quot;#{bean.customer}&quot;/> </li></ul><ul><li><x:commandButton </li></ul><ul><li>value=&quot;#{label.productButton}&quot; </li></ul><ul><li>action=&quot;#{product.searchForProducts}&quot;/> </li></ul><ul><li></h:panelGrid> </li></ul><ul><li></h:form> </li></ul>
    • 15. InputSuggestAjax: suggestedItemsMethod <ul><li>Implementierung: </li></ul><ul><li>public List getCustomers(String secondname ) </li></ul><ul><li>{ </li></ul><ul><li>return getCustomerService() </li></ul><ul><li>.queryCustomerBySecondname( secondname ); </li></ul><ul><li>} </li></ul><ul><li>Service  Spring Bean </li></ul><ul><li>Spring Bean  DAO / Repository </li></ul><ul><ul><li>Query  JPA Query </li></ul></ul>
    • 16. TableSuggestAjax: .jsp <ul><li><s:tableSuggestAjax var=“customer“ </li></ul><ul><li>startRequest=&quot;2“ </li></ul><ul><li>suggestedItemsMethod=&quot;#{bean.getCustomers}&quot; > </li></ul><ul><li><t:column> </li></ul><ul><li><f:facet name=&quot;header&quot;> </li></ul><ul><li><s:outputText value=&quot;city&quot;/> </li></ul><ul><li></f:facet> </li></ul><ul><li><s:outputText for=&quot;cityField&quot; </li></ul><ul><li>label=&quot; #{address.city} &quot;/> </li></ul><ul><li></t:column> </li></ul><ul><li>… </li></ul><ul><li></s:tableSuggestAjax> </li></ul>
    • 17. PPR mit pprPanelGroup <ul><li>Eine PPR-Implementierung innerhalb von MyFaces Tomahawk </li></ul><ul><li>Realisierung mit PhaseListener </li></ul><ul><ul><li>RenderResponse (beforePhase()) </li></ul></ul><ul><ul><li>der AJAX-Request ist ein vollständiger JSF-Request </li></ul></ul><ul><ul><li>Rendered XML statt HTML... </li></ul></ul>
    • 18. PPRPhaseListener
    • 19. Einfaches PPR <ul><li><h:form id=&quot;mainform&quot;> </li></ul><ul><li><h:inputText value=&quot;#{exampleBean.suggestValue}&quot;/> </li></ul><ul><li><h:commandButton value=&quot;update&quot; id=„ button &quot; /> </li></ul><ul><li><s:pprPanelGroup id=&quot;suggestValue&quot; </li></ul><ul><li>partialTriggers=&quot;button&quot;> </li></ul><ul><li><h:outputText value=&quot;#{exampleBean.suggestValue}&quot;/> </li></ul><ul><li></s:pprPanelGroup> </li></ul><ul><li></h:form> </li></ul>
    • 20. Data Scroller mit PPR <ul><li><s:pprPanelGroup id=&quot;dataTableArea&quot; partialTriggerPattern =&quot;mainform:.*&quot;> </li></ul><ul><li><t:dataTable id=„data“ var=&quot;address&quot; ...> </li></ul><ul><li><t:column> </li></ul><ul><li><f:facet name=&quot;header&quot;> </li></ul><ul><li><h:outputText value=&quot;streetnumber&quot;/> </li></ul><ul><li></f:facet> </li></ul><ul><li><h:outputText value=&quot;#{address.streetNumber}&quot;/> </li></ul><ul><li></t:column> </li></ul><ul><li>... </li></ul><ul><li></t:dataTable> </li></ul><ul><li><t:dataScroller for=„data“> </li></ul><ul><li>... </li></ul><ul><li></t:dataScroller> </li></ul><ul><li></s:pprPanelGroup> </li></ul>
    • 21. Tabellen Updates mit PPR <ul><li><s:pprPanelGroup </li></ul><ul><li>id=&quot;periodicalUpdatedArea„ </li></ul><ul><li>periodicalUpdate=&quot;2000&quot; > </li></ul><ul><li><t:dataTable var=&quot;address&quot; value=&quot;#{pprExampleBean.periodicalUpdatedValues}&quot;> </li></ul><ul><li><t:column> </li></ul><ul><li>... </li></ul><ul><li></t:column> </li></ul><ul><li>... </li></ul><ul><li></t:dataTable> </li></ul><ul><li></s:pprPanelGroup> </li></ul>
    • 22. Dojo Toolkit und MyFaces <ul><li>MyFaces erst Prototype nun Dojo! </li></ul><ul><li>Vorteile </li></ul><ul><ul><li>Große Bibliothek </li></ul></ul><ul><ul><ul><li>Abstraktions-Layer für JS-Handling </li></ul></ul></ul><ul><ul><ul><li>AJAX api (dojo.io.bind) </li></ul></ul></ul><ul><ul><ul><li>Visuelle Effekte </li></ul></ul></ul><ul><ul><ul><li>JavaScript Events / Event Handling </li></ul></ul></ul><ul><ul><ul><li>Viele schöne Widgets! (Komponenten) </li></ul></ul></ul><ul><ul><li>Package-System “namespacing” </li></ul></ul><ul><ul><ul><li>Keine Namenskonflikte! </li></ul></ul></ul><ul><ul><ul><li>Lazy-load für JavaScript Module (Performance) </li></ul></ul></ul><ul><ul><li>Obfuscating möglich </li></ul></ul>
    • 23. Dojo Toolkit und MyFaces <ul><li>Integration von Dojo in Tomahawk (1.1.5) </li></ul><ul><ul><li>Sandbox hat viele Widgets </li></ul></ul><ul><ul><ul><li>Dojo-Widgets auf JSF-Komponenten abgebildet </li></ul></ul></ul><ul><li><t:dojoInitializer …/> </li></ul><ul><li>Deployment der JavaScript Files </li></ul><ul><li>Einfache Integration von Dojo in die JSF-Anwendung </li></ul><ul><ul><li>WYSIWYG-Editor: </li></ul></ul><ul><ul><ul><li><t:dojoInitializer require=&quot; dojo.widget.Editor &quot;/> </li></ul></ul></ul><ul><ul><ul><li><h:inputTextarea id=&quot;editarea2&quot; styleClass=&quot; dojo-Editor &quot; value=&quot;hello world“/> </li></ul></ul></ul>
    • 24. Dojo Widgets der Sandbox <ul><li>FishEye </li></ul><ul><ul><li><s:fishEyeNavigationMenu ... visibleWindow=&quot;3&quot; > </li></ul></ul><ul><ul><li><s:fishEyeCommandLink caption=&quot;#{labels.labels[item.caption]}&quot; iconSrc=&quot;#{item.iconSrc}&quot; target=&quot;#{item.target}&quot; actionListener=&quot;#{item.action}&quot;/> </li></ul></ul><ul><ul><li></s:fishEyeNavigationMenu> </li></ul></ul>
    • 25. Dojo Widgets der Sandbox <ul><li>Image Loop </li></ul><ul><ul><li><s:imageLoop ...> </li></ul></ul><ul><ul><li><s:imageLoopItem url=&quot;images/imageloop1.png&quot;/> </li></ul></ul><ul><ul><li><s:imageLoopItems value=&quot;#{imageLoopBean.imageCollection}&quot;/> </li></ul></ul><ul><ul><li></s:imageLoop> </li></ul></ul>
    • 26. Weitere Informationen <ul><li>Folien </li></ul><ul><ul><li>http://www.slideshare.net/mwessendorf </li></ul></ul><ul><li>Apache MyFaces Buch </li></ul><ul><ul><li>JSF @Work – Martin Marinschek </li></ul></ul><ul><li>Apache MyFaces Beispiele </li></ul><ul><ul><li>http://www.irian.at/myfaces.jsf </li></ul></ul><ul><li>Apache MyFaces und JSF Support </li></ul><ul><ul><li>http://www.irian.at </li></ul></ul>
    • 27. Fragen?

    ×