Your SlideShare is downloading. ×
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,090

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,090
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
      • AJAX und JavaServer Faces
      • AJAX Komponenten in MyFaces
      • Widgets in Tomahawk & Sandbox
    • 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
      • 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 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) { ... }
    • 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 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 );
      • }
      • }
    • 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=&quot;3&quot;>
      • <x:outputLabel value=&quot;#{label.title_product}&quot;/>
      • <s:inputSuggestAjax
      • suggestedItemsMethod=
      • &quot;#{bean.getCustomers}&quot;
      • value=
      • &quot;#{bean.customer}&quot;/>
      • <x:commandButton
      • value=&quot;#{label.productButton}&quot;
      • action=&quot;#{product.searchForProducts}&quot;/>
      • </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=&quot;2“
      • suggestedItemsMethod=&quot;#{bean.getCustomers}&quot; >
      • <t:column>
      • <f:facet name=&quot;header&quot;>
      • <s:outputText value=&quot;city&quot;/>
      • </f:facet>
      • <s:outputText for=&quot;cityField&quot;
      • label=&quot; #{address.city} &quot;/>
      • </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=&quot;mainform&quot;>
      • <h:inputText value=&quot;#{exampleBean.suggestValue}&quot;/>
      • <h:commandButton value=&quot;update&quot; id=„ button &quot; />
      • <s:pprPanelGroup id=&quot;suggestValue&quot;
      • partialTriggers=&quot;button&quot;>
      • <h:outputText value=&quot;#{exampleBean.suggestValue}&quot;/>
      • </s:pprPanelGroup>
      • </h:form>
    • 20. Data Scroller mit PPR
      • <s:pprPanelGroup id=&quot;dataTableArea&quot; partialTriggerPattern =&quot;mainform:.*&quot;>
      • <t:dataTable id=„data“ var=&quot;address&quot; ...>
      • <t:column>
      • <f:facet name=&quot;header&quot;>
      • <h:outputText value=&quot;streetnumber&quot;/>
      • </f:facet>
      • <h:outputText value=&quot;#{address.streetNumber}&quot;/>
      • </t:column>
      • ...
      • </t:dataTable>
      • <t:dataScroller for=„data“>
      • ...
      • </t:dataScroller>
      • </s:pprPanelGroup>
    • 21. Tabellen Updates mit PPR
      • <s:pprPanelGroup
      • id=&quot;periodicalUpdatedArea„
      • periodicalUpdate=&quot;2000&quot; >
      • <t:dataTable var=&quot;address&quot; value=&quot;#{pprExampleBean.periodicalUpdatedValues}&quot;>
      • <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=&quot; dojo.widget.Editor &quot;/>
          • <h:inputTextarea id=&quot;editarea2&quot; styleClass=&quot; dojo-Editor &quot; value=&quot;hello world“/>
    • 24. Dojo Widgets der Sandbox
      • FishEye
        • <s:fishEyeNavigationMenu ... visibleWindow=&quot;3&quot; >
        • <s:fishEyeCommandLink caption=&quot;#{labels.labels[item.caption]}&quot; iconSrc=&quot;#{item.iconSrc}&quot; target=&quot;#{item.target}&quot; actionListener=&quot;#{item.action}&quot;/>
        • </s:fishEyeNavigationMenu>
    • 25. Dojo Widgets der Sandbox
      • Image Loop
        • <s:imageLoop ...>
        • <s:imageLoopItem url=&quot;images/imageloop1.png&quot;/>
        • <s:imageLoopItems value=&quot;#{imageLoopBean.imageCollection}&quot;/>
        • </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?

    ×