Seminar Web-Anwendungen mit JSP u. ASP.NET entwickeln JavaServer Faces Vortragender: Thomas Dermin Custom-Components.

Präsentation zum Thema: "Seminar Web-Anwendungen mit JSP u. ASP.NET entwickeln JavaServer Faces Vortragender: Thomas Dermin Custom-Components."—  Präsentation transkript:

1 Seminar Web-Anwendungen mit JSP u. ASP.NET entwickeln JavaServer Faces Vortragender: Thomas Dermin Custom-Components

2 Inhaltsverzeichnis – Teil 1 1.Was ist JavaServer Faces? 2.ManagedBeans 2.1 Beispiel: ArtikelHandler (Quellcode) 2.2 Beispiel: ArtikelHandler (XML-Konfiguration) 3.JavaServer Faces Expression Language 4.Standardkomponentenmodell 4.1 Beispiel: dataTable 5.Live Vorführung: Artikelliste Seite 2 Inhaltsverzeichnis

3 Inhaltsverzeichnis – Teil 2 6.MVC – Entwurfsmuster 7.Benutzerdefinierte Komponenten 7.1 Trennung von Verhalten und Darstellung 7.2 Aufbau einer Komponente 7.3 Das Verhalten 7.4 Die Darstellung 7.5 Verknüpfung von Verhalten und Darstellung 8.Live-Vorführung: Warenkorb-Komponente 9.Fazit Seite 3 Inhaltsverzeichnis

4 Was ist JavaServer Faces ? Ein Framework: -Für Benutzungsschnittstellen -Auf Java-Basis -Für Web-Anwendungen Technologie basiert auf: -JSP -Servlets Seite 4 1. Was ist JavaServer Faces?

5 ManagedBeans Was: -JavaBean -Zur Unterstützung der UI-Komponenten -Teil des Controllers (MVC-Muster) -Verwaltet durch die JSF-Implementierung Deklaration der ManagedBean: a)Konfiguration in faces-config.xml b)Verwendung von Annotation Seite 5 2. ManagedBeans

6 ManagedBean: ArtikelHandler Quellcode: 1. public class ArtikelHandler 2. { 3. private LinkedList artikelliste; 4. 5.public ArtikelHandler() { } 6. 7.public LinkedList getArtikelliste() {…} 8.public void setArtikelliste(LinkedList artikelliste){…} 9. } Seite 6 2.1 Beispiel: ArtikelHandler (Quellcode)

7 ManagedBean: ArtikelHandler XML-Konfiguration(faces-xonfig.xml) 1. 2. 3. Artikel Handler 4. 5. 6. artikelHandler 7. 8. 9. shop.controller.ArtikelHandler 10. 11. 12. application 13. 14. Seite 7 2.2 Beispiel: ArtikelHandler (XML-Konfiguration)

8 JSF Expression Language Was: -Kleine Scriptsprache zur Auswertung von Ausdrücken -Basiert auf JSP-EL Sytax: #{ JSF-EL-Ausdruck } Beispiel: #{17 + 3} #{artikelHandler.artikelliste} //siehe nächste Seite! Seite 8 3. JavaServer Faces Expression Language

9 Standardkomponentemodell JSF definiert ein: -hierarchisch -Komponentenmodell -wiederverwendbare UI-Komponentenelemente -Aufbau ähnelt Java-Swing Seite 9 4. Standardkomponentenmodell

10 Standardkomponentemodell Aufbau: Seite 10 4. Standardkomponentenmodell UIComponent UIComponentBase UIForm……

11 Komponente: dataTable -Erzeugt eine HTML Tabelle -Spaltenorientiert (HTML = Zeilenorientiert) -Kombiniert mit einer Zählschleife -Value-Attribut erwartet eine Liste/Array von Objekten -Var- gibt den Namen des aktuellen Objekts an Seite 11 4.1 Beispiel: dataTable

12 Komponente: dataTable Beispiel: Artikelliste 1.<h:dataTable var=derArtikel 2.value=#{artikelHanderl.artikelliste}> 3. 4. 5. 6. 7. 8. x. …viele weitere Spalten können hier definiert werden! y. Seite 12 4.1 Beispiel: dataTable

13 Komponente: dataTable Beispiel: Artikelliste (erzeugter Code) 1. 2. 3. ArtikelNr 4. 5. 6. 1 7. 2 x. … dynamisch: je nach Größe der Liste! y. z. Seite 13 4.1 Beispiel: dataTable

14 MVC-Entwurfsmuster Beispiel: Der Controller hält View und Model zueinander konsistent! Seite 14 5. MVC-Entwurfsmuster View (JSP + JSF) [Artikelliste.jsp] Model (Java-Klasse) [Artikel.java] Controller (JavaBean) [ArtikelHandler.java]

15 MVC-Entwurfsmuster Problem: MVC arbeitet mit Zuständen, aber JSF basiert auf der Zustandslosen Kommunikation von HTTP! Lösung: Speichern des Zustandes des Komponentenbaumes zwischen zwei Anfragen! Durch den Vergleich des alten mit dem neuen Zustandes ergibt sich logisch ob z.b. Werte in Komponente verändert haben: die Folge könnte ein Value-Change Event sein. Registrierte Controller könnten darauf reagieren. Seite 15 5. MVC-Entwurfsmuster

16 Live Vorf ü hrung: Artikelliste

17 Verhalten und Darstellung Trennung von Verhalten(bzw. Zustand) und Darstellung einer Komponente! Seite 17 UI-Komponente Verhalten Darstellung (Renderer) 7.1 Trennung von Verhalten und Darstellung

18 Verhalten und Darstellung 1.Vorteil: MVC-Muster Optimierung! Seite 18 7.1 Trennung von Verhalten und Darstellung View (JSP) [Kundenliste.jsp]: + Darstellungen der Komponenten (z.b HTML) Model (Java-Klasse) [Kunde.java] Controller (JavaBean) [KundenHandler.java] + Verhalten der Komponenten

19 Verhalten und Darstellung 2.Vorteil: Flexibler Austausch der Darstellungsart! Seite 19 7.1 Trennung von Verhalten und Darstellung Komponente HTML SVG (skalierbare Vektorgrafik)

20 Aufbau einer Komponente Seite 20 7.2 Aufbau einer Komponente UI-Komponente Verhaltenklasse Darstellungsklasse (Renderer) Tagklasse

21 Das Verhalten Aufgabe: Darstellungs-unabhängiges Verhalten realisieren. 1.Datenstruktur inkl. Verwaltungsmethoden 2.Speichern des aktuelles Zustandes 3.Laden eines alten Zustandes 4.Eventerzeugung Seite 21 7.3 Das Verhalten

22 Das Verhalten Beispiel: Ausgabelabel für eine Eingabekomponente Seite 22 7.3 Das Verhalten Verhaltensklasse der Komponente Attribut: String label; Attribut: String forId;

23 Das Verhalten Implementierung: 1.Benötigte Attribute hinzufügen (inkl.Verwaltungsmethoden) 2.Renderertyp im Konstruktur definieren 3.Oberklasse: UIComponentBase ableiten Seite 23 7.3 Das Verhalten

24 Das Verhalten Implementierung: 4.Komponentenfamilie angeben public String getFamily (){ … } 5.Aktuellen Zustand speichern public Object saveState(…){ … } 6.Einen alten Zustand wiederherstellen public void restoreState(…){ … } Seite 24 7.3 Das Verhalten

25 Die Darstellung Aufgabe: Repräsentation der Komponente in die für den Benutzer darstellbare Form. 1.Kodierung der Komponenten in einer Darstellung 2.Decodierung aus der Darstellung in die Komponente zurück Seite 25 7.4 Die Darstellung

26 Die Darstellung Beispiel: HTML aber auch SVG wäre möglich (d.h. rendert) Seite 26 7.4 Die Darstellung Komponente HTML SVG (skalierbare Vektorgrafik)

27 Die Darstellung Implementierung: 1.Oberklasse javax.faces.render.Renderer ableiten 2.Kodierung der Starttags encodeBegin(…) 3.Kodierung der Kindelemente encodeChildren(…) Seite 27 7.4 Die Darstellung

28 Die Darstellung Implementierung: 4.Kodierung des Endtags encodeEnd(…) 5.Dekodierung der Request-Paramter und der Komponente zuweisen decode(…) 6.Request-Paramter die nicht String / Object sind Konvertieren: getConvertedValue(…) Seite 28 7.4 Die Darstellung

29 Die Verkn ü pfung Aufgabe: Die Verknüpfung der Verhaltensklasse mit der Rendererklasse. 1.Angabe der Komponentenfamilie 2.Angabe des Renderertyps 3.Attribute des Tags der Komponente zuweisen 4.Weitere Komponenten-unabhängige Attribute wie z.b. styleClass für die Angabe von CSS- Klassen im Tag Seite 29 7.5 Die Verknüpfung von Darstellung und Verhalten

30 Die Verkn ü pfung Beispiel: Ein Tag verknüpft mit dem HTML-Renderer, der andere den SVG-Renderer. Seite 30 7.5 Die Verknüpfung von Darstellung und Verhalten Verhalten der Komponente HTML-Renderer SVG-Renderer Tag4HTML Tag4SVG

31 Die Verkn ü pfung Implementierung: 1. Ableiten der Oberklasse:javax.faces.webapp.UIComponentELTag 2.Alle Attribute des Verhaltensklasse hinzufügen (inkl. Verwaltungsmethoden) 3.Nicht-Verhaltensspezifische Komponentenattribute hinzufügen z.b. styleClass für CSS-Klassen angabe (ink. Verwaltungsmethoden) Seite 31 7.5 Die Verknüpfung von Darstellung und Verhalten

32 Die Verkn ü pfung Implementierung: 4.Komponententyp definieren public String getComponentType() 5.Renderertyp definieren public String getRendererType() 6.Im Konstruktur die Werte der Komponente zuweisen Seite 32 7.5 Die Verknüpfung von Darstellung und Verhalten

33 Live Vorf ü hrung: Warenkorb-Komponente

34 Vielen Danke f ü r Ihre Aufmerksamkeit ! Vortragender: Thomas Dermin

35 Noch Fragen ? Vortragender: Thomas Dermin

36 Quellenangabe Müller, Bernd: Java Server Faces: Ein Arbeitsbuch für die Praxis, 1. Auflage, Carl Hanser Verlag München, 2006 Wien Internet: http://java.sun.com/javae e/javaserverfaces/