Ajax in Apache MyFaces „ A new Approach to Web Applications“
Agenda <ul><li>AJAX und JavaServer Faces </li></ul><ul><li>AJAX Komponenten in MyFaces  </li></ul><ul><li>Widgets in Tomah...
Web 2.0 - Überblick Web-Anwendungen mit hoher! Dynamischer Interaktion mit dem Server.  * Web 2.0 Dynamisches HTML JSP, Se...
(Ajax) JavaScript Bibliotheken <ul><li>Abstraktion </li></ul><ul><ul><li>Kein direktes Arbeiten mit XMLHttpRequest (XHR) <...
JavaScript und OO <ul><li>function TrDateTimeRangeValidator( </li></ul><ul><li>maxValue,  minValue,  messages) </li></ul><...
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 ...
Ajax-Integration mit JSF <ul><li>Servlets </li></ul><ul><ul><li>Außerhalb von JSF... </li></ul></ul><ul><li>ServletFilters...
AJAX in MyFaces <ul><li>Ajax API in Sandbox: </li></ul><ul><ul><li>AjaxComponent </li></ul></ul><ul><ul><li>AjaxRenderer <...
AJAX in MyFaces <ul><li>AjaxDecodePhaseListener </li></ul><ul><ul><li>Warten auf eingehenden AJAX request </li></ul></ul><...
AJAX in MyFaces <ul><li>public   class  SuggestAjax  ... implements  AjaxComponent </li></ul><ul><li>{ </li></ul><ul><li>....
AjaxDecodePhaseListener (ApplyRequestValues)
AJAX in MyFaces  Beispiele <ul><li>Ajax Suggest Komponenten </li></ul><ul><ul><li>InputSuggest (standard) </li></ul></ul><...
SuggestAjax (Basisklasse) <ul><li>suggestedItemsMethod   </li></ul><ul><ul><li>Methode einer JSF Backing Bean  </li></ul><...
InputSuggestAjax: .jsp <ul><li><h:form> </li></ul><ul><li><h:panelGrid columns=&quot;3&quot;> </li></ul><ul><li>  <x:outpu...
InputSuggestAjax: suggestedItemsMethod <ul><li>Implementierung: </li></ul><ul><li>public List getCustomers(String  secondn...
TableSuggestAjax: .jsp <ul><li><s:tableSuggestAjax var=“customer“ </li></ul><ul><li>startRequest=&quot;2“ </li></ul><ul><l...
PPR mit pprPanelGroup <ul><li>Eine PPR-Implementierung innerhalb von MyFaces Tomahawk </li></ul><ul><li>Realisierung mit P...
PPRPhaseListener
Einfaches PPR <ul><li><h:form id=&quot;mainform&quot;> </li></ul><ul><li><h:inputText value=&quot;#{exampleBean.suggestVal...
Data Scroller mit PPR <ul><li><s:pprPanelGroup  id=&quot;dataTableArea&quot;  partialTriggerPattern =&quot;mainform:.*&quo...
Tabellen Updates mit PPR <ul><li><s:pprPanelGroup </li></ul><ul><li>id=&quot;periodicalUpdatedArea„ </li></ul><ul><li>peri...
Dojo Toolkit und MyFaces <ul><li>MyFaces erst Prototype nun Dojo! </li></ul><ul><li>Vorteile </li></ul><ul><ul><li>Große B...
Dojo Toolkit und MyFaces <ul><li>Integration von Dojo in Tomahawk (1.1.5) </li></ul><ul><ul><li>Sandbox hat viele Widgets ...
Dojo Widgets der Sandbox <ul><li>FishEye </li></ul><ul><ul><li><s:fishEyeNavigationMenu ... visibleWindow=&quot;3&quot; > ...
Dojo Widgets der Sandbox <ul><li>Image Loop </li></ul><ul><ul><li><s:imageLoop ...> </li></ul></ul><ul><ul><li><s:imageLoo...
Weitere Informationen <ul><li>Folien </li></ul><ul><ul><li>http://www.slideshare.net/mwessendorf </li></ul></ul><ul><li>Ap...
Fragen?
Upcoming SlideShare
Loading in...5
×

Apache MyFaces and Ajax

9,138

Published on

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,138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
211
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Apache MyFaces and Ajax

    1. 1. Ajax in Apache MyFaces „ A new Approach to Web Applications“
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. AjaxDecodePhaseListener (ApplyRequestValues)
    12. 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. 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. 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. 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. 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. 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. 18. PPRPhaseListener
    19. 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. 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. 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. 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. 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. 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. 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. 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. 27. Fragen?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×