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/