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

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

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

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?

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

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 Beispiel: ArtikelHandler (Quellcode)

ManagedBean: ArtikelHandler XML-Konfiguration(faces-xonfig.xml) Artikel Handler artikelHandler shop.controller.ArtikelHandler application Seite Beispiel: ArtikelHandler (XML-Konfiguration)

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

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

Standardkomponentemodell Aufbau: Seite Standardkomponentenmodell UIComponent UIComponentBase UIForm……

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 Beispiel: dataTable

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

Komponente: dataTable Beispiel: Artikelliste (erzeugter Code) ArtikelNr x. … dynamisch: je nach Größe der Liste! y. z. Seite Beispiel: dataTable

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

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 MVC-Entwurfsmuster

Live Vorf ü hrung: Artikelliste

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

Verhalten und Darstellung 1.Vorteil: MVC-Muster Optimierung! Seite 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

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

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

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 Das Verhalten

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

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

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 Das Verhalten

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 Die Darstellung

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

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

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 Die Darstellung

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 Die Verknüpfung von Darstellung und Verhalten

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

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 Die Verknüpfung von Darstellung und Verhalten

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 Die Verknüpfung von Darstellung und Verhalten

Live Vorf ü hrung: Warenkorb-Komponente

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

Noch Fragen ? Vortragender: Thomas Dermin

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