Apache MyFaces and Ajax

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Favorites, Groups & Events

    Apache MyFaces and Ajax - Presentation 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?

    + mwessendorfmwessendorf, 3 years ago

    custom

    8830 views, 0 favs, 0 embeds more stats

    A German talk on Ajax in JSF/MyFaces

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 8830
      • 8830 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 189
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories