Sie sind auf Seite 1von 55

Facelifting

JavaServer Faces 2.0

Ed Burns, Oliver Szymanski

www.mathema.de

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 1


Agenda

 Sie haben hoffentlich schon JSF Erfahrungen...


 Was ist neu mit JSF
 Wann haben wir Pause?
 Vormittags, Mittags, Nachmittags

 … Abends, Nachts (nur kurz) ...

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 2


Inhalt

 Historie von JSF


 Design-Prinzipien hinter JSF
 Lebenszyklus bei der Request-Verarbeitung
 Entwicklung einer Facelet-Seite
 Konfiguration
 Komponenten
 Ressourcen

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 3


Historie von JSF

 Geschichtlicher Hintergrund
 Ökonomisch und Technische Hintergrund
 Die Wichtigkeit des Software Plattform: .NET vs Java
 JSF 1.0 (seit 2001 - 2004)
 JSF 1.1 (2004)
 Läuft unter J2EE 1.4
 JSF 1.2
 Läuft unter Java EE 5

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 4


Anforderungen

 Internationalisierung
 Seitennavigation
 Parameterübergabe /
Mapping
 Validierung
 Konvertierung
 Sicherheit

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 5


Design Prinzipien hinter JSF: 1.0

 Basis Prinzipien
 MVC (Model View Controller)
 POJO-Modell
 View Hierachie + verknüpfte Objekte
 Komponentenbasierter View-Aufbau
 Behaviour Interfaces
 Rendering und Semantik sind getrennt
 Request-Lebenszyklus
 HTML Seite

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 6


Design Prinzipien hinter JSF: 2.0

 Basis Prinzipien
 Evolution nicht Revolution
 Rails, and all that it stands for
 Simplicity
 Focus: CRUD
 Convention over confguration
 Maximize “fow state” (Mihály Csíkszentmihályi)
 Rich Internet Applications
 Ajax
 Interactivity
 Benefts of Scripting
 Web apps that do not suck

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 7


Lebenszyklus bei der Request-Verarbeitung

 Der Lebenszyklus
 Änderungen an den Phasen
 Erweiterungen
 View Scope
 Flash Scope
 FacesContext.AttributeMap
 Resource-Handling
 View Parameters
 Anpassungen an der Ereignisverarbeitung
 API-Änderungen

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 8


Lebenszyklus bei der Request-Verarbeitung

 Phasen des Lebenszyklus


 Restore View
 Apply Request Values
 Process Validations
 Update Model Values
 Invoke Application
 Render Response

 Alle Phasen teilen sich den FacesContext

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 9


Lebenszyklus bei der Request-Verarbeitung

 S. 66 Spec

 Beispiel: PhaseListener
 Übung: Button einfügen und klicken

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 10


Der Lebenszyklus

 Restore View
 Character-Encoding für Request setzen
 Für Benutzer gespeicherter Knotenbaum oder neuer
 FacesContext.UIViewRoot
 Locale an UIViewRoot setzen
 Bei neuem Baum direkt zur Render Response Phase
 Ausnahme:View Parameter (später erklärt)
 Vorher noch PostAddToView-Events auslösen

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 11


Der Lebenszyklus

 Apply Request Values


 Komponentenbaum mit Werten füllen (Request, Header, Cookies)
 Komponenten prüfen über PartialViewContext.isAjaxRequest() ob ein
„partial request“ vorliegt (ResponseWriter für „text/xml“)
 ViewParameter für Binding von Request-Parameter (Tag f:viewParam)
 Renderer entscheiden über die konkreten Werte
 Verantwortlich für die Renderer sind ViewHandler
 Ein ActionEvent wird evtl. generiert und gequeued
 Von Komponenten die ActionSource implementieren
 EditableValueHolder können bereits Validierung/Konvertierung
vornehmen
 Konvertierungsfehler werden wie Validierungsfehler behandelt

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 12


Der Lebenszyklus

 Process Validations
 Prüfung aller Werte aus Request
 Validatoren und die Komponenten selbst prüfen (Bean Validation)
 Komponenten prüfen über PartialViewContext.isAjaxRequest() ob ein
„partial request“ vorliegt
 Bei Fehler Invalide-Markierung und Message
 Am Ende bei Fehler direkt zur Render Response Phase
 Update Model Values
 Prüfung der syntaktischen und semantischen Korrektheit abgeschlossen
 Werte per Value-Bindings von Komponentenbaum in Modell
 Komponenten prüfen über PartialViewContext.isAjaxRequest() ob ein
„partial request“ vorliegt

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 13


Der Lebenszyklus

 Invoke Application
 Datenmodell ist aktualisiert
 ActionEvent wird ausgelöst
 I.d.R. wird per Method-Binding eine Methode gerufen
 Render Response
 Anwendung liefert „Outcome“
 Outcome wird per Navigationsregeln ausgewertet
 Implizite Navigation möglich
 Bei Fehlern wird der View des ursprünglichen Requests gerendert
 Aktueller Zustand des Komponentenbaumes wird gespeichert
 Bei „partial request“ wird nichts außerhalb „f:view“ gerendert

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 14


Erweiterungen

 Resource Handling (S. 66 Spec)

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 15


SimpleLifecycle

 Beispiel: SimpleLifecycle von Seite zu Seite


 Übung: Füge zwei weitere Knöpfe hinzu
 Einer per impliziter Navigation, der andere regelbasiert
 Back-Button von Next-Seite zur Index-Seite
 Clear-Button von Next-Seite zu einer neuen Seite

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 16


Erweiterungen

 Flash Scope
 Attribute des neuen Scopes bis zum nächsten Request gültig
 Dahinter stecken zwei Maps (current, next)
 Render Phase: Zugriffe in next-Map
 Sonst Zugriffe in current-Map
 Verlängerung über FacesContext.getFlash().keep(...)
 EL: #{fash.attrName}, #{fash.now} (etwas direkt nutzen)
 Funktioniert mit Redirect und kann Messages speichern
 Ähnlich wie bei Ruby on Rails

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 17


Erweiterungen

 View Scope
 Attribute dieses neuen Scopes gültig bis View vom User verlassen wird
 Kein Missbrauch von Request/Session
 EL: #{viewScope.attrName}
 Code: UIViewRoot.getViewMap()
 ManagedBeans können in View Scope deklariered werden
 Zwei neue Events
 ViewMapCreatedEvent
 ViewMapDestroyedEvent (wenn Map geleert wird)

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 18


Erweiterungen

 FacesContext-AttributesMap
 Maßnahme zur Performanzoptimierung
 Gedacht für JSF-Implementierungen oder Komponentenbibliotheken
 Teilweise wurden per-Request-Zustandsinformationen in RequestScope
gehalten
 Problematisch, da RequestScope-Updates Events triggern
 (benötigt für Verwaltung der ManagedBeans in RequestScope)
 API: FacesContext.getAttributes()

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 19


NewScopes

 Beispiel: Flash Scope


 Übung: Erweitere das Beispiel um
 View Scope auf index.xhtml und fash2.xhtml
 ComponentSystemEventListener für
 ViewMapCreatedEvent
 ViewMapDestroyedEvent

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 20


Erweiterungen

 View Parameter
 Für Binding von Request-Parametern
 Beispiel: NewsReader
 Übung: Einfach mal anschauen... und verstehen ;-)

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 21


Anpassungen an Ereignisverarbeitung

 API-Änderungen
 javax.faces.component.UIComponent:
 public void subscribeToEvent(...)
 public void unsubscribeFromEvent(...)
 public List<SystemEventListener> getListenersForEventClass(...)
 javax.faces.application.Application
 public void subscribeToEvent(...)
 public void unsubscribeFromEvent(...)
 public void publishEvent(...)
 Annotations (ListenerFor)
 Faces-Confg Subscription
 Tag: f:event

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 22


Anpassungen an Ereignisverarbeitung

 Beispiel: SystemEvent
 Übung:
 Fügen Sie einen „Refresh“-Button ein
 Nutzung der ListenerFor-Annotation für PostAddToViewEvent

 Beispiel: <f:event/> in ViewParameter-Beispiel

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 23


Entwicklung einer Facelet-Seite

 JSF 2.0 nutzt Facelets als Page Declaration Language


 Expression Language
 Beliebige Methoden ausführen
 action=“#{trader.order('order123')}“
 BEISPIELE: „component“ und „compositeComponent“ implizite Objecte

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 24


Entwicklung einer Facelet-Seite
<body>
<h:panelGrid id="out1" value="ignore">
<c:if test="#{component.id eq 'out1'}">
<h:panelGrid id="out2"><br />
<c:if test="#{component.id eq 'out2'}">
<h:outputText style="color:blue"
value="PASSED"/><br />
</c:if>
</h:panelGrid>
</c:if>
<c:if test="#{component.id eq 'out1'}">
<h:outputText style="color:yellow"
value="PASSED"/><br />
</c:if>
</h:panelGrid>
</body>

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 25


Entwicklung einer Facelet-Seite

 JSF 2.0 nutzt Facelets als Page Declaration Language


 Templating
 Facelets Essentials: ISBN13 978-1-4302-1049-8
 Neue Tags
 h:head, h:body, h:outputScript, h:outputStylesheet, h:link, h:button
 Composite Components
 True Abstraction
 interface/implemementation

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 26


Entwicklung einer Facelet-Seite

 Beispiel: CompositeComponent

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 27


Konfiguration

 Annotationen
 weniger Konfguration in Dateien
 Navigation
 implizite Navigation
 Falls Wartbarkeit notwendig: besser Rule based
 Project Stage
 web.xml und JNDI

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 28


Annotation

 ManagedBean
 ManagedProperty- und Scope-Annotationen
 FacesConverter
 FacesValidator
 FacesComponent
 FacesRenderer
 ResourceDependendy/ResourceDependencies
 ListenerFor
 ListenersFor

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 29


Navigation

 Rule based
 Implizite Navigation
 Suche nach einer passenden View, falls keine Regel für einen „Outcome“
 action=“nextPage“ => nextPage.xhtml
 action=“nextPage.xhtml“ => nextPage.xhtml
 Client redirect mit „nextPage?faces-redirect=true“
 Oder „nextPage?faces-redirect=true&includeViewParams=true“

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 30


Konfiguration

 Project Stage
 Ähnlich wie Ruby on Rails RAILS_ENV
 Gibt den momentanen Stage Level des Projektes an
 Kann per web.xml oder JNDI konfguriert werden

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 31


Project Stage: web.xml

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 32


Project Stage: Werte

 javax.faces.application.ProjectStage (enum) hat folgende Werte


 Production
 Development
 Tag <h:messages/> wird automatisch hinzugefügt
 UnitTest
 SystemTest
 Extension
 Ermöglicht beliebige Werte in der Konfguration

 Wert abfragen: Application.getProjectStage()


 Bei Extension: Application.getProjectStage().toString()

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 33


Project Stage: JNDI

 Application.getProjectStage() prüft zuerst JNDI-Kontext


 Danach Init-Parameter
 Default ansonsten Production
 JNDI-Kontext ist im lokalen Komponentenkontext
 java:comp/env/jsf/ProjectStage

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 34


Project Stage: JNDI mit Mojarra und Glassfish

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 35


Project Stage: JNDI mit Mojarra und Glassfish

 web.xml

<resource-ref>
<res-ref-name>jsf/ProjectStage</res-ref-name>
<res-type>java.lang.String</res-type>
</resource-ref>

 sun.web.xml
<resource-ref>
<res-ref-name>jsf/ProjectStage</res-ref-name>
<jndi-name>javax.faces.PROJECT_STAGE</jndi-name>
</resource-ref>

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 36


Project Stage

 Übung:
 Erstellen Sie ein Projekt mit einer Faces-Seite
 Das Projekt nutzt den ProjectStage
 Die Seite hat unterschiedliches Aussehen, je nach ProjectStage
 z.B. mit „rendered“-Attribut oder per Code

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 37


Ajax

 Was ist Ajax?


 Asynchronous JavaScript and XMLHTTPRequest
 Programmiertechnik, Stil
 Warum Ajax?
 My Boss told me to
 Besseres UI-Feeling
 Erscheint eher als Desktop-Applikation

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 38


The Importance of the Lifecycle

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 39


Views and Partial Views

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 40


Views and Partial Views

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 41


Ajax

 Partial Traversal
 <f:ajax> tag
 Beispiel: ajax-request
 jsf.js Standard JavaScript-Datei
 Enthält Standard JavaScript-Methoden

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 42


Ressourcen

 Resource-Handling
 Pfad mit Bibliothek-Name und -Version
 Versionierung
 ResourceHandler Java API
 EL und Ressourcen
 Neue Tags outputScript, outputStylesheet
 Abhängigkeiten von Ressourcen
 Resource dependencies (Annotations)

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 43


Ressourcen

 Liegen in folgenden Verzeichnissen:


 /META-INF/resources (Ressourcen im Classpath)
 /resources
 Ressourcen in Webapp, wichtig z.B. um Bugs im Classpath zu beheben
 Pfade:
 [localePrefx/][libraryName/][libraryVersion/] resourceName
 LocalePrefx
 Gruppierung von Ressourcen über libraryName
 Versionierung der Library: x_y_z
 Kann beliebig fortgesetzt werden
 Ressourcen können zur Laufzeit aktualisiert werden

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 44


Ressourcen

 resourceName
 Besteht aus Verzeichnis, Datei und Ressourcenversion
 /META-INF/resource/libName/2_1/script/myScript.js/1_1.js
 Versionierte Ressource hat Versionsnummer als Dateiname sowie
optional die Endung

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 45


Ressourcen Java API

 javax.faces.application.Resource
 Repräsentation einer Ressource wie Bild oder Stylesheet mit Metadaten
 Resource.getRequestPath() liefert einen Pfad, über den das
FaceletServlet die Resource ausliefert
 Hilft z.B. einem Renderer der ein Image-Tag schreibt
 javax.faces.application.ResourceHandler
 Erzeugt Resource-Instanzen und liefert Ressourcen aus
 FacesServlet fragt ResourceHandler, ob ein Request eine Resource
anfragt („/javax.faces.resource“ in URI)

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 46


Diagram

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 47


Ressourcen API

<img src=“contextRoot/javax.faces.resource/resourceName
[?ln=libraryName][&loc=localePrefix][&v=version]“/>

 ResourceHandler fragt Resource nach Aktualisierung, sonst 304 an


User-Agent
 Mojarra cached im ProjectStage Production Metadaten von
Ressourcen
 In Development werden die Pfade jeweils neu berechnet und die
Ressource gesucht

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 48


Ressourcen EL

 #{resource['resourceName']}

 #{resource['libraryName:resourceName']}

 <a href=“#{resource['mathema.jpg']}“/>

 <h:graphicImage value=“#{resource['lib:mathema.jpg]}“/>

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 49


Neue Tags

 h:head, h:body
 Benötigt um sie als Targets für die anderen angeben zu können
 h:outputScript, h:outputStylesheet
 Laden ein Skript/Stylesheet als Ressource und binden sie ein
 Erlaubt Ressourcen an bestimmte Stellen zu platzieren
 In Verbindung mit ResourceDependency-Annotation versteckt es
Ressourcen-Abhängigkeiten vor dem Page Author
 Standard-Platzierung
 Stylesheet in Head (immer, auch bei abweichendem Target)
 Skript Inline

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 50


Neue Tags

<!DOCTYPE html
PUBLIC "...">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head id="head">
<title>resourceRelocation</title>
</h:head>
<h:body id="body">
<h:form id="form">
<h:outputScript name="simple.js"
target="#{param.location}"/>
<h:outputText value="Hello"/>
<h:outputStylesheet name="simple.css"
target="#{param.location}"/>
</h:form>
</h:body>
</html>

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 51


ResourceDependencies und Target

@ResourceDependencies({

@ResourceDependency(name="style.css",library="mathema"),
@ResourceDependency
(name="menu.js",library="sourceknights",target="head")})

public class MyMenu extends UIComponentBase {


.
.
.
}

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 52


Funktionsweise

 Die Komponente MyMenu wird angelegt


 MyMenu wird als Child dem Komponentenbaum hinzugefügt
 ResourceDependencies von MyMenu werden verarbeitet
 UIOutput-Instanz wird erzeugt pro ResourceDependency
 Metadaten aus Attributen werden gesetzt
 ResourceHandler wird nach Renderer für Resource gefragt
 Renderer wird für UIOutput-Instanz gesetzt
 UIViewRoot.addComponentResource() wird aufgerufen
 Mit UIOutput-Instanz und Target
 Bei der Rendering-Phase werden diese dann mitgerendert

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 53


Funktionsweise bei den Tags

 Da h:outputScript / h:outputStylesheet nicht über die Annotationen


gelöst werden, hier ein Event-basierter Mechanismus
@ListenerFor(systemEventClass=PostAddToViewEvent.class,
sourceClass=UIOutput.class)
public class ScriptRenderer extends Renderer implements
ComponentSystemEventListener {
...
public void processEvent(ComponentSystemEvent event)
throws AbortProcessingException {
UIComponent c = event.getComponent();
FacesContext context = FacesContext.getCurrentInstance();
String target = (String) c.getAttributes().get("target");
if (target != null) {
context.getViewRoot().
addComponentResource(context, component, target);
}
}
...
}

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 54


Fragen?

Vielen Dank!

ed.burns@sun.com
oliver.szymanski@mathema.de

Facelifting – Ed Burns, Oliver Szymanski Copyright © 2009 MATHEMA Software GmbH 55