8. Java Server Faces Grundlagen der Programmierung II (Java) · JSF: User Interfaces für...

8. Java Server Faces

Prof. Dr. Bernhard HummHochschule Darmstadt – University of Applied SciencesSommersemester 2006

Grundlagen der Programmierung II (Java)

Seite 2Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. Sommersemester 2006., 23.5.2006,

Einordnung in den Kontext der Vorlesung

Anwendungsentwicklung (Referenzarchitektur, Softwarekategorien)

Anwendungs-Komponenten (Anwendungskern)

Datenbankzugriff

Graphische Benutzeroberflächen (Swing, JSF)

Client- / Serverkommunikation (RMI)

Berechtigungsverwaltung

Application Server (EJB)

Erweiterte Konzepte (Reflection, Threads, Design Patterns, …)

Übersicht Grundlagen der Programmierung II

JSF: User Interfaces für Web-Anwendungen

JSF von Außen

JSF im Einsatz: Ein Beispiel

Fazit und Referenzen

Seite 3Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. Sommersemester 2006. 23.5.2006

� JSF: User Interfaces für Web-Anwendungen

Agenda

Agenda


User Interfaces für Web-Anwendungen

Was fast jeder Java-Web-Entwickler sich wünscht, ist ein UI-Framework

mit dem Komfort und den Gestaltungsmöglichkeiten von Swing

� Genauer: Smart Client ohne Scripting-Chaos, dafür aber mit GUI-

Komponenten, Support für Dialogsteuerung, Internationalisierung, ...

� Derzeit exisitiert ein ganzer Zoo von UI-Frameworks für Web-

Anwendungen auf dem Markt (WingS, XUL, Tapestry, ...)

� Jedes dieser Frameworks funktioniert anders, alle erzeugen aber

irgendwann mal HTML (oder eine andere Markup-Sprache)

� Einige davon bringen (meist proprietäre) Tool-Unterstützung mit




Was man sich also zusätzlich wünscht, ist ein Standard, der

� eine saubere Basis-Architektur hat

� für einfache Anwendungen einfach benutzbar ist

� mit vorhandenen Web-Frameworks interagiert und integriert

� eine solide Basis für Tool-Unterstützung liefert und...

� sich durchsetzt!




Nachdem Microsoft es mit den .NET-WebForms vorgemacht hat,

hat Sun das Problem auch endlich erkannt und JSF geschaffen

� Im September 2002 wurde der Java Specification Request (JSR) 127

in den Java Community Process (JCP) eingebracht

� Im März 2004 wurde der Final Release der Spezifikation von JSF 1.0

veröffentlicht

� Die Referenzimplementierung ist bereits in J2EE 1.4 integriert

� Alternative Implementierungen sind bereits im Gange


Achtung: JSF ist ein UI-Framework für Web-Anwendungen.

Es erhebt nicht den Anspruch ein Applikations-Framework zu sein.

Kann aber konzeptionell mit Applikations-Frameworks integriert werden.


JSF von Außen




� JSF von Außen

Agenda

Agenda


Der Technologiestack von JSF

� JSF (Java Server Faces): Standard

Web UI Technologie nach MVC

� Taglib: Bibliothek für JSP-Tags zur

Minimierung des Java-Codes in JSPs

� JSP (Java Server Pages): Java-Code

in HTML-Seiten eingebettet

� Servlet: Klassenbibliothek zum

Empfangen von HTTP-Requests und

Generieren von HTML-Seiten

� HTML (Hypertext Markup Language):

Darstellung von Web-Inhalten

� XML (Extensible Markup Language):

Metasprache zur Definition von

Auszeichungssprachen

Servlet API

JSP API JSF API

JSF Taglibs

JSF basierte Applikation

HTML XML Java

JSF von Außen


Ein Komponentenmodell für User Interfaces

JSF besteht aus drei wesentlichen Bestandteilen

� Die JSF-Komponenten

– serverseitig implementierte UI-

Komponenten

– unterstützt durch Event-Listener,

Validatoren und Konverter

� Die JSF-Taglibs

– zur Abbildung der Komponenten in eine

Scripting-Sprache (Java Server Pages)

� Das Eventmodell und der definierte JSF-

View-Lebenszyklus

JSF von Außen

Browser

WebContainer

Page

UIComponent

Access page

HTTPRequest

Return Content

HTTP Response

Servlet API

JSP API JSF API

JSF Taglibs

JSF basierte Applikation

MVC fürs Web

JSF von Außen

JSF basiert (natürlich) auf dem MVC-Pattern...

BackingJavaBeans

UI Components

Converters

Page(JSP)

<h:commandButton

id="submit"

action="success“

value="Submit" />

Validators

Listeners

Model View Controller

Also:

Saubere Trennung

zwischen Zustand,

Verhalten und Darstellung

Application

Infrastructure

RenderKit

JSF Taglib

Navigation

Renderer

Browser

WebContainer

Page

UIComponent

Access page

HTTPRequest

Return Content

HTTP Response


Plug&Play

JSF von Außen

...und so gut wie alles an JSF ist pluggable, erweiterbar und konfigurierbar

UI Components

Converters

Validators

Listeners

ApplicationInfrastructure

RenderKit

Navigation Handler

� Infrastrukturklassen (Application etc.)

� Renderer, Renderkits

� UI-Komponenten

� Konverter und Validatoren

� Listener

� Navigation

� Resourcen

Aber:

Das macht es natürlich auch

komplex (siehe Swing) faces-config.xml

ResourceBundle


UI-Komponenten

JSF von Außen

UIComponent

UIComponentBase

UIGraphic

UICommand

UIOutput

UINamingContainer

UIForm

UISelectItem

UISelectItems

UIPanel

UIInput

UISelectBoolean

UISelectOne

UISelectMany UIPara

meter

UIData

UIMessage

UIColumn

UIViewRoot

UIMessages

UI-Komponenten

JSF von Außen

UICommand Represents a control that fires actions when activated.

UIViewRoot Represents the root of the component tree.

UIPanel Manages the layout of its child components.

UINamingContainer Container für die strukturierte Benennung von Kindkomponenten

UIForm Group of controls that submit data to the application. Analogous to <form> tag in HTML.

UIOutput Displays data output on a page.

UIInput Takes data input from a user. This class is a subclass of UIOutput.

UISelectBoolean Set a boolean value on a control by selecting or deselecting it. Subclass of UIInput.

UISelectOne Select one item from a group of items. Subclass of UIInput.

UISelectMany Select multiple items from a group of items. Subclass of UIInput.

UISelectItem Represents a single item in a set of items. Nested in UISelectOne or UISelectMany.

UISelectItems Represents an entire set of items. Nested in UISelectOne or UISelectMany.

UIData Represents a tabular collection of data represented by a DataModel instance.

UIColumn Represents a single column of data in a UIData component.

UIMessage Displays a localized message.

UIMessages Displays a set of localized messages.

UIGraphic Displays an image.

UIParameter Represents substitution parameters.


Entwicklungsprozess

JSF von Außen

Für eine einfache JSF-Anwendung ergeben sich folgende

Entwicklungsschritte:

� Entwicklung der Datenmodell-Schnittstelle in Form von Backing-Beans

� Deklaration der Backing-Beans im Applikations-Konfigurationsfile

� Erzeugen der Präsentations-Seiten mit Hilfe der JSF Tag-Libraries

� Definieren der Seitennavigation im Applikations-Konfigurationsfile


Entwicklungsprozess

JSF von Außen

Für komplexere JSF-Anwendungen kommen ggf. noch folgende

Entwicklungsschritte hinzu:

� Implementieren und Einbinden von eigenen Listenern für

– erweiterte (datenabhängige) Dialogsteuerung und

– umfangreichere Datenzugriffe und Verarbeitungslogik

� Implementieren eigener Validatoren und Konverter für komplexe

Datentypen

� Erweiterung bzw. Eigenentwicklung von UI-Komponenten, inclusive

dazugehöriger Tags und Renderer


JSF von Außen




� JSF im Einsatz: ein Beispiel

Agenda

Agenda


Ein Beispiel: Expense Reports

JSF im Einsatz: ein Beispiel


Ein Beispiel: ExpenseReports

� Quelle: Hans Bergsten, Java Server

Faces (O‘Reilly 2004)

� Einfache Verwaltung von

Spesenabrechnungen

� Benutzerprofile „Angestellter“ und

„Manager“ mit unterschiedlichen

Zugriffsrechten

� Erstellung und Prüfung von

Spesenabrechnungen

� Umfasst alle wesentlichen Aspekte der

Anwendungsentwicklung mit Java Server

Faces

� Deployed in Apache Tomcat 5.0


Dialoge (View): Basiselemente

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<f:view>

<h:form>

<h:outputText value="#{labels.reportTitleLabel}"/>

<h:inputText id="title" size="30" required="true"

value="#{reportHandler.currentReport.title}" />

<h:message for="title" />

 

<h:outputText value="#{labels.reportEntryLabel}"/>

 

<h:outputText value="#{labels.reportDateLabel}"/>

<h:inputText id="date" size="8" required="true"

value="#{entryHandler.currentEntry.date}">

<f:convertDateTime dateStyle="short" />

</h:inputText>

<h:message for="date" />

 

...


Ein Viewentspricht

einer Request-Antwort!

Dialoge (View): Basiselemente

...

<h:outputText value="#{labels.reportTypeLabel}"/>

<h:selectOneMenu id="type" required="true"

value="#{entryHandler.currentEntry.type}">

<f:selectItems

value="#{entryHandler.expenseTypeChoices}"/>

</h:selectOneMenu>

<h:message for="type" />

 

<h:outputText value="#{labels.reportAmountLabel}"/>

<h:inputText id="amount" size="8" required="true"

value="#{entryHandler.currentEntry.amount}">

<f:convertNumber pattern="#,##0.00" />

<f:validateDoubleRange minimum="1"/>

</h:inputText>

<h:message for="amount" />

 

<h:commandButton value="Add"

disabled="#{reportHandler.editDisabled}"/>

</h:form>

</f:view>


Navigation (Controller)


� Die Dialogsteuerung ist über ein

Automatenmodell im Applications-

Konfigurationsfile konfigurierbar

� Der Navigation Handler ermittelt

über die von den ActionListenern

gelieferten Tags den Folgedialog

Navigation (Controller)

<navigation-rule>

<from-view-id>/reports.jsp</from-view-id>

<navigation-case>

<from-action>

#{userHandler.editProfile}

<from-outcome>success</from-outcome>

<to-view-id>/preferences.jsp</to-view-id>

</navigation-case>

</navigation-rule>

<navigation-rule>

<from-view-id>/preferences.jsp</from-view-id>

<navigation-case>

<from-action>

#{userHandler.updateProfile}

</from-action>

<from-outcome>success</from-outcome>

<to-view-id>/reports.jsp</to-view-id>

</navigation-case>

</navigation-rule>


<h:commandLink id="preferences"

action ="#{userHandler.editProfile}"

value="Preferences" />

<h:commandButton

id="updateProfile"

action="#{userHandler.updateProfile}"

value="UpdateProfile" />

Zugriff auf Anwendungslogik (Model): Backing Beans


<h:dataTable value="#{reportHandler.sortedReportsModel}" ... ...>

public class ReportHandler {

...

private DataModel reportsModel;

public DataModel getSortedReportsModel() {

if (reportsModel == null) {

reportsModel = new ListDataModel();

}

List reports = getReports();

sortReports(reports);

reportsModel.setWrappedData(reports);

return reportsModel;

}

...

}

� Backing Beans dienen als Adapter

zwischen JSF und der

Anwendungslogik

� Sind aber nur sauberes Design,

kein Bestandteil der Spezifikation

� JSF-DataModel-Klasse zur

Unterstützung für Tabellen wrappt

Arrays, Listen und SQL-Resultsets

Zugriff auf Anwendungslogik (Model): Beans-Deklarationen

<managed-bean>

<managed-bean-name>reportHandler</managed-bean-name>

<managed-bean-class>

com.mycompany.expense.ReportHandler

</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

<managed-property>

<property-name>reportRegistry</property-name>

<value>#{reportRegistry}</value>

</managed-property>

</managed-bean>

<managed-bean>

<managed-bean-name>reportRegistry</managed-bean-name>

<managed-bean-class>

com.mycompany.expense.FileReportRegistry

</managed-bean-class>

<managed-bean-scope>application</managed-bean-scope>

</managed-bean>


� Deklaration verwendeter

Java-Beans

� Lebensdauer bzw.

Sichtbarkeit über Scope

(Request, Session,

Application)

� Vorbelegung der Bean-

Properties mit Default-

Werten

� Durch Schachtelung

können komplette Bean-

Strukturen deklarativ

aufgebaut werden


JSF von Außen




� Fazit und Referenzen

Agenda

Agenda


Fazit

� JSF ist analog Swing sehr komplex und erfordert intensive Einarbeitung

� Das Programmiermodell von Swing wurde aber nicht 100% adaptiert

� JSF wir häufig falsch wahrgenommen, nämlich als Allheilmittel und Garantie für hochwertige Web-Anwendungen

� JSF ist ein UI-Framework, kein Application-Framework, diesem Anspruch wird es gerecht

� JSF hat eine saubere Architektur und eine brauchbare Referenz-implementierung

� JSF ist integrativ und sollte sich relativ einfach in andere Frameworks einfügen

� JSF ist sehr flexibel, da so gut wie alles pluggable oder konfigurierbar ist

� JSF ist auf dem Weg, als Standard akzeptiert zu werden



Alternative Implementierungen

� ECruiser: Implementierung des 1.0-Standards mit erweiterter

Komponentenbiliothek

� The Keel Meta-Framework: Integrationsframework für mehrere Open-

Source Projekte (Avalon, Cocoon, Struts, JBoss, Turbine, ...) und seit

neuestem auch JSF

� MyFaces: Erste Open-Source Vollimplementierung des Standars,

ebenfalls mit erweiterter Komponentenbibliothek mit Fancy-

Komponenten (Kalender, Tabbed Pane, ...)

� smile: „Componente only approach“, Open-Source Implementierung

mit eigener Designer-Anwendung aber ohne JSP-Tags


Resourcen: http://www.jsfcentral.com/products

4


Komponenten

� jsfcomp: Komponentenbibliothek für E-Business-Anwendungen

� WebGalileo Faces Components: Komponentenbibliothek mit Swing-

Like Komponenten (TabbedPanel, Toolbar, Menu, Tree, Table)

� WebTree, WebMenu, WebGrid : Luxus-Komponenten für Bäume,

Menüs und Tabellenverarbeitung




Entwicklungsunterstützung durch Tools

Integrated Development Environents

� Eclipse based: Eclipse Web Tools JSF, MyEclipse, Exadel JSFStudio,

� IBM WebSphere Studio Application Developer

� Sun Java Studio Creator

� Oracle JDeveloper

IDE-Plugins

� Fast alle IDEs: Java Server Faces Console

� NetBeans/Sun One Studio: Kobrix WebFaces



http://www.jamesholmes.com


Quellen und Literatur

Literatur und Artikel

� Hans Bergsten: Java Server Faces, Building web-based user interfaces (O‘Reilly 2004)

� Sun Microsystems, The J2EE 1.4 Tutorial (http://java.sun.com/j2ee/1.4/docs/tutorial/doc/index.html)

� Sun Microsystems, Introducing JSF Technology

(http://java.sun.com/developer/EJTechTips/2004/tt0324.html#2 )

� Sun Microsystems, Java Server Faces Specification, Final Release 1.0

(http://jcp.org/aboutJava/communityprocess/final/jsr127/)

� Kai Zaunick: Gut zu Gesicht, Java Server Faces (Java Spektrum 1/2004)

(http://www.sigs.de/publications/js/2004/01/zaunick_JS_01_04.pdf)

� Hans Bergsten: Improving JSF by dumping JSP

(http://www.onjava.com/pub/a/onjava/2004/06/09/jsf.html)

Resourcen

� Sun Developer Network: http://java.sun.com/j2ee/javaserverfaces/

� Sun Java Server Faces Forum: http://forum.java.sun.com/forum.jsp?forum=427

� JSFCentral: http://www.jsfcentral.com/products

� James Holmes: http://www.jamesholmes.com


8. Java Server Faces Grundlagen der Programmierung II (Java) · JSF: User Interfaces für...

Documents

Transcript of 8. Java Server Faces Grundlagen der Programmierung II (Java) · JSF: User Interfaces für...