JavaServer Faces und Ajax - Hochzeit im Himmel oder ein doppeltes Problem? Oliver Wolff. Organized by:

Transkript

1 Nmi 4 January 22 th -26 th, 2007, Munich/Germany JavaServer Faces und Ajax - Hochzeit im Himmel oder ein doppeltes Problem? Oliver Wolff Organized by: Lindlaustr. 2c, Troisdorf, Tel.: +49 (0) , Fax.: +49 (0)

2 JavaServer Faces & Ajax Hochzeit im Himmel oder ein doppeltes Problem? Orientation in Objects GmbH Weinheimer Str Mannheim Oliver Wolff Orientierung in Objekten ) Akademie ) ) Beratung ) ) Projekte ) Schulungen, Coaching, Weiterbildungsberatung, Train & Solve-Programme Methoden, Standards und Tools für die Entwicklung von offenen, unternehmensweiten Systemen Schlüsselfertige Realisierung von Software Unterstützung laufender Projekte Pilot- und Migrationsprojekte 2

3 JSF und Ajax - Marketing & Hype JavaServer Faces Industrie-Standard Komponenten-Modell Swing auf dem Server Kann alles ausgeben... Ajax Web 2.0 Desktop-Feeling Höhere Produktivität Schick... Alles wird gut? 3 Himmel und Hölle nach Hieronymus Bosch 4

4 Gliederung Ajax JavaServer Faces Integration Diskussion und Ausblick 5 Ajax - Definition Asynchronous JavaScript And XML Eigentlich ein alter Hut Microsoft Remote Scripting, IE 3, 1996! Keine eigene Technologie, nur Zusammenfassung bestehender 6

5 Ajax - Prinzip Kleine Datenpakete werden asynchron vom Server geladen und angezeigt (GUI-) Interaktion findet mittels JavaScript und DOM statt 7 Ajax - Technologien Standard Web Technologien: (X)HTML CSS JavaScript (ECMA) XML JSON DOM HTTP... 8

6 Ajax - Probleme Nur für die neuesten Browser Antwortverhalten verbindungsabhängig Keine Standards Muss intensiv getestet werden 9 JavaScript Schlechter Ruf: Mißbräuchlicher Einsatz Eingeführt von Netscape Microsoft: JScript Eigentlich: ECMA-Script Funktionale Sprache mit C-Syntax Wird im Browser interpretiert 10

7 XMLHttpRequest - Motivation Request/Response - Zyklus Alles-oder-nichts-Prinzip Mäßige Interaktion Browser verhält sich nicht wie andere Programme Adobe Flash nur bedingt Lösung 11 XMLHttpRequest - Die Lösung 12

8 Bibliotheken Überreste des Browserkriegs Weniger Kampf mit JavaScript und Browsern Dojo-Toolkit Scriptaculous Google WebToolkit 13 Gliederung Ajax JavaServer Faces Integration Diskussion und Ausblick 14

9 JavaServer Faces - Übersicht UI-Framework für Webanwendungen Java Community Process Java Specification Request (JSR) 127 / 252 Ed Burns, Craig R. McClanahan Beteiligte Firmen: IBM, Oracle, BEA, JavaServer Faces - Spezifikation-Implementierung JSR 127 / 252 ist reine Spezifikation Neben der Referenzimplementierung (RI) gibt es MyFaces, Apache ADF / Trinidad, Oracle... Implementierungen prinzipiell austauschbar 16

10 JavaServer Faces - Architektur JSF bildet eine Architektur Model-View-Controller Navigationskonzept Komponentenmodell Bean-Mangement Konverter und Validatoren Eventhandling Komponenten & Renderer Komponenten Renderer Funktionalität Darstellung von Komponenten Losgelöst von der Darstellung Ausgabeformat-spezifisch Direct Rendering möglich Kann ausgetauscht werden 18

11 Komponenten - Baumstruktur Eine JSF-Seite besitzt eine Baumstruktur Basiskomponente ist UIViewRoot <f:view> <h:panelgrid columns="2">... </h:panelgrid> </f:view > 19 Events JavaServer Faces ist Swing auf dem Server UI-Komponenten können Events auslösen An UI-Komponenten können Listener angehängt werden Arten Action-Events Value-Change-Events Phase-Events 20

12 Lebenszyklus Request Restore View Apply Request Values Process Validation Update Model Values Response Render Response Invoke Application 21 Gliederung Ajax JavaServer Faces Integration Diskussion und Ausblick 22

13 Probleme - Standard JSF Lebenszklus Wird bei Anfrage komplett durchlaufen Zu komplex für Ajax Request/Response orientiert Immediate-Attribut Zusätzliche PhaseListener Komponentenbaum Overhead durch Wiederherstellung und Serialisierung Bewegung vieler Daten 23 Lösung - Ajax Renderer Renderer erkennt Ajax-Anfragen Zeitpunkt: Apply-Request-Values Prozessierung der Ajax-Anfrage FacesContext.responseComplete() Nachteile Aufbau des Komponentenbaums responsecomplete() wirkt erst am Ende der Phase decode() wird auf alle Renderer aufgerufen Immediate-Attribut 24

14 Lösung - PhaseListener Eigener PhaseListener (PhaseId.RESTORE_VIEW) Abkürzung des Lebenszyklus FacesContext.responseComplete() Vorteile Kein Komponentenbaum Immediate-Attribut Nachteile Nicht definiertes Verhalten bei zusätzlichen PhaseListenern 25 Lösung - Eigener Lebenszyklus Lebenszyklus für Ajax-Aufgaben Nur Ajax-Phasen Aufruf durch MethodBinding Vorteile Kein Komponentenbaum Immediate-Attribut Zusätzliche PhaseListener unproblematisch Nachteile Know-How erforderlich Vorsicht bei komplexeren PhaseListenern 26

15 Ein naives Beispiel - Übersicht Warum JSF nicht umgehen? Eigenes Servlet für Ajax-Anfragen Vorteile Keine JSF-spezifischen Probleme Einfach Zentrale Stelle Schnell zu implementieren 27 Ein naives Beispiel - Nachteile Nachteile Zugriff auf FacesContext oder HttpSession Manuelle JavaScript-Erzeugung notwendig Schlechte Skalierung, Übersicht geht verloren Bruch mit dem Komponentenkonzept Viele Vorteile des Frameworks gehen verloren 28

16 Generische Ajax-Komponenten Ajaxifizierung bestehender Komponenten ajax4jsf (Sun, OpenSource) AjaxAnywhere, Sonderfall Vorteile Man muss weder JavaScript noch Ajax-ServerCode schreiben Einbindung in Lifecycle Nachteile Eingeschränkte Ajax-Funktionalität, z.b. Effekte, autocomplete Bandbreitenproblem, v.a. bei Client-Side State Saving 29 ajax4jsf - Übersicht Wird als Filter eingebunden: web.xml Fokus auf strukturelle Aufgaben Unterstützung für dynamisch erzeugte Medien Arbeitet mit JBoss Seam Support für InvokeOnComponent (JSF 1.2) Gute Dokumentation 30

17 ajax4jsf - Architektur Client JSF-Seite Ajax-Engine Ajax4jsf AjaxViewRoot XML-Filter AjaxRenderKit JSF-Phasen Restore View Phasen Render 31 ajax4jsf - Beispiel - Standard... <h:message style="color: red" for="nameinput" /> <h:inputtext value="#{messagebean.message}" id="nameinput"> <f:validatelength minimum="3" /> </h:inputtext>... 32

18 ajax4jsf - Beispiel - Ajax <a4j:outputpanel ajaxrendered="true"> <h:message style="color: red" for="nameinput" /> </a4j:outputpanel> <h:inputtext value="#{messagebean.message}" id="nameinput"> <a4j:support event="onkeyup"/> <f:validatelength minimum="3" /> </h:inputtext> Ajax-Komponenten - Übersicht Ajax-Funktionalität durch spezialisierte Komponenten Vorteile Einfache Integration Mächtige Komponenten verfügbar Weder JavaScript noch ServerCode notwendig Stolperfallen werden durch die Komponente gekapselt 34

19 Ajax-Komponenten - Nachteile Nachteile Man ist auf bestehende Komponenten angewiesen Großer (Lern-)Schritt notwendig, um eigene Komponenten zu erstellen Oft an Implementierung gebunden Kommerzielle Komponenten Anpassungen in der Regel nur über Attribute Lizenzgebühren 35 Ajax-Komponenten - Produkte Freie Komponenten RCFaces (Sourceforge) Apache Trinidad alias Oracle ADF Apache Shale JSF-Extensions, DynaFaces (Sun, OpenSource, ab JSF 1.2) Kommerziell IceFaces, auch Community Edition NetAdvantage... 36

20 IceFaces - Übersicht Direct-to-DOM Lightweight-AJAX-Bridge Inkrementelles Seiten-Update Partial Form-Processing Serverseitige Datenaktualisierung (Reverse Ajax) 37 IceFaces - Beispiel <h1>some Progress</h1>... <ice:outputprogress value="#{progressbean.percent}"... 38

21 Wrapper - Übersicht Einbinden anderer Technologien Breites Feld an Funktionalität Beispiele DWR: Direct Web Remoting, (Sun, OpenSource) g4jsf: Google Web Toolkit (Sun, OpenSource) jmaki (Sun, OpenSource) 39 Wrapper - Pro & Contra Vorteile Zugriff auf mächtige Komponenten Schnelles Lösen von konkreten Problemen Nachteile JSF wird umgangen Keine saubere Einbindung in JSF-Kontext Verwaltung unterschiedlicher Technologien 40

22 Wrapper - jmaki - Übersicht Wrapper für AJAX-Toolkits Parametrisiertes JavaScript Zusammenfassung in Widgets Trennung der Artefakte Funktioniert mit JSPs und JSF Einheitliches Programmier-Modell Einfach erweiterbar 41 Wrapper - jmaki - Beispiel Etwas Konfiguration und eine Zeile: <a:ajax name="dojo.editor" value="tipp Mich." /> 42

23 Handarbeit - Motivation Eigene Ajax-Komponenten erstellen Umgehen der Stolperfallen Maßgeschneiderte Komponenten Know-How Zuwachs Alles aus einer Hand Flexibilität Performance 43 Handarbeit - Nachteile Know-How erforderlich Ressourcen Offene Fragen Framework? Rasante Entwicklung 44

24 Gliederung Ajax JavaServer Faces Integration Diskussion und Ausblick 45 Hochzeit im Himmel? Viele Möglichkeiten Einige gute Ansätze Schöne neue Welt InputSuggest als Komponente Ajax ohne JavaScript Desktop im Browser 46

25 .. Oder doppelte Probleme? Qual der Wahl & Wahl der Qual Viele halbgare Lösungen Noch kein Mainstream ersichtlich Nicht kompatible Ansätze 47 Ausblick Dynamische Entwicklung Die Zeit spricht für Verknüpfung Konsolidierung der Ansätze Avatar, JSF 1.2, 2.0 Spannende Ideen: DWR Reverse Ajax XUL, XAML,... 48

26 Literaturhinweise Ajax in Action Gebundene Ausgabe: 687 Seiten Verlag: Addison-Wesley, München Sprache: Deutsch ISBN: Pro JSF and Ajax Sondereinband: 464 Seiten Verlag: APress,US Sprache: Englisch ISBN: Vielen Dank für Ihre Aufmerksamkeit! Orientation in Objects GmbH Weinheimer Str Mannheim

27 ??? Fragen?? Orientation in Objects GmbH? Weinheimer Str Mannheim