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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Apache MyFaces and Ajax

  • 9,024 views
Published

A German talk on Ajax in JSF/MyFaces

A German talk on Ajax in JSF/MyFaces

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
9,024
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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?