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

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


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>



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>


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


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


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


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


Das Verhalten

Implementierung:4. Komponentenfamilie angeben

public String getFamily (){ … }

5. Aktuellen Zustand speichernpublic Object saveState(…){ … }

6. Einen alten Zustand wiederherstellenpublic void restoreState(…){ … }


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“)


Komponente

HTMLSVG

(skalierbare Vektorgrafik)

Die Darstellung

Implementierung:1. Oberklasse „javax.faces.render.Renderer“

ableiten

2. Kodierung der StarttagsencodeBegin(…)

3. Kodierung der KindelementeencodeChildren(…)


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(…)


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.


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)


Die Verknüpfung

Implementierung:4. Komponententyp definieren

public String getComponentType()

5. Renderertyp definierenpublic String getRendererType()

6. Im Konstruktur die Werte der Komponente zuweisen


Live Vorführung:Warenkorb-Komponente

Vielen Danke für Ihre Aufmerksamkeit !


Noch Fragen?


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/

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

Documents

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