JavaJEEJSF: Difference between revisions

From Wiki RB4
 
(44 intermediate revisions by 2 users not shown)
Line 7: Line 7:
* support for internationalizing
* support for internationalizing
* handling events.
* handling events.
'''RichFaces''' is an open source Ajax enabled  JSF (Java Server Faces) component library which is hosted by JBoss.


Nach einer fast dreijährigen Spezifikationsphase und etlichen damit verbundenen Diskussionen hat Sun 2004 das erste offizielle Release der JSF-Spezifikation (Java Server Faces) veröffentlicht. You can think of JSF as "swing for server-side applications". Compared to that servlets and JSP are the assmebly language.
Nach einer fast dreijährigen Spezifikationsphase und etlichen damit verbundenen Diskussionen hat Sun 2004 das erste offizielle Release der JSF-Spezifikation (Java Server Faces) veröffentlicht. You can think of JSF as "swing for server-side applications". Compared to that servlets and JSP are the assmebly language.
Line 15: Line 17:
* a component model that enables third-party developers to supply additional components
* a component model that enables third-party developers to supply additional components


Eine dargestellte Seite heißt im JSF-Kontext '''View'''. Dieser besteht aus hierarchisch angeordneten Komponenten der Benutzerschnittstelle, etwa einfachen Eingabefeldern und Knöpfen, aber auch aufwendigeren Bausteinen wie Tabellen, Bäumen und Menüs. Diese Struktur bildet in ihrer Summe einen Baum, dessen Hierarchie den Seitenaufbau widerspiegelt. So kann eine Tabelle beispielsweise wieder Ein- oder Ausgabefelder enthalten und ein Menü eventuell Untermenüs. Für jeden Benutzer der Webanwendung speichert das Framework eine entsprechende Instanz des Komponentenbaums.
Eine dargestellte Seite heißt im JSF-Kontext '''View'''. Because the processing of the view template is separate from the encoding of the UI component tree, you can build the component tree using an
alternate view technology, such as Facelets or pure Java. Der component tree besteht aus hierarchisch angeordneten '''Komponenten''' der Benutzerschnittstelle, etwa einfachen Eingabefeldern und Knöpfen, aber auch aufwendigeren Bausteinen wie Tabellen, Bäumen und Menüs. Diese Struktur bildet in ihrer Summe einen Baum, dessen Hierarchie den Seitenaufbau widerspiegelt. So kann eine Tabelle beispielsweise wieder Ein- oder Ausgabefelder enthalten und ein Menü eventuell Untermenüs. The UI component
tree is a hierarchical graph of Java objects that represents the structure of the
page. Rendering is only a secondary concern and occurs when the component tree is
''encoded'' to the client (that is, the browser). The renderer attached to each component
produces the markup. Java Server Faces sind ausgabeunabhängig. Wie eine Komponente auf dem Client erscheint, wie eine Anwendung ihre Parameter kodiert und dekodiert, entscheidet ein zugeordneter '''Renderer'''. Für die Ansteuerung der Renderer sorgt ein ViewHandler. Für HTML definiert der JSF-Standard eine JSP-Tag-Library.
 
Für jeden Benutzer der Webanwendung speichert das Framework eine entsprechende Instanz des Komponentenbaums.


Jede Komponente kann der Programmierer mit einer ID versehen und auf diese Weise ansprechen oder suchen. Grundsätzlich kann sie einen beliebigen Zustand besitzen und diesen über Request-Grenzen hinaus speichern. Dabei ist sowohl eine Speicherung auf dem Client als auch auf dem Server möglich. Alle Komponenten sind von der abstrakten Klasse UIComponent abgeleitet, der wesentlichen Schnittstelle zum Komponentenbaum. Die Wurzel des Baums bildet eine Instanz des Typs UIViewRoot.
Jede Komponente kann der Programmierer mit einer ID versehen und auf diese Weise ansprechen oder suchen. Grundsätzlich kann sie einen beliebigen Zustand besitzen und diesen über Request-Grenzen hinaus speichern. Dabei ist sowohl eine Speicherung auf dem Client als auch auf dem Server möglich. Alle Komponenten sind von der abstrakten Klasse UIComponent abgeleitet, der wesentlichen Schnittstelle zum Komponentenbaum. Die Wurzel des Baums bildet eine Instanz des Typs UIViewRoot.


Fast alle Eigenschaften einer Komponente lassen sich mit „Value Bindings“ versehen, um den aktuellen Wert an einen bestimmten Speicherort zu binden. Mit Hilfe solcher Bindings können zum Beispiel Eingabefelder ihre Daten im Modell speichern und wieder daraus lesen. In der Regel speichert eine Eingabekomponente zusätzlich den übertragenen Wert lokal, um diesen unabhängig von Konvertierungen im Fehlerfall wieder anzeigen zu können. Dieses geschieht für den Entwickler einer JSF-Seite transparent, das heißt, ohne ihm zusätzlichen Aufwand zu verursachen.
Fast alle Eigenschaften einer Komponente lassen sich mit bindings to (by JSF) managed beans versehen, um den aktuellen Wert an einen bestimmten Speicherort zu binden. Mit Hilfe solcher Bindings können zum Beispiel Eingabefelder ihre Daten im Modell speichern und wieder daraus lesen. The binding is done using the '''expression language''' (EL), also found in JSP. There are both value- and method-binding expressions.
In der Regel speichert eine Eingabekomponente zusätzlich den übertragenen Wert lokal, um diesen unabhängig von Konvertierungen im Fehlerfall wieder anzeigen zu können. Dieses geschieht für den Entwickler einer JSF-Seite transparent, das heißt, ohne ihm zusätzlichen Aufwand zu verursachen.


Nimmt der Server einen Faces Request entgegen, verarbeitet er diesen gemäß des Request-Lebenszyklus (Request Processing Lifecycle, RPL) in sechs Phasen:
Any event performed by the user results in an HTTP request. JSF resolves a view template and builds a new or restores a component tree from its previous state, if its not an initial request. The events are processed, and the component tree is once again encoded to the client (the HTML response). Nimmt der Server einen Faces Request entgegen, verarbeitet er diesen gemäß des Request-Lebenszyklus (Request Processing Lifecycle, RPL) in sechs Phasen:
* Restore View
# Restore View from its previous state (if postback)
* Apply Request Values
# Apply Request Values
* Process Validations
# Process Validations and conversions
* Update Model Values
# Update Model Values (set values in bean)
* Invoke Application
# Invoke Application (execute action methods, one primary listener who triggers a navigation rule and arbitrary secondary listeners)
* Render Response  
# Render Response (build the component tree, encode HTML)
 
Java Server Faces sind ausgabeunabhängig. Wie eine Komponente auf dem Client erscheint, wie eine Anwendung ihre Parameter kodiert und dekodiert, entscheidet ein zugeordneter „Renderer“. Für die Ansteuerung der Renderer sorgt ein ViewHandler. Für HTML definiert der JSF-Standard eine JSP-Tag-Library.


Derzeit stehen zwei etablierte Implementierungen für die JSF-Spezifikation zur Verfügung. Zum einen die von Sun herausgegebene Referenzimplementierung und zum anderen die unter der Apache-2.0-Lizenz stehende JSF-Implementierung '''MyFaces''', die eine gute Alternative zu der Sun-eigenen Variante ist.
Derzeit stehen zwei etablierte Implementierungen für die JSF-Spezifikation zur Verfügung. Zum einen die von Sun herausgegebene Referenzimplementierung und zum anderen die unter der Apache-2.0-Lizenz stehende JSF-Implementierung '''MyFaces''', die eine gute Alternative zu der Sun-eigenen Variante ist.
Line 49: Line 57:
   <url-pattern>*.jsf</url-pattern>              // maps all *.jsf request to the Faces Servlet
   <url-pattern>*.jsf</url-pattern>              // maps all *.jsf request to the Faces Servlet
  </servlet-mapping>
  </servlet-mapping>
<!-- default is server, so not neccessary -->
<context-param>
  <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
  <param-value>server</param-value>
</context-param>


The src page has to be named *.jsp because its still a JSP page with JSF tags in it.
The src page has to be named *.jsp because its still a JSP page with JSF tags in it.
Line 73: Line 87:
  <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
  <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>


====commandButton====
===Tags===


====form====
====&lt;h:commandButton>====


====inputSecret====
<h:commandButton value="<BUTTON_TEXT>" action="<EL_EXPRESSION>">
 
inside an &lt;h:form> element it is translated to an [[HTML#.3Cinput.3E|&lt;input type="submit">]].
 
====&lt;h:facet>====
Facets are something like named parameter for a component, which a stored in a facet map and which are rendered in a special way e.g. as table header or footer.
 
====&lt;h:form>====
 
====&lt;h:inputSecret>====


  <h:inputSecret value="<VALUE>" required="[true|false]">
  <h:inputSecret value="<VALUE>" required="[true|false]">


====inputText====
====&lt;h:inputText>====


====panelGrid====
&lt;h:inputText [id="<NAME>"] [style="<STYLES>"] [value="<VALUE>"] [styleClass="<CLASS>"] >
&lt;/h:inputText>


====view====
It is translated to [[HTML#.3Cinput.3E|&lt;input type="text">]].
 
====&lt;h:messages>====
 
<h:messages/>
 
outputs a.o. from [[Seam#FacesMessages|Seam FacesMessages]].
 
====&lt;h:panelGrid>====
 
&lt;h:panelGrid [columns="<Number>"] [id="<Name>"] [styleClass="<Classname>"] [columnClasses="<Classnamelist>"] >
  [&lt;f:facet name="caption"><CaptionText></f:facet>]
  ...
&lt;/h:panelGrid>
 
A panelGrid is translated into an HTML table. Depending on the number of columns specified the subelements are taken as cell entries. The styleClass is translated to the class attribute. The column classes are translated to the class attribute of the td element.
 
====&lt;h:view>====


===Navigation===
===Navigation===
Static navigation can be specified in the [[JavaJEEJSF#faces-config.xml|faces-config.xml]] via navigation rules. In the jsf page use this:
Static navigation can be specified in the [[JavaJEEJSF#faces-config.xml|faces-config.xml]] via navigation rules. In the jsf page use this:


  '''<h:commandButton value="Login" action="login_action"/>'''
  <h:commandButton value="Login" action="login_action"/>


and in the [[JavaJEEJSF#faces-config.xml|faces-config.xml]] write:
and in the [[JavaJEEJSF#faces-config.xml|faces-config.xml]] write:


  '''<navigation-rule>'''
  <navigation-rule>
   '''<from-view-id>/jsf_login.jsp</from-view-id>'''
   <from-view-id>/jsf_login.jsp</from-view-id>
   '''<navigation-case>'''
   <navigation-case>
     '''<from-outcome>login_action</from-outcome> // action name specified in h:commandButton action="..."'''
     <from-outcome>login_action</from-outcome> // action name specified in h:commandButton action="..."
     '''<to-view-id>/jsf_welcome.jsp</to-view-id>'''
     <to-view-id>/jsf_welcome.jsp</to-view-id>
   '''</navigation-case>'''
   </navigation-case>
  '''</navigation-rule>'''
  </navigation-rule>


To implement dynamic navigation the command button must have a method expression:
To implement dynamic navigation the command button must have a method expression:


  '''<h:commandButton value="Login" action="#{loginController.verifyUser}"/>'''
  <h:commandButton value="Login" action="#{loginController.verifyUser}"/>


The return type of the method is converted to a string to look up a matching navigation rule.
The return type of the method is converted to a string to look up a matching navigation rule.
Line 119: Line 160:
==Applications==
==Applications==
===TestWebApplication===
===TestWebApplication===
===Core JSF Examples===
* s. [[JavaJEEJSF#Sources|Sources]]
* adapt /Uwes/eclipse/workspace/corejsf/build.properties
/Uwes/eclipse/workspace/corejsf/ant -Dapp=ch1/login and so on.


==Sources==
==Sources==
* Core JavaServer Faces; David Geary & Cay Horstmann; source code in C:\Uwes\Zips\Java\JSF\corejsf2-examples.zip; http://corejsf.com and extracted to <ECLIPSE_WORKSPACE>\corejsf\.
* Core JavaServer Faces; David Geary & Cay Horstmann; source code in C:\Uwes\Zips\Java\JSF\corejsf2-examples.zip; http://corejsf.com and extracted to <ECLIPSE_WORKSPACE>\corejsf\.

Latest revision as of 12:29, 14 April 2014

Introduction[edit]

Most importantly JavaServer Faces technology provides a rich architecture for:

  • model-view-controller architecture
  • managing component state
  • processing component data,
  • validating and convert user input
  • support for internationalizing
  • handling events.

RichFaces is an open source Ajax enabled JSF (Java Server Faces) component library which is hosted by JBoss.

Nach einer fast dreijährigen Spezifikationsphase und etlichen damit verbundenen Diskussionen hat Sun 2004 das erste offizielle Release der JSF-Spezifikation (Java Server Faces) veröffentlicht. You can think of JSF as "swing for server-side applications". Compared to that servlets and JSP are the assmebly language.

JSF has three parts:

  • a set of prefabricated UI components
  • an event-driven programming model
  • a component model that enables third-party developers to supply additional components

Eine dargestellte Seite heißt im JSF-Kontext View. Because the processing of the view template is separate from the encoding of the UI component tree, you can build the component tree using an alternate view technology, such as Facelets or pure Java. Der component tree besteht aus hierarchisch angeordneten Komponenten der Benutzerschnittstelle, etwa einfachen Eingabefeldern und Knöpfen, aber auch aufwendigeren Bausteinen wie Tabellen, Bäumen und Menüs. Diese Struktur bildet in ihrer Summe einen Baum, dessen Hierarchie den Seitenaufbau widerspiegelt. So kann eine Tabelle beispielsweise wieder Ein- oder Ausgabefelder enthalten und ein Menü eventuell Untermenüs. The UI component tree is a hierarchical graph of Java objects that represents the structure of the page. Rendering is only a secondary concern and occurs when the component tree is encoded to the client (that is, the browser). The renderer attached to each component produces the markup. Java Server Faces sind ausgabeunabhängig. Wie eine Komponente auf dem Client erscheint, wie eine Anwendung ihre Parameter kodiert und dekodiert, entscheidet ein zugeordneter Renderer. Für die Ansteuerung der Renderer sorgt ein ViewHandler. Für HTML definiert der JSF-Standard eine JSP-Tag-Library.

Für jeden Benutzer der Webanwendung speichert das Framework eine entsprechende Instanz des Komponentenbaums.

Jede Komponente kann der Programmierer mit einer ID versehen und auf diese Weise ansprechen oder suchen. Grundsätzlich kann sie einen beliebigen Zustand besitzen und diesen über Request-Grenzen hinaus speichern. Dabei ist sowohl eine Speicherung auf dem Client als auch auf dem Server möglich. Alle Komponenten sind von der abstrakten Klasse UIComponent abgeleitet, der wesentlichen Schnittstelle zum Komponentenbaum. Die Wurzel des Baums bildet eine Instanz des Typs UIViewRoot.

Fast alle Eigenschaften einer Komponente lassen sich mit bindings to (by JSF) managed beans versehen, um den aktuellen Wert an einen bestimmten Speicherort zu binden. Mit Hilfe solcher Bindings können zum Beispiel Eingabefelder ihre Daten im Modell speichern und wieder daraus lesen. The binding is done using the expression language (EL), also found in JSP. There are both value- and method-binding expressions. In der Regel speichert eine Eingabekomponente zusätzlich den übertragenen Wert lokal, um diesen unabhängig von Konvertierungen im Fehlerfall wieder anzeigen zu können. Dieses geschieht für den Entwickler einer JSF-Seite transparent, das heißt, ohne ihm zusätzlichen Aufwand zu verursachen.

Any event performed by the user results in an HTTP request. JSF resolves a view template and builds a new or restores a component tree from its previous state, if its not an initial request. The events are processed, and the component tree is once again encoded to the client (the HTML response). Nimmt der Server einen Faces Request entgegen, verarbeitet er diesen gemäß des Request-Lebenszyklus (Request Processing Lifecycle, RPL) in sechs Phasen:

  1. Restore View from its previous state (if postback)
  2. Apply Request Values
  3. Process Validations and conversions
  4. Update Model Values (set values in bean)
  5. Invoke Application (execute action methods, one primary listener who triggers a navigation rule and arbitrary secondary listeners)
  6. Render Response (build the component tree, encode HTML)

Derzeit stehen zwei etablierte Implementierungen für die JSF-Spezifikation zur Verfügung. Zum einen die von Sun herausgegebene Referenzimplementierung und zum anderen die unter der Apache-2.0-Lizenz stehende JSF-Implementierung MyFaces, die eine gute Alternative zu der Sun-eigenen Variante ist.

Implementation[edit]

Libs[edit]

  • add libs jsf-api.jar, jsf-impl.jar and jstl.jar

Configuration Files[edit]

web.xml[edit]

  • add the following entries
<servlet>
  <display-name>FacesServlet</display-name>
  <servlet-name>FacesServlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>FacesServlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>              // maps all *.jsf request to the Faces Servlet
</servlet-mapping>

<context-param>
  <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
  <param-value>server</param-value>
</context-param>

The src page has to be named *.jsp because its still a JSP page with JSF tags in it.

faces-config.xml[edit]

  • location in <WAR-File>\WEB-INF\ directory (beside web.xml)
<faces-config>

  <managed-bean>
    <managed-bean-name>user</managed-bean-name> // this name can be used in jsf pages
    <managed-bean-class>...</managed-bean-class>
    <managed-bean-scope>...</managed-bean-scope>
  </managed-bean>

  <NAVIGATION_RULES>

</faces-config>

JSF pages[edit]

There is one JSF page for each browser screen. A page starts with tag library declarations:

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

Tags[edit]

<h:commandButton>[edit]

<h:commandButton value="<BUTTON_TEXT>" action="<EL_EXPRESSION>">

inside an <h:form> element it is translated to an <input type="submit">.

<h:facet>[edit]

Facets are something like named parameter for a component, which a stored in a facet map and which are rendered in a special way e.g. as table header or footer.

<h:form>[edit]

<h:inputSecret>[edit]

<h:inputSecret value="<VALUE>" required="[true|false]">

<h:inputText>[edit]

<h:inputText [id="<NAME>"] [style="<STYLES>"] [value="<VALUE>"] [styleClass="<CLASS>"] >
</h:inputText>

It is translated to <input type="text">.

<h:messages>[edit]

<h:messages/>

outputs a.o. from Seam FacesMessages.

<h:panelGrid>[edit]

<h:panelGrid [columns="<Number>"] [id="<Name>"] [styleClass="<Classname>"] [columnClasses="<Classnamelist>"] > 
  [<f:facet name="caption"><CaptionText></f:facet>]
  ...
</h:panelGrid>

A panelGrid is translated into an HTML table. Depending on the number of columns specified the subelements are taken as cell entries. The styleClass is translated to the class attribute. The column classes are translated to the class attribute of the td element.

<h:view>[edit]

Navigation[edit]

Static navigation can be specified in the faces-config.xml via navigation rules. In the jsf page use this:

<h:commandButton value="Login" action="login_action"/>

and in the faces-config.xml write:

<navigation-rule>
  <from-view-id>/jsf_login.jsp</from-view-id>
  <navigation-case>
    <from-outcome>login_action</from-outcome> // action name specified in h:commandButton action="..."
    <to-view-id>/jsf_welcome.jsp</to-view-id>
  </navigation-case>
</navigation-rule>

To implement dynamic navigation the command button must have a method expression:

<h:commandButton value="Login" action="#{loginController.verifyUser}"/>

The return type of the method is converted to a string to look up a matching navigation rule.

Managed Beans[edit]

You can specify a bean scope (see here):

  • session, beans are not thread-safe
  • application
  • request, beans are inherently thread-safe

Sometimes it is convenient to design a bean that contains some or all components objects of a web form, called backing bean. This is useful for e.g. validating relationships between multiple components. To use the backing bean you use the binding attribute in jsf pages.

In typical Seam applications there are no jsf managed beans.

Applications[edit]

TestWebApplication[edit]

Core JSF Examples[edit]

  • s. Sources
  • adapt /Uwes/eclipse/workspace/corejsf/build.properties
/Uwes/eclipse/workspace/corejsf/ant -Dapp=ch1/login and so on.

Sources[edit]

  • Core JavaServer Faces; David Geary & Cay Horstmann; source code in C:\Uwes\Zips\Java\JSF\corejsf2-examples.zip; http://corejsf.com and extracted to <ECLIPSE_WORKSPACE>\corejsf\.