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 Language4. Standardkomponentenmodell
4.1 Beispiel: dataTable
5. Live Vorführung: Artikelliste
Seite 2Inhaltsverzeichnis
Inhaltsverzeichnis – Teil 2
6. MVC – Entwurfsmuster7. 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-Komponente9. Fazit
Seite 3Inhaltsverzeichnis
Was ist JavaServer Faces?
Ein Framework:- Für Benutzungsschnittstellen- Auf Java-Basis- Für Web-Anwendungen
Technologie basiert auf:- JSP- Servlets
Seite 41. 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.xmlb) Verwendung von Annotation
Seite 52. ManagedBeans
ManagedBean: ArtikelHandlerQuellcode:1. public class ArtikelHandler2. {3. private LinkedList<Artikel> artikelliste;4.5. public ArtikelHandler() { }6.7. public LinkedList<Artikel> getArtikelliste() {…}8. public void setArtikelliste(LinkedList<Artikel> artikelliste){…}9. }
Seite 62.1 Beispiel: ArtikelHandler (Quellcode)
ManagedBean: ArtikelHandlerXML-Konfiguration(faces-xonfig.xml)1. <managed-bean>2. <description>3. Artikel Handler4. </description>5. <managed-bean-name>6. artikelHandler7. </managed-bean-name>8. <managed-bean-class>9. shop.controller.ArtikelHandler10. </managed-bean-class>11. <managed-bean-scope>12. application13. </managed-bean-scope>14. </managed-bean>
Seite 72.2 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 83. JavaServer Faces Expression Language
Standardkomponentemodell
JSF definiert ein:- hierarchisch- Komponentenmodell- wiederverwendbare UI-Komponentenelemente- Aufbau ähnelt Java-Swing
Seite 94. Standardkomponentenmodell
Standardkomponentemodell
Aufbau:
Seite 104. Standardkomponentenmodell
UIComponent
UIComponentBase
UIForm… …
Komponente: dataTable
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 114.1 Beispiel: dataTable
Komponente: dataTable
Beispiel: Artikelliste1.<h:dataTable var=“derArtikel“2. value=“#{artikelHanderl.artikelliste}“>3. <h:column>4. <f:facet name=“header“>5. <h:outputText value=“ArtikelNr“ />6. </f:facet>7. <h:outputText value=“#{derArtikel.artikelNr}“ />8. </h:column>x. …viele weitere Spalten können hier definiert werden!y.</h:dataTable>
Seite 124.1 Beispiel: dataTable
Komponente: dataTable
Beispiel: Artikelliste (erzeugter Code)1. <table>2. <thead>3. <tr><th>ArtikelNr</th></tr>4. </thead>5. <tbody>6. <tr><td>1</td></tr>7. <tr><td>2</td></tr>x. … dynamisch: je nach Größe der Liste!y. </tbody>z. </table>
Seite 134.1 Beispiel: dataTable
MVC-Entwurfsmuster
Beispiel:Der Controller hält View und Modelzueinander konsistent!
Seite 145. 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 JSFbasiert auf der Zustandslosen Kommunikationvon HTTP!
Lösung:Speichern des Zustandes des“Komponentenbaumes“ zwischen zwei Anfragen!
Durch den Vergleich des alten mit dem neuenZustandes ergibt sich logisch ob z.b. Werte inKomponente verändert haben: die Folge könnte einValue-Change Event sein. Registrierte Controller könntendarauf reagieren.
Seite 155. MVC-Entwurfsmuster
Live Vorführung:Artikelliste
Verhalten und Darstellung
Trennung von Verhalten(bzw. Zustand) undDarstellung 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 187.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
Verhalten und Darstellung
2. Vorteil: Flexibler Austausch der Darstellungsart!
Seite 197.1 Trennung von Verhalten und Darstellung
Komponente
HTMLSVG
(skalierbare Vektorgrafik)
Aufbau einer Komponente
Seite 207.2 Aufbau einer Komponente
UI-Komponente
Verhaltenklasse Darstellungsklasse(„Renderer“) Tagklasse
Das Verhalten
Aufgabe:Darstellungs-unabhängiges Verhalten realisieren.
1. Datenstruktur inkl. Verwaltungsmethoden2. Speichern des aktuelles Zustandes3. Laden eines alten Zustandes4. Eventerzeugung
Seite 217.3 Das Verhalten
Das Verhalten
Beispiel:Ausgabelabel für eine Eingabekomponente
Seite 227.3 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 definieren3. Oberklasse: „UIComponentBase“ ableiten
Seite 237.3 Das Verhalten
Das Verhalten
Implementierung:4. Komponentenfamilie angeben
public String getFamily (){ … }
5. Aktuellen Zustand speichernpublic Object saveState(…){ … }
6. Einen alten Zustand wiederherstellenpublic void restoreState(…){ … }
Seite 247.3 Das Verhalten
Die Darstellung
Aufgabe:Repräsentation der Komponentein 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 257.4 Die Darstellung
Die Darstellung
Beispiel:HTML aber auch SVG wäre möglich(d.h. „rendert“)
Seite 267.4 Die Darstellung
Komponente
HTMLSVG
(skalierbare Vektorgrafik)
Die Darstellung
Implementierung:1. Oberklasse „javax.faces.render.Renderer“
ableiten
2. Kodierung der StarttagsencodeBegin(…)
3. Kodierung der KindelementeencodeChildren(…)
Seite 277.4 Die Darstellung
Die Darstellung
Implementierung:4. Kodierung des Endtags
encodeEnd(…)
5. Dekodierung der Request-Paramterund der Komponente zuweisendecode(…)
6. Request-Paramter die nicht String / Object sind Konvertieren:getConvertedValue(…)
Seite 287.4 Die Darstellung
Die Verknüpfung
Aufgabe:Die Verknüpfung der Verhaltensklasse mit derRendererklasse.
1. Angabe der Komponentenfamilie2. Angabe des Renderertyps3. Attribute des Tags der Komponente zuweisen4. Weitere Komponenten-unabhängige Attribute
wie z.b. styleClass für die Angabe von CSS-Klassen im Tag
Seite 297.5 Die Verknüpfung von Darstellung und Verhalten
Die Verknüpfung
Beispiel:Ein Tag verknüpft mit dem HTML-Renderer,der andere denSVG-Renderer.
Seite 307.5 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 317.5 Die Verknüpfung von Darstellung und Verhalten
Die Verknüpfung
Implementierung:4. Komponententyp definieren
public String getComponentType()
5. Renderertyp definierenpublic String getRendererType()
6. Im Konstruktur die Werte der Komponente zuweisen
Seite 327.5 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: http://java.sun.com/javaee/javaserverfaces/