JSF-Klassen: typischer GUI-Aufbaumit...

Komponentenbasierte Software-

Entwicklung

Prof. Dr.

Stephan Kleuker

316

JSF-Klassen: typischer GUI-Aufbau mit Events

• Hierarchische Baumstruktur der Komponenten, z. B.

– Intern: Wurzel des Komponentenbaums, Container

– <h:form> Formular, benötigt zum Daten verschicken

– <h:panelGrid> Container mit Tabellendarstellung

• public abstract class public abstract class public abstract class public abstract class UIComponentUIComponentUIComponentUIComponent extends Object implements extends Object implements extends Object implements extends Object implements StateHolderStateHolderStateHolderStateHolder: UIComponent is the base class for all user interface components in JavaServer Faces. The set of UIComponent instances associated with a particular request and response are organized into a component tree under a UIViewRoot that represents the entire content of the request or response. (Sun Klassendoku)

• publicpublicpublicpublic abstractabstractabstractabstract classclassclassclass UIComponentBaseUIComponentBaseUIComponentBaseUIComponentBase extendsextendsextendsextends UIComponentUIComponentUIComponentUIComponent

• publicpublicpublicpublic classclassclassclass UICommandUICommandUICommandUICommand extendsextendsextendsextends UIComponentBaseUIComponentBaseUIComponentBaseUIComponentBase implementsimplementsimplementsimplementsActionSource2ActionSource2ActionSource2ActionSource2

• public class public class public class public class UIOutputUIOutputUIOutputUIOutput extends extends extends extends UIComponentBaseUIComponentBaseUIComponentBaseUIComponentBase implements implements implements implements ValueHolderValueHolderValueHolderValueHolder


Entwicklung

Prof. Dr.

Stephan Kleuker

317

Analyse von FacesContext (1/4)

<<<<h:formh:formh:formh:form id="f1">id="f1">id="f1">id="f1"><<<<h:messagesh:messagesh:messagesh:messages id="m1" id="m1" id="m1" id="m1" globalOnly="trueglobalOnly="trueglobalOnly="trueglobalOnly="true"/>"/>"/>"/><<<<h:panelGridh:panelGridh:panelGridh:panelGrid id="p1" columns="3" >id="p1" columns="3" >id="p1" columns="3" >id="p1" columns="3" ><<<<h:outputLabelh:outputLabelh:outputLabelh:outputLabel id="o1" id="o1" id="o1" id="o1" for="mnamefor="mnamefor="mnamefor="mname" " " " value="Modulnamevalue="Modulnamevalue="Modulnamevalue="Modulname "/>"/>"/>"/><<<<h:inputTexth:inputTexth:inputTexth:inputText id="mnameid="mnameid="mnameid="mname" " " " value="#{module.modul.namevalue="#{module.modul.namevalue="#{module.modul.namevalue="#{module.modul.name}"/>}"/>}"/>}"/><<<<h:messageh:messageh:messageh:message id="m2" id="m2" id="m2" id="m2" for="mnamefor="mnamefor="mnamefor="mname" />" />" />" /><<<<h:outputLabelh:outputLabelh:outputLabelh:outputLabel id="o2" id="o2" id="o2" id="o2" for="mnrfor="mnrfor="mnrfor="mnr" " " " value="Modulnummervalue="Modulnummervalue="Modulnummervalue="Modulnummer "/>"/>"/>"/><<<<h:inputTexth:inputTexth:inputTexth:inputText id="mnrid="mnrid="mnrid="mnr" " " " value="#{module.modul.nrvalue="#{module.modul.nrvalue="#{module.modul.nrvalue="#{module.modul.nr}"/>}"/>}"/>}"/><<<<h:messageh:messageh:messageh:message id="m3" id="m3" id="m3" id="m3" for="mnrfor="mnrfor="mnrfor="mnr"/>"/>"/>"/><<<<h:commandButtonh:commandButtonh:commandButtonh:commandButton id="c1" id="c1" id="c1" id="c1" value="Abschickenvalue="Abschickenvalue="Abschickenvalue="Abschicken" " " "

action="#{module.uebernehmenaction="#{module.uebernehmenaction="#{module.uebernehmenaction="#{module.uebernehmen}"/>}"/>}"/>}"/></</</</h:panelGridh:panelGridh:panelGridh:panelGrid>>>><<<<h:commandLinkh:commandLinkh:commandLinkh:commandLink id="anzid="anzid="anzid="anz" " " " action="#{module.anzeigenaction="#{module.anzeigenaction="#{module.anzeigenaction="#{module.anzeigen}" >}" >}" >}" ><<<<h:outputTexth:outputTexth:outputTexth:outputText value="Zurvalue="Zurvalue="Zurvalue="Zur ModulModulModulModulüüüübersicht"/>bersicht"/>bersicht"/>bersicht"/>

</</</</h:commandLink><brh:commandLink><brh:commandLink><brh:commandLink><br/>/>/>/><<<<h:commandLinkh:commandLinkh:commandLinkh:commandLink id="internid="internid="internid="intern" " " "

action="#{module.internaction="#{module.internaction="#{module.internaction="#{module.intern}" >}" >}" >}" ><<<<h:outputTexth:outputTexth:outputTexth:outputText value="JSFAufbauinfosvalue="JSFAufbauinfosvalue="JSFAufbauinfosvalue="JSFAufbauinfos"/>"/>"/>"/>

</</</</h:commandLinkh:commandLinkh:commandLinkh:commandLink>>>></</</</h:formh:formh:formh:form>>>>


Entwicklung

Prof. Dr.

Stephan Kleuker

318


private private private private voidvoidvoidvoid baum(UIComponentbaum(UIComponentbaum(UIComponentbaum(UIComponent ui, String leer) {ui, String leer) {ui, String leer) {ui, String leer) {System.out.println(leerSystem.out.println(leerSystem.out.println(leerSystem.out.println(leer + + + + ui.getIdui.getIdui.getIdui.getId() + ": " () + ": " () + ": " () + ": "

+ + + + ui.getRendererTypeui.getRendererTypeui.getRendererTypeui.getRendererType() +" : "() +" : "() +" : "() +" : "+ + + + ui.getClassui.getClassui.getClassui.getClass());());());());

List<UIComponentList<UIComponentList<UIComponentList<UIComponent> > > > comcomcomcom = = = = ui.getChildrenui.getChildrenui.getChildrenui.getChildren();();();();forforforfor ((((UIComponentUIComponentUIComponentUIComponent u : u : u : u : comcomcomcom) {) {) {) {baum(ubaum(ubaum(ubaum(u, leer + " ");, leer + " ");, leer + " ");, leer + " ");

}}}}}}}}

publicpublicpublicpublic String intern() {String intern() {String intern() {String intern() {FacesContextFacesContextFacesContextFacesContext ctxtctxtctxtctxt = = = = FacesContext.getCurrentInstanceFacesContext.getCurrentInstanceFacesContext.getCurrentInstanceFacesContext.getCurrentInstance();();();();UIViewRootUIViewRootUIViewRootUIViewRoot vrvrvrvr = = = = ctxt.getViewRootctxt.getViewRootctxt.getViewRootctxt.getViewRoot();();();();ifififif ((((vrvrvrvr != null) {!= null) {!= null) {!= null) {System.out.println("RootSystem.out.println("RootSystem.out.println("RootSystem.out.println("Root:" + :" + :" + :" + vr.getViewIdvr.getViewIdvr.getViewIdvr.getViewId());());());());baum(vrbaum(vrbaum(vrbaum(vr, " ");, " ");, " ");, " ");

} } } } elseelseelseelseSystem.out.println("keineSystem.out.println("keineSystem.out.println("keineSystem.out.println("keine RootRootRootRoot");");");");

returnreturnreturnreturn ANZEIGEN;ANZEIGEN;ANZEIGEN;ANZEIGEN;}}}}


Entwicklung

Prof. Dr.

Stephan Kleuker

319


INFO: Root:/index.xhtmlINFO: j_id1: null : class javax.faces.component.UIViewRootINFO: j_idt2: null : class com.sun.faces.facelets.compiler.UIInstructionsINFO: j_idt3: null : class com.sun.faces.facelets.compiler.UIInstructionsINFO: j_idt4: javax.faces.Head : class javax.faces.component.UIOutputINFO: j_idt5: null : class com.sun.faces.facelets.compiler.UIInstructionsINFO: j_idt6: javax.faces.Body : class javax.faces.component.UIOutputINFO: f1: javax.faces.Form : class javax.faces.component.html.HtmlFormINFO: j_idt7: javax.faces.Messages : class javax.faces.component.html.HtmlMessagesINFO: j_idt8: javax.faces.Grid : class javax.faces.component.html.HtmlPanelGridINFO: j_idt9: javax.faces.Label : class javax.faces.component.html.HtmlOutputLabelINFO: mname: javax.faces.Text : class javax.faces.component.html.HtmlInputTextINFO: j_idt10: javax.faces.Message : class javax.faces.component.html.HtmlMessageINFO: j_idt11: javax.faces.Label : class javax.faces.component.html.HtmlOutputLabelINFO: mnr: javax.faces.Text : class javax.faces.component.html.HtmlInputTextINFO: j_idt12: javax.faces.Message : class javax.faces.component.html.HtmlMessageINFO: j_idt13: javax.faces.Button : class javax.faces.component.html.HtmlCommandButtonINFO: j_idt14: javax.faces.Link : class javax.faces.component.html.HtmlCommandLinkINFO: j_idt15: javax.faces.Text : class javax.faces.component.html.HtmlOutputTextINFO: j_idt16: null : class com.sun.faces.facelets.compiler.UIInstructionsINFO: intern: javax.faces.Link : class javax.faces.component.html.HtmlCommandLinkINFO: j_idt17: javax.faces.Text : class javax.faces.component.html.HtmlOutputTextINFO: j_idt18: null : class com.sun.faces.facelets.compiler.UIInstructionsGrundregel: Layout bleibt statisch; Ein- und Ausblenden durch Attribut rendered


Entwicklung

Prof. Dr.

Stephan Kleuker

320

Analyse von FacesContext (4/4) - Komponentenbaum

UIViewRoot

HtmlMessages

HtmlForm

HtmlPanelGrid

HtmlOutputLabel

HtmlInputText

HtmlMessage

HtmlOutputLabel

HtmlInputText

HtmlMessage

HtmlCommandButton

HtmlCommandLink

HtmlOutputText

HtmlCommandLink

HtmlOutputText


Entwicklung

Prof. Dr.

Stephan Kleuker

321

Speichern der Zustandsinformationen (1/2)

• Klassische GUI-Komponenten (und Event-Listener) sind

zustandsbasiert; HTTP nicht

• Zustand muss gesichert werden (wie wird in Deployment

Descriptor beschrieben)

– Variante A: auf dem Server (Zuordnung z. B. über Cookies)

• empfohlen; nicht default bei Netbeans

• hohe Speicheranforderung

– Variante B: beim Client

<<<<contextcontextcontextcontext----paramparamparamparam>>>>

<<<<paramparamparamparam----name>javax.faces.STATE_SAVING_METHOD</paramname>javax.faces.STATE_SAVING_METHOD</paramname>javax.faces.STATE_SAVING_METHOD</paramname>javax.faces.STATE_SAVING_METHOD</param----namenamenamename>>>>

<<<<paramparamparamparam----value>client</paramvalue>client</paramvalue>client</paramvalue>client</param----valuevaluevaluevalue>>>>

</</</</contextcontextcontextcontext----paramparamparamparam>>>>

• anzuzeigende Seite enthält Zustand in hidden Field


Entwicklung

Prof. Dr.

Stephan Kleuker

322

Speichern der Zustandsinformationen (2/2)

Seitenende in generiertem HTML (Ausschnitt):<a id="f1:intern" <a id="f1:intern" <a id="f1:intern" <a id="f1:intern" hrefhrefhrefhref="#" ="#" ="#" ="#" onclick="if(typeofonclick="if(typeofonclick="if(typeofonclick="if(typeof jsfcljsjsfcljsjsfcljsjsfcljs == == == == 'function'){jsfcljs(document.forms['f1'],'f1:intern,'function'){jsfcljs(document.forms['f1'],'f1:intern,'function'){jsfcljs(document.forms['f1'],'f1:intern,'function'){jsfcljs(document.forms['f1'],'f1:intern,f1:intern','');}return f1:intern','');}return f1:intern','');}return f1:intern','');}return false">JSFAufbauinfos</afalse">JSFAufbauinfos</afalse">JSFAufbauinfos</afalse">JSFAufbauinfos</a>>>>

<<<<inputinputinputinput type="hiddentype="hiddentype="hiddentype="hidden" " " " name="javax.faces.ViewStatename="javax.faces.ViewStatename="javax.faces.ViewStatename="javax.faces.ViewState" " " " id="javax.faces.ViewStateid="javax.faces.ViewStateid="javax.faces.ViewStateid="javax.faces.ViewState" " " " value="H4sIAAAAAAAAANVXW2wUVRg+O9s7FXrhGlNaAiIYu2W7i0HQSIFvalue="H4sIAAAAAAAAANVXW2wUVRg+O9s7FXrhGlNaAiIYu2W7i0HQSIFvalue="H4sIAAAAAAAAANVXW2wUVRg+O9s7FXrhGlNaAiIYu2W7i0HQSIFvalue="H4sIAAAAAAAAANVXW2wUVRg+O9s7FXrhGlNaAiIYu2W7i0HQSIFeFndb0i1F4KGcnT3bnTI3Z850BogEHtREEqNBEk0wavDBB3hRn4jxEh6MeFndb0i1F4KGcnT3bnTI3Z850BogEHtREEqNBEk0wavDBB3hRn4jxEh6MeFndb0i1F4KGcnT3bnTI3Z850BogEHtREEqNBEk0wavDBB3hRn4jxEh6MeFndb0i1F4KGcnT3bnTI3Z850BogEHtREEqNBEk0wavDBB3hRn4jxEh6MJJhI4ouJCTEmxsRLYkxQH9Tzn9mZnd2dbSliopNmembm/875/tt3zl7+EJJhI4ouJCTEmxsRLYkxQH9Tzn9mZnd2dbSliopNmembm/875/tt3zl7+EJJhI4ouJCTEmxsRLYkxQH9Tzn9mZnd2dbSliopNmembm/875/tt3zl7+EJJhI4ouJCTEmxsRLYkxQH9Tzn9mZnd2dbSliopNmembm/875/tt3zl7+EVaBuo+mp7D8zgmY3U2NpGbIyLd9dLnT73RYW6VBYQcHSG0wjRQQtSUmGmVaBuo+mp7D8zgmY3U2NpGbIyLd9dLnT73RYW6VBYQcHSG0wjRQQtSUmGmVaBuo+mp7D8zgmY3U2NpGbIyLd9dLnT73RYW6VBYQcHSG0wjRQQtSUmGmVaBuo+mp7D8zgmY3U2NpGbIyLd9dLnT73RYW6VBYQcHSG0wjRQQtSUmGmsQIWiRnDui5LIqaSpsayFFOSwSqeJUZK0eVNUwYh41qe/Fq4+uGVbaMftsQIWiRnDui5LIqaSpsayFFOSwSqeJUZK0eVNUwYh41qe/Fq4+uGVbaMftsQIWiRnDui5LIqaSpsayFFOSwSqeJUZK0eVNUwYh41qe/Fq4+uGVbaMftsQIWiRnDui5LIqaSpsayFFOSwSqeJUZK0eVNUwYh41qe/Fq4+uGVbaMftcM8dhzB1QerOaVZ2Jy6phKVxg6mpiViT2oaRa1zM1Ke/cWTjvk0Oo0Eu5cM8dhzB1QerOaVZ2Jy6phKVxg6mpiViT2oaRa1zM1Ke/cWTjvk0Oo0Eu5cM8dhzB1QerOaVZ2Jy6phKVxg6mpiViT2oaRa1zM1Ke/cWTjvk0Oo0Eu5cM8dhzB1QerOaVZ2Jy6phKVxg6mpiViT2oaRa1zM1Ke/cWTjvk0Oo0Eu5crjvbjgkk44FU8Al+KOW8oi1eicXBItKbBZsFjNYz+6pNrq499EU=" />crjvbjgkk44FU8Al+KOW8oi1eicXBItKbBZsFjNYz+6pNrq499EU=" />crjvbjgkk44FU8Al+KOW8oi1eicXBItKbBZsFjNYz+6pNrq499EU=" />crjvbjgkk44FU8Al+KOW8oi1eicXBItKbBZsFjNYz+6pNrq499EU=" /></form></form></form></form>

</</</</bodybodybodybody>>>></</</</htmlhtmlhtmlhtml>>>>


Entwicklung

Prof. Dr.

Stephan Kleuker

323

Hintergrund: Abarbeitung von JSF-Anfragen


Entwicklung

Prof. Dr.

Stephan Kleuker

324

Restore View

Komponentenbaum (wieder-)herstellen

• basiert auf nicht sichtbarer Wurzelkomponente

• Komponentenbaum in FacesContext gespeichert

• erster Aufruf:

– JSF-Seite rendern, nicht anzeigen

– ID-Vergabe und damit Aufbau der internen Struktur

– Registrieren von Event-Listenern und Validatoren

– Werte in Komponenten eintragen

• sonst: zugehörigen Komponentenbaum suchen, bzw. wieder

aufbauen (beinhaltet auch Eventlistener, Konvertierer und

Backing-Beans)


Entwicklung

Prof. Dr.

Stephan Kleuker

325

Apply Request Values

UI-Komponenten mit Anfrageparameten aktualisieren

• Request-Parameter auslesen (einschließlich JSF 1.2 nur

POST)

• POST-String parsen und filtern

• Werte dann UI-Komponenten zuordnen (noch nicht prüfen)

• nutzt Methode processDecodes() für alle Komponenten

• falls Attribut immediate=„true“, dann (gleich genauer)

– für Aktionselemente (Command): konvertieren und

validieren überspringen

– für Eingabeelemente (Imput): sofort konvertieren und

validieren


Entwicklung

Prof. Dr.

Stephan Kleuker

326

Process Validations

Werte konvertieren und validieren

• Jede UI-Komponente validiert und konvertiert den

zugeordneten Wert

• nutzt Methode processValidators() der Komponenten

• automatische Konvertierung für viele Typen; Konvertierer

selbst erstellbar (ähnlich zu Validierer)

• bei Fehler Fehlermeldung in Fehlerliste eintragen und

Modellaktualisierung überspringen; zur Ausgabe

• bei Wertänderung: ValueChangeEvent

• Anmerkung: Werte noch nicht in Beans


Entwicklung

Prof. Dr.

Stephan Kleuker

327

Update Model Values

Werte im Modell (Beans) aktualisieren

• Typsicherheit durch vorherige Schritte garantiert

• nutzte Methode processUpdates() der Komponenten

• Werte aktualisieren, durch set-Methoden

• Abbruch bei Fehler


Entwicklung

Prof. Dr.

Stephan Kleuker

328

Invoke Applications

Anwendung ausführen

• an das Ereignis gebundene Aktion ausführen, z. B. Action-

Methode

• nutzt Methode processApplication() der Komponenten

• arbeitet mit vorher aktualisierten Werten


Entwicklung

Prof. Dr.

Stephan Kleuker

329

Render Response

• Rendern durch Spezifikation nicht festgelegt

• Antwort generieren

• aktuellen Stand des zugehörigen Komponentenbaums

ausgeben

• rekursiver Baumdurchlauf; jeweils Renderer aufrufen

(HTML, XTHML, XUL, ...)

• jede Komponente hat Methode der Form encodeXXX()

• Abspeichern des Komponentenbaums

• generierte Seite an Server übergeben, der sie

typischerweise an den Browser schickt


Entwicklung

Prof. Dr.

Stephan Kleuker

330

JSF-Lifecycle verfolgen (1/8)

• Man kann PhaseListener schreiben, die über

Phasenänderungen informiert werden

• wird in faces-config.xml festgehalten

<?<?<?<?xmlxmlxmlxml version='1.0' encoding='UTFversion='1.0' encoding='UTFversion='1.0' encoding='UTFversion='1.0' encoding='UTF----8'?>8'?>8'?>8'?>

<<<<facesfacesfacesfaces----configconfigconfigconfig version="2.0"version="2.0"version="2.0"version="2.0"

xmlns="http://java.sun.com/xml/ns/javaeexmlns="http://java.sun.com/xml/ns/javaeexmlns="http://java.sun.com/xml/ns/javaeexmlns="http://java.sun.com/xml/ns/javaee" " " "

xmlns:xsi="http://www.w3.org/2001/XMLSchemaxmlns:xsi="http://www.w3.org/2001/XMLSchemaxmlns:xsi="http://www.w3.org/2001/XMLSchemaxmlns:xsi="http://www.w3.org/2001/XMLSchema----instance" instance" instance" instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaeexsi:schemaLocation="http://java.sun.com/xml/ns/javaeexsi:schemaLocation="http://java.sun.com/xml/ns/javaeexsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/webhttp://java.sun.com/xml/ns/javaee/webhttp://java.sun.com/xml/ns/javaee/webhttp://java.sun.com/xml/ns/javaee/web----facesconfig_2_0.xsd">facesconfig_2_0.xsd">facesconfig_2_0.xsd">facesconfig_2_0.xsd">

<<<<lifecyclelifecyclelifecyclelifecycle>>>>

<<<<phasephasephasephase----listener>controller.ZeichPhasen</phaselistener>controller.ZeichPhasen</phaselistener>controller.ZeichPhasen</phaselistener>controller.ZeichPhasen</phase----listenerlistenerlistenerlistener>>>>

</</</</lifecyclelifecyclelifecyclelifecycle>>>>

</</</</facesfacesfacesfaces----configconfigconfigconfig>>>>


Entwicklung

Prof. Dr.

Stephan Kleuker

331

JSF-Lifecycle verfolgen (2/8) - index.xhtml

<<<<h:formh:formh:formh:form id="form1">id="form1">id="form1">id="form1"><<<<h:panelGridh:panelGridh:panelGridh:panelGrid id="panel1" columns="3" id="panel1" columns="3" id="panel1" columns="3" id="panel1" columns="3" rules="allrules="allrules="allrules="all">">">">

<<<<h:outputTexth:outputTexth:outputTexth:outputText id="o1" id="o1" id="o1" id="o1" value="neuervalue="neuervalue="neuervalue="neuer Text"/>Text"/>Text"/>Text"/><<<<h:inputTexth:inputTexth:inputTexth:inputText id="i1" id="i1" id="i1" id="i1" value="#{analyse.einvalue="#{analyse.einvalue="#{analyse.einvalue="#{analyse.ein}" }" }" }"

required="truerequired="truerequired="truerequired="true"/>"/>"/>"/><<<<h:messageh:messageh:messageh:message id="m1" for="i1"/>id="m1" for="i1"/>id="m1" for="i1"/>id="m1" for="i1"/><<<<h:outputTexth:outputTexth:outputTexth:outputText id="ow1" id="ow1" id="ow1" id="ow1" value="neuevalue="neuevalue="neuevalue="neue Zahl"/>Zahl"/>Zahl"/>Zahl"/><<<<h:inputTexth:inputTexth:inputTexth:inputText id="iw1" id="iw1" id="iw1" id="iw1" value="#{analyse.zahlvalue="#{analyse.zahlvalue="#{analyse.zahlvalue="#{analyse.zahl}"/>}"/>}"/>}"/><<<<h:messageh:messageh:messageh:message id="m1w" for="iw1"/>id="m1w" for="iw1"/>id="m1w" for="iw1"/>id="m1w" for="iw1"/><<<<h:outputTexth:outputTexth:outputTexth:outputText id="o2" id="o2" id="o2" id="o2" value="altervalue="altervalue="altervalue="alter Text/Zahl"/>Text/Zahl"/>Text/Zahl"/>Text/Zahl"/><<<<h:outputTexth:outputTexth:outputTexth:outputText id="o3" id="o3" id="o3" id="o3" escape="falseescape="falseescape="falseescape="false" " " "

value="#{analyse.einvalue="#{analyse.einvalue="#{analyse.einvalue="#{analyse.ein}"/>}"/>}"/>}"/><<<<h:outputLabelh:outputLabelh:outputLabelh:outputLabel id="ow3" id="ow3" id="ow3" id="ow3" value="#{analyse.zahlvalue="#{analyse.zahlvalue="#{analyse.zahlvalue="#{analyse.zahl}"/>}"/>}"/>}"/><<<<h:commandButtonh:commandButtonh:commandButtonh:commandButton id="c1" id="c1" id="c1" id="c1" value="value="value="value="ÜÜÜÜbernehmenbernehmenbernehmenbernehmen" " " "

action="#{analyse.uebernehmenaction="#{analyse.uebernehmenaction="#{analyse.uebernehmenaction="#{analyse.uebernehmen}"/>}"/>}"/>}"/></</</</h:panelGridh:panelGridh:panelGridh:panelGrid>>>>

</</</</h:formh:formh:formh:form>>>>


Entwicklung

Prof. Dr.

Stephan Kleuker

332

JSF-Lifecycle verfolgen (3/8) - Bean

@@@@ManagedBeanManagedBeanManagedBeanManagedBean@@@@SessionScopedSessionScopedSessionScopedSessionScopedpublicpublicpublicpublic classclassclassclass Analyse Analyse Analyse Analyse implementsimplementsimplementsimplements SerializableSerializableSerializableSerializable{{{{private String ein;private String ein;private String ein;private String ein;private private private private intintintint zahl;zahl;zahl;zahl;

publicpublicpublicpublic Analyse(){}Analyse(){}Analyse(){}Analyse(){}

publicpublicpublicpublic String String String String uebernehmenuebernehmenuebernehmenuebernehmen(){(){(){(){returnreturnreturnreturn "./"./"./"./index.xhtmlindex.xhtmlindex.xhtmlindex.xhtml";";";";

}}}}

publicpublicpublicpublic String String String String getEingetEingetEingetEin() {() {() {() {returnreturnreturnreturn ein;}ein;}ein;}ein;}publicpublicpublicpublic voidvoidvoidvoid setEin(StringsetEin(StringsetEin(StringsetEin(String ein) {ein) {ein) {ein) {this.einthis.einthis.einthis.ein = ein;}= ein;}= ein;}= ein;}publicpublicpublicpublic intintintint getZahlgetZahlgetZahlgetZahl() {() {() {() {returnreturnreturnreturn zahl;}zahl;}zahl;}zahl;}publicpublicpublicpublic voidvoidvoidvoid setZahl(intsetZahl(intsetZahl(intsetZahl(int zahl) {zahl) {zahl) {zahl) {this.zahlthis.zahlthis.zahlthis.zahl = zahl;}= zahl;}= zahl;}= zahl;}

}}}}


Entwicklung

Prof. Dr.

Stephan Kleuker

333

JSF-Lifecycle verfolgen (4/8) - PhaseListener [1/2]

publicpublicpublicpublic classclassclassclass ZeichPhasenZeichPhasenZeichPhasenZeichPhasen implementsimplementsimplementsimplements PhaseListenerPhaseListenerPhaseListenerPhaseListener {{{{

// Hier angeben, in welchen Phasen dieser // Hier angeben, in welchen Phasen dieser // Hier angeben, in welchen Phasen dieser // Hier angeben, in welchen Phasen dieser ListenerListenerListenerListener genutztgenutztgenutztgenutzt// werden soll, im Beispiel in allen// werden soll, im Beispiel in allen// werden soll, im Beispiel in allen// werden soll, im Beispiel in allen@@@@OverrideOverrideOverrideOverridepublicpublicpublicpublic PhaseIdPhaseIdPhaseIdPhaseId getPhaseIdgetPhaseIdgetPhaseIdgetPhaseId() {() {() {() {returnreturnreturnreturn PhaseId.ANY_PHASEPhaseId.ANY_PHASEPhaseId.ANY_PHASEPhaseId.ANY_PHASE;;;;

}}}}

@@@@OverrideOverrideOverrideOverridepublicpublicpublicpublic voidvoidvoidvoid beforePhase(PhaseEventbeforePhase(PhaseEventbeforePhase(PhaseEventbeforePhase(PhaseEvent e) {e) {e) {e) {ifififif ((((e.getPhaseIde.getPhaseIde.getPhaseIde.getPhaseId() == () == () == () == PhaseId.RESTORE_VIEWPhaseId.RESTORE_VIEWPhaseId.RESTORE_VIEWPhaseId.RESTORE_VIEW) ) ) ) System.out.println("===gehtSystem.out.println("===gehtSystem.out.println("===gehtSystem.out.println("===geht los");los");los");los");

System.out.println("beforeSystem.out.println("beforeSystem.out.println("beforeSystem.out.println("before: " + : " + : " + : " + e.getPhaseIde.getPhaseIde.getPhaseIde.getPhaseId());());());());zeichAnalysezeichAnalysezeichAnalysezeichAnalyse();();();();

}}}}


Entwicklung

Prof. Dr.

Stephan Kleuker

334

JSF-Lifecycle verfolgen (5/8) - PhaseListener [1/2]

@@@@OverrideOverrideOverrideOverridepublicpublicpublicpublic voidvoidvoidvoid afterPhase(PhaseEventafterPhase(PhaseEventafterPhase(PhaseEventafterPhase(PhaseEvent e) {e) {e) {e) {System.out.println("afterSystem.out.println("afterSystem.out.println("afterSystem.out.println("after: " + : " + : " + : " + e.getPhaseIde.getPhaseIde.getPhaseIde.getPhaseId());());());());zeichAnalysezeichAnalysezeichAnalysezeichAnalyse();();();();ifififif ((((e.getPhaseIde.getPhaseIde.getPhaseIde.getPhaseId() == () == () == () == PhaseId.RENDER_RESPONSEPhaseId.RENDER_RESPONSEPhaseId.RENDER_RESPONSEPhaseId.RENDER_RESPONSE))))System.out.println("===isSystem.out.println("===isSystem.out.println("===isSystem.out.println("===is Schicht");Schicht");Schicht");Schicht");

}}}}

private private private private voidvoidvoidvoid zeichAnalysezeichAnalysezeichAnalysezeichAnalyse() {() {() {() {FacesContextFacesContextFacesContextFacesContext fcfcfcfc = = = = FacesContext.getCurrentInstanceFacesContext.getCurrentInstanceFacesContext.getCurrentInstanceFacesContext.getCurrentInstance();();();();Analyse a = Analyse a = Analyse a = Analyse a = fc.getApplicationfc.getApplicationfc.getApplicationfc.getApplication()()()()

....evaluateExpressionGet(fcevaluateExpressionGet(fcevaluateExpressionGet(fcevaluateExpressionGet(fc, "#{, "#{, "#{, "#{analyseanalyseanalyseanalyse}", }", }", }", Analyse.classAnalyse.classAnalyse.classAnalyse.class););););

System.out.println("ASystem.out.println("ASystem.out.println("ASystem.out.println("A: "+: "+: "+: "+a.getEina.getEina.getEina.getEin() +" :: "+ () +" :: "+ () +" :: "+ () +" :: "+ a.getZahla.getZahla.getZahla.getZahl());());());());}}}}

}}}}


Entwicklung

Prof. Dr.

Stephan Kleuker

335

JSF-Lifecycle verfolgen (6/8) - Applikationsstart

INFO: ===geht losINFO: ===geht losINFO: ===geht losINFO: ===geht los

INFO: INFO: INFO: INFO: beforebeforebeforebefore: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1

INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0

INFO: INFO: INFO: INFO: afterafterafterafter: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1


INFO: INFO: INFO: INFO: beforebeforebeforebefore: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6


INFO: INFO: INFO: INFO: afterafterafterafter: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6


INFO: ===INFO: ===INFO: ===INFO: ===isisisis SchichtSchichtSchichtSchicht

Nutzer macht EingabenNutzer macht EingabenNutzer macht EingabenNutzer macht Eingaben


Entwicklung

Prof. Dr.

Stephan Kleuker

336

JSF-Lifecycle verfolgen (7/8) - erfolgreiche ÜbernahmeINFO: ===geht losINFO: ===geht losINFO: ===geht losINFO: ===geht losINFO: INFO: INFO: INFO: beforebeforebeforebefore: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: INFO: INFO: INFO: afterafterafterafter: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: INFO: INFO: INFO: beforebeforebeforebefore: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: INFO: INFO: INFO: afterafterafterafter: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: INFO: INFO: INFO: beforebeforebeforebefore: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: INFO: INFO: INFO: afterafterafterafter: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: INFO: INFO: INFO: beforebeforebeforebefore: UPDATE_MODEL_VALUES 4: UPDATE_MODEL_VALUES 4: UPDATE_MODEL_VALUES 4: UPDATE_MODEL_VALUES 4INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: A: null :: 0INFO: INFO: INFO: INFO: afterafterafterafter: UPDATE_MODEL_VALUES 4: UPDATE_MODEL_VALUES 4: UPDATE_MODEL_VALUES 4: UPDATE_MODEL_VALUES 4INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: beforebeforebeforebefore: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: beforebeforebeforebefore: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: ===INFO: ===INFO: ===INFO: ===isisisis SchichtSchichtSchichtSchicht


Entwicklung

Prof. Dr.

Stephan Kleuker

337

JSF-Lifecycle verfolgen (8/8) - falsche EingabeINFO: ===geht losINFO: ===geht losINFO: ===geht losINFO: ===geht losINFO: INFO: INFO: INFO: beforebeforebeforebefore: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: beforebeforebeforebefore: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: beforebeforebeforebefore: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3: PROCESS_VALIDATIONS 3INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: beforebeforebeforebefore: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: ===INFO: ===INFO: ===INFO: ===isisisis SchichtSchichtSchichtSchicht


Entwicklung

Prof. Dr.

Stephan Kleuker

338

Problem: Abbrüche (1/2)in Analyse :

publicpublicpublicpublic String String String String zuruecksetzenzuruecksetzenzuruecksetzenzuruecksetzen(){(){(){(){ein="";ein="";ein="";ein="";zahl=0;zahl=0;zahl=0;zahl=0;returnreturnreturnreturn "./"./"./"./index.xhtmlindex.xhtmlindex.xhtmlindex.xhtml";";";";

}}}}

• in index.xhtml

<<<<h:commandButtonh:commandButtonh:commandButtonh:commandButton id="c2" id="c2" id="c2" id="c2" value="Zurvalue="Zurvalue="Zurvalue="Zurüüüücksetzencksetzencksetzencksetzen" " " " action="#{analyse.zuruecksetzenaction="#{analyse.zuruecksetzenaction="#{analyse.zuruecksetzenaction="#{analyse.zuruecksetzen}"/>}"/>}"/>}"/>

• Problem: Validierung läuft trotzdem


Entwicklung

Prof. Dr.

Stephan Kleuker

339

Problem: Abbrüche (2/2)

• immediate=„true“ erlaubt Validierung zu überspringen

<<<<h:commandButtonh:commandButtonh:commandButtonh:commandButton id="c2" id="c2" id="c2" id="c2" value="Zurvalue="Zurvalue="Zurvalue="Zurüüüücksetzencksetzencksetzencksetzen" " " " immediate="trueimmediate="trueimmediate="trueimmediate="true" " " " action="#{analyse.zuruecksetzenaction="#{analyse.zuruecksetzenaction="#{analyse.zuruecksetzenaction="#{analyse.zuruecksetzen}"/>}"/>}"/>}"/>

===geht los===geht los===geht los===geht losbeforebeforebeforebefore: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1A: A: A: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42afterafterafterafter: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1A: A: A: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42beforebeforebeforebefore: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2A: A: A: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42afterafterafterafter: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2A: :: 0A: :: 0A: :: 0A: :: 0beforebeforebeforebefore: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6A: :: 0A: :: 0A: :: 0A: :: 0afterafterafterafter: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6A: :: 0A: :: 0A: :: 0A: :: 0============isisisis SchichtSchichtSchichtSchicht


Entwicklung

Prof. Dr.

Stephan Kleuker

340

Nutzung von immediate für Eingabefelder

• immediate=true fordert sofortige Validierung und Konvertierung für diese Komponente

<<<<h:inputTexth:inputTexth:inputTexth:inputText id="i1" id="i1" id="i1" id="i1" value="#{analyse.einvalue="#{analyse.einvalue="#{analyse.einvalue="#{analyse.ein}" }" }" }" immediate="trueimmediate="trueimmediate="trueimmediate="true" " " " validatorMessage="nurvalidatorMessage="nurvalidatorMessage="nurvalidatorMessage="nur 3">3">3">3">

<<<<f:validateLengthf:validateLengthf:validateLengthf:validateLength maximum="3"/>maximum="3"/>maximum="3"/>maximum="3"/></</</</h:inputTexth:inputTexth:inputTexth:inputText>>>>

===geht los===geht los===geht los===geht losbeforebeforebeforebefore: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1A: null :: 0A: null :: 0A: null :: 0A: null :: 0afterafterafterafter: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1A: null :: 0A: null :: 0A: null :: 0A: null :: 0beforebeforebeforebefore: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2A: null :: 0A: null :: 0A: null :: 0A: null :: 0afterafterafterafter: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2: APPLY_REQUEST_VALUES 2A: null :: 0A: null :: 0A: null :: 0A: null :: 0beforebeforebeforebefore: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6A: null :: 0A: null :: 0A: null :: 0A: null :: 0afterafterafterafter: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6A: null :: 0A: null :: 0A: null :: 0A: null :: 0============isisisis SchichtSchichtSchichtSchicht

<Return> im Eingabefeld drücken


Entwicklung

Prof. Dr.

Stephan Kleuker

341

Eineinhalb Schleifen

public String public String public String public String uebernehmenuebernehmenuebernehmenuebernehmen(){(){(){(){return "./return "./return "./return "./index.xhtml?facesindex.xhtml?facesindex.xhtml?facesindex.xhtml?faces----redirect=true";redirect=true";redirect=true";redirect=true";

}}}}

// wie vorher// wie vorher// wie vorher// wie vorherINFO: INFO: INFO: INFO: beforebeforebeforebefore: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5: INVOKE_APPLICATION 5INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: ===geht losINFO: ===geht losINFO: ===geht losINFO: ===geht losINFO: INFO: INFO: INFO: beforebeforebeforebefore: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1: RESTORE_VIEW 1INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: beforebeforebeforebefore: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: INFO: INFO: INFO: afterafterafterafter: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6: RENDER_RESPONSE 6INFO: A: INFO: A: INFO: A: INFO: A: ZaphodZaphodZaphodZaphod :: 42:: 42:: 42:: 42INFO: ===INFO: ===INFO: ===INFO: ===isisisis SchichtSchichtSchichtSchicht


Entwicklung

Prof. Dr.

Stephan Kleuker

342

JSF und CSS (1/3)

• CSS-Dateiengrundsätzlich nutzbar

• keine einfache Einstellung einmal für alles, da CSS keine Vererbung bzw. kontextabhängige Nutzung ermöglicht

• fast allen JSF-Elementenkönnen Style-Klassen(genauer Stylespezifikationen) und konkrete Styleszugeordnet werden


Entwicklung

Prof. Dr.

Stephan Kleuker

343

JSF und CSS (2/3) – Ausschnitt aus Anwendung

<<<<htmlhtmlhtmlhtml>>>><<<<headheadheadhead>>>><<<<metametametameta httphttphttphttp----equiv="Contentequiv="Contentequiv="Contentequiv="Content----TypeTypeTypeType" " " " content="text/htmlcontent="text/htmlcontent="text/htmlcontent="text/html; ; ; ;

charset=UTFcharset=UTFcharset=UTFcharset=UTF----8"/>8"/>8"/>8"/><<<<title>Module</titletitle>Module</titletitle>Module</titletitle>Module</title>>>><link <link <link <link rel="stylesheetrel="stylesheetrel="stylesheetrel="stylesheet" " " " type="text/csstype="text/csstype="text/csstype="text/css" " " "

href="/JSFCSS/css/stil.csshref="/JSFCSS/css/stil.csshref="/JSFCSS/css/stil.csshref="/JSFCSS/css/stil.css" />" />" />" /></</</</headheadheadhead> <> <> <> <bodybodybodybody> <> <> <> <f:viewf:viewf:viewf:view>>>>

<<<<h:formh:formh:formh:form id="f2">id="f2">id="f2">id="f2"><<<<h:messagesh:messagesh:messagesh:messages styleClass="infoClassstyleClass="infoClassstyleClass="infoClassstyleClass="infoClass" " " " globalOnly="trueglobalOnly="trueglobalOnly="trueglobalOnly="true"/>"/>"/>"/><<<<h:panelGridh:panelGridh:panelGridh:panelGrid rendered="#{!emptyrendered="#{!emptyrendered="#{!emptyrendered="#{!empty module.modulemodule.modulemodule.modulemodule.module}">}">}">}"><<<<h:dataTableh:dataTableh:dataTableh:dataTable value="#{module.modulevalue="#{module.modulevalue="#{module.modulevalue="#{module.module}" }" }" }" var="mvar="mvar="mvar="m""""

styleClass="resultGridstyleClass="resultGridstyleClass="resultGridstyleClass="resultGrid" " " " rowClasses="oddRow,evenRowrowClasses="oddRow,evenRowrowClasses="oddRow,evenRowrowClasses="oddRow,evenRow">">">">

............


Entwicklung

Prof. Dr.

Stephan Kleuker

344

JSF und CSS (3/3) - Beispielausgabe


Entwicklung

Prof. Dr.

Stephan Kleuker

345

Facelets - Motivation

• entwickelt, um JSP als View Declaration Language zu

ersetzen

• Template-Ansatz um Wiederverwendung zu ermöglichen

und Redundanzen zu vermeiden

• ein Ziel: Zusammensetzung eine logischen Seite aus

verschiedenen Dateien unter Nutzung von Parametern

• JSF-View in XHTML-Syntax [nutzen wir immer]

• Erweiterungsmöglichkeit mit tag-Libraries (vgl. JSTL für JSP)

• MVC-Ansatz, kein Java-Code in XHTML möglich


Entwicklung

Prof. Dr.

Stephan Kleuker

346

Erstes Template-Beispiel (1/5) - Template rahmen.xhtml

<?<?<?<?xmlxmlxmlxml version='1.0' encoding='UTFversion='1.0' encoding='UTFversion='1.0' encoding='UTFversion='1.0' encoding='UTF----8' ?>8' ?>8' ?>8' ?><!DOCTYPE <!DOCTYPE <!DOCTYPE <!DOCTYPE htmlhtmlhtmlhtml PUBLIC "PUBLIC "PUBLIC "PUBLIC "----//W3C//DTD XHTML 1.0 //W3C//DTD XHTML 1.0 //W3C//DTD XHTML 1.0 //W3C//DTD XHTML 1.0 Transitional//ENTransitional//ENTransitional//ENTransitional//EN" " " "

"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----transitional.dtd">transitional.dtd">transitional.dtd">transitional.dtd"><<<<htmlhtmlhtmlhtml xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/html""""xmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/facelets">">">">

<<<<h:headh:headh:headh:head>>>><<<<imgimgimgimg src="./bilder/boah.jpgsrc="./bilder/boah.jpgsrc="./bilder/boah.jpgsrc="./bilder/boah.jpg" width="200" height="40" " width="200" height="40" " width="200" height="40" " width="200" height="40" alt="boahalt="boahalt="boahalt="boah"/>"/>"/>"/><title><title><title><title><<<<ui:insertui:insertui:insertui:insert name="titelname="titelname="titelname="titel"/>"/>"/>"/>

</title></title></title></title></</</</h:headh:headh:headh:head>>>><<<<h:bodyh:bodyh:bodyh:body>>>><<<<h:formh:formh:formh:form>>>><<<<ui:insertui:insertui:insertui:insert name="rumpfname="rumpfname="rumpfname="rumpf"/>"/>"/>"/><<<<brbrbrbr/> </> </> </> <brbrbrbr/>/>/>/><<<<h:commandLinkh:commandLinkh:commandLinkh:commandLink value="Zurvalue="Zurvalue="Zurvalue="Zurüüüückckckck" " " " action="#{bsp.zurueckaction="#{bsp.zurueckaction="#{bsp.zurueckaction="#{bsp.zurueck}"/>}"/>}"/>}"/>

</</</</h:formh:formh:formh:form>>>></</</</h:bodyh:bodyh:bodyh:body>>>>

</</</</htmlhtmlhtmlhtml>>>>


Entwicklung

Prof. Dr.

Stephan Kleuker

347

Erstes Template-Beispiel (2/5) - Bean

@@@@ManagedBeanManagedBeanManagedBeanManagedBean@@@@RequestScopedRequestScopedRequestScopedRequestScopedpublicpublicpublicpublic classclassclassclass BspBspBspBsp {{{{publicpublicpublicpublic String String String String getErgebnisgetErgebnisgetErgebnisgetErgebnis(){(){(){(){returnreturnreturnreturn "Du solltest Dich "Du solltest Dich "Du solltest Dich "Du solltest Dich äääändern";ndern";ndern";ndern";

}}}}

publicpublicpublicpublic String bad(){String bad(){String bad(){String bad(){returnreturnreturnreturn "./"./"./"./analyse.xhtmlanalyse.xhtmlanalyse.xhtmlanalyse.xhtml";";";";

}}}}

publicpublicpublicpublic String good(){String good(){String good(){String good(){returnreturnreturnreturn "./"./"./"./analyse.xhtmlanalyse.xhtmlanalyse.xhtmlanalyse.xhtml";";";";

}}}}

publicpublicpublicpublic String String String String zurueckzurueckzurueckzurueck(){(){(){(){returnreturnreturnreturn "./"./"./"./index.xhtmlindex.xhtmlindex.xhtmlindex.xhtml";";";";

}}}}}}}}


Entwicklung

Prof. Dr.

Stephan Kleuker

348

Erstes Template-Beispiel (3/5) - index.xhtml



xmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/html""""xmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/facelets">">">">

<<<<h:bodyh:bodyh:bodyh:body>>>><<<<ui:compositionui:compositionui:compositionui:composition template="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtml">">">"><<<<ui:defineui:defineui:defineui:define name="titelname="titelname="titelname="titel">">">">WesenstestWesenstestWesenstestWesenstest

</</</</ui:defineui:defineui:defineui:define>>>><<<<ui:defineui:defineui:defineui:define name="rumpfname="rumpfname="rumpfname="rumpf">">">"><<<<h:outputTexth:outputTexth:outputTexth:outputText value="Wasvalue="Wasvalue="Wasvalue="Was bist Du?"/>bist Du?"/>bist Du?"/>bist Du?"/><<<<brbrbrbr/>/>/>/><<<<h:commandButtonh:commandButtonh:commandButtonh:commandButton value="Badvalue="Badvalue="Badvalue="Bad Guy" Guy" Guy" Guy" action="#{bsp.badaction="#{bsp.badaction="#{bsp.badaction="#{bsp.bad}"/>}"/>}"/>}"/><<<<h:commandButtonh:commandButtonh:commandButtonh:commandButton value="Goodvalue="Goodvalue="Goodvalue="Good Boy" Boy" Boy" Boy" action="#{bsp.goodaction="#{bsp.goodaction="#{bsp.goodaction="#{bsp.good}"/>}"/>}"/>}"/>

</</</</ui:defineui:defineui:defineui:define>>>></</</</ui:compositionui:compositionui:compositionui:composition>>>>

</</</</h:bodyh:bodyh:bodyh:body>>>></</</</htmlhtmlhtmlhtml>>>>


Entwicklung

Prof. Dr.

Stephan Kleuker

349

Erstes Template-Beispiel (4/5) - analyse.xhtml

<?<?<?<?xmlxmlxmlxml version='1.0' encoding='UTFversion='1.0' encoding='UTFversion='1.0' encoding='UTFversion='1.0' encoding='UTF----8' ?>8' ?>8' ?>8' ?><!DOCTYPE <!DOCTYPE <!DOCTYPE <!DOCTYPE htmlhtmlhtmlhtml PUBLIC "PUBLIC "PUBLIC "PUBLIC "----//W3C//DTD XHTML 1.0 //W3C//DTD XHTML 1.0 //W3C//DTD XHTML 1.0 //W3C//DTD XHTML 1.0

Transitional//ENTransitional//ENTransitional//ENTransitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1" "http://www.w3.org/TR/xhtml1/DTD/xhtml1" "http://www.w3.org/TR/xhtml1/DTD/xhtml1" "http://www.w3.org/TR/xhtml1/DTD/xhtml1----transitional.dtd">transitional.dtd">transitional.dtd">transitional.dtd">

<<<<htmlhtmlhtmlhtml xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/html""""xmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/facelets">">">">

<<<<h:bodyh:bodyh:bodyh:body>>>><<<<ui:compositionui:compositionui:compositionui:composition template="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtml">">">"><<<<ui:defineui:defineui:defineui:define name="titelname="titelname="titelname="titel">">">">ErgebnisErgebnisErgebnisErgebnis

</</</</ui:defineui:defineui:defineui:define>>>><<<<ui:defineui:defineui:defineui:define name="rumpfname="rumpfname="rumpfname="rumpf">">">"><<<<h:outputTexth:outputTexth:outputTexth:outputText value="#{bsp.ergebnisvalue="#{bsp.ergebnisvalue="#{bsp.ergebnisvalue="#{bsp.ergebnis}"/>}"/>}"/>}"/>

</</</</ui:defineui:defineui:defineui:define>>>></</</</ui:compositionui:compositionui:compositionui:composition>>>>



Entwicklung

Prof. Dr.

Stephan Kleuker

350

Erstes Template-Beispiel (5/5) - Nutzung


Entwicklung

Prof. Dr.

Stephan Kleuker

351

Aufbau genauer analysiert

• in index.xhtml<<<<h:bodyh:bodyh:bodyh:body>>>>

<<<<ui:compositionui:compositionui:compositionui:composition template="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtml">">">">• im Template wird <h:head> gesetzt

• generell werden mit ui:composition Kinder des

Wurzelknotens UIViewRoot erzeugt

• soll umgebender Text und Struktur berücksichtigt werden,

ist ui:decorate zu nutzen; immer bei mehreren Templates

• Beispiel: folgender Text nur bei ui:decorate sichtbar

<<<<h:bodyh:bodyh:bodyh:body>>>>

<<<<h:outputTexth:outputTexth:outputTexth:outputText value="Hallo"/>value="Hallo"/>value="Hallo"/>value="Hallo"/>

<<<<ui:decorateui:decorateui:decorateui:decorate template="//templates/template="//templates/template="//templates/template="//templates/rahmen.xhtmlrahmen.xhtmlrahmen.xhtmlrahmen.xhtml">">">">


Entwicklung

Prof. Dr.

Stephan Kleuker

352

Nutzung von Parametern

• in rahmen.xhtml

<<<<h:commandLinkh:commandLinkh:commandLinkh:commandLink value="Zurvalue="Zurvalue="Zurvalue="Zurüüüückckckck" " " " action="#{bsp.zurueckaction="#{bsp.zurueckaction="#{bsp.zurueckaction="#{bsp.zurueck}" }" }" }"

rendered="#{!startrendered="#{!startrendered="#{!startrendered="#{!start}"/>}"/>}"/>}"/>

• in index.xhtml

<<<<ui:compositionui:compositionui:compositionui:composition template="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtml">">">">

<<<<ui:paramui:paramui:paramui:param name="startname="startname="startname="start" " " " value="truevalue="truevalue="truevalue="true"/>"/>"/>"/>

<<<<ui:defineui:defineui:defineui:define name="titelname="titelname="titelname="titel">">">">

• in analyse.xhtml

<<<<ui:compositionui:compositionui:compositionui:composition template="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtmltemplate="//templates/rahmen.xhtml">">">">

<<<<ui:paramui:paramui:paramui:param name="startname="startname="startname="start" " " " value="falsevalue="falsevalue="falsevalue="false"/>"/>"/>"/>

• Parameter auch bei anderen Elementen nutzbar


Entwicklung

Prof. Dr.

Stephan Kleuker

353

Nutzung von ui:include (1/2) - index.xhtml



xmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/facelets">">">"><<<<ui:includeui:includeui:includeui:include src="./templates/head.xhtmlsrc="./templates/head.xhtmlsrc="./templates/head.xhtmlsrc="./templates/head.xhtml">">">"><<<<ui:paramui:paramui:paramui:param name="titelname="titelname="titelname="titel" " " " value="Hallodelevalue="Hallodelevalue="Hallodelevalue="Hallodele"/>"/>"/>"/>

</</</</ui:includeui:includeui:includeui:include>>>><<<<ui:includeui:includeui:includeui:include src="./templates/body.xhtmlsrc="./templates/body.xhtmlsrc="./templates/body.xhtmlsrc="./templates/body.xhtml">">">"><<<<ui:paramui:paramui:paramui:param name="textname="textname="textname="text" " " " value="rischtischvalue="rischtischvalue="rischtischvalue="rischtisch"/>"/>"/>"/><<<<ui:paramui:paramui:paramui:param name="objname="objname="objname="obj" " " " value="#{bspvalue="#{bspvalue="#{bspvalue="#{bsp}"/>}"/>}"/>}"/>

</</</</ui:includeui:includeui:includeui:include>>>></</</</htmlhtmlhtmlhtml>>>>


Entwicklung

Prof. Dr.

Stephan Kleuker

354

Nutzung von ui:include (2/2) - head/body.xhtml



xmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/html">">">"><<<<h:headh:headh:headh:head>>>><title> <<title> <<title> <<title> <h:outputTexth:outputTexth:outputTexth:outputText value="#{titelvalue="#{titelvalue="#{titelvalue="#{titel}"/> </title>}"/> </title>}"/> </title>}"/> </title>

</</</</h:headh:headh:headh:head>>>></</</</htmlhtmlhtmlhtml>>>>



xmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/htmlxmlns:h="http://java.sun.com/jsf/html">">">"><<<<h:bodyh:bodyh:bodyh:body>>>><h3> <<h3> <<h3> <<h3> <h:outputTexth:outputTexth:outputTexth:outputText value="#{textvalue="#{textvalue="#{textvalue="#{text}"/> </h3>}"/> </h3>}"/> </h3>}"/> </h3><<<<h:outputTexth:outputTexth:outputTexth:outputText value="#{obj.ergebnisvalue="#{obj.ergebnisvalue="#{obj.ergebnisvalue="#{obj.ergebnis}"/>}"/>}"/>}"/>



Entwicklung

Prof. Dr.

Stephan Kleuker

355

Nutzung vo ui:debug

• Im Development- oder Debug-Modus erhält man durch

Drücken von CTRL+SHIFT+d Komponentenbaum angezeigt<<<<htmlhtmlhtmlhtml xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/faceletsxmlns:ui="http://java.sun.com/jsf/facelets">">">"><<<<ui:debugui:debugui:debugui:debug/>/>/>/><<<<ui:includeui:includeui:includeui:include src="./templates/head.xhtmlsrc="./templates/head.xhtmlsrc="./templates/head.xhtmlsrc="./templates/head.xhtml">">">">

JSF-Klassen: typischer GUI-Aufbaumit...

Documents

Transcript of JSF-Klassen: typischer GUI-Aufbaumit...