• JSF 2.0: Mojarra in Version 2.0.0-b16
• Tomcat 6
• Maven
• Eclipse

Voraussetzung:

• JDK 6
• Tomcat 6
• Eclipse inklusive WTP, Maven (m2eclipse)
• Beim m2eclipse-Plugin “Maven integration for WTP” in Eclipse nachinstallieren, falls nicht vorhanden

Vorbereitung:

1. In Eclipse ein dynamische Webprojekt erstellen
2. Tomcat 6 als Server in Eclipse einrichten
3. Dem Projekt “Maven Nature” hinzufügen. Zur Zeit ist das Projekt ein reines Webprojekt ohne Maven Eigenschaften. Durch Rechte-Maustaste auf das Projekt und dann Maven > Enable Dependency Management wird Maven-Funktionalität für das Projekt hinzugefügt
4. Maven erwartet eine andere Ordner-Struktur als in dem WTP-Webprojekt. Als erstes muss der Source-Ordner angepasst werden. Hierfür müssen mind. folgender Ordner erstellt werden: src/main/java. Diesen muss man in Eclipse dann auch als Source-Ordner konfigurieren (Java Build Path)
5. Der WebContent-Ordner wird von Maven mit der WTP-Integration genutzt. Hier ist keine Veränderung/Anpassung notwendig
6. Die existierende pom.xml muss entsprechende Einträge erweitert werden. Für JSF 2 könnte das wie folgt aussehen:

   <project xmlns=&quot;http://maven.apache.org/POM/4.0.0&quot; xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:schemaLocation=&quot;http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd&quot;>
     <modelVersion>4.0.0</modelVersion>
     <groupId>jsf2test</groupId>
     <artifactId>jsf2test</artifactId>
     <version>0.0.1-SNAPSHOT</version>
   
     <properties>
     	<version.jsf2>2.0.0-b16</version.jsf2>
     	<version.junit>4.4</version.junit>
     	<version.jstl>1.2</version.jstl>
     	<version.servlet>2.5</version.servlet>
     	<version.log4j>1.2.14</version.log4j>
     </properties>
   
     <repositories>
     	<repository>
   		<id>maven2-repository.dev.java.net</id>
   		<name>Java.net Repository for Maven</name>
   		<url>http://download.java.net/maven/2/</url>
   		<layout>default</layout>
   	</repository>
     </repositories>
   
     <build>
       <finalName>jsf2test</finalName>
       <plugins>
   	    <plugin>
   			<artifactId>maven-compiler-plugin</artifactId>
   			<configuration>
   			<source>1.5</source>
   			<target>1.5</target>
   			</configuration>
   		</plugin>
   
   	    <plugin>
   		  <groupId>org.mortbay.jetty</groupId>
   		  <!-- jetty 7
   		  <artifactId>jetty-maven-plugin</artifactId>
   		   -->
   		  <artifactId>maven-jetty-plugin</artifactId>
   		  <version>6.1.15</version>
   		  <!--
   		  <configuration>
   		    <scanIntervalSeconds>10</scanIntervalSeconds>
   		  </configuration>
   		   -->
   		</plugin>
       </plugins>
     </build>
   
      <dependencies>
      	<!-- JSF2 -->
   	<dependency>
   		<groupId>com.sun.faces</groupId>
   		<artifactId>jsf-api</artifactId>
   		<version>${version.jsf2}</version>
   	</dependency>
   
   	<dependency>
   		<groupId>com.sun.faces</groupId>
   		<artifactId>jsf-impl</artifactId>
   		<version>${version.jsf2}</version>
   	</dependency>
   
   	<dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>jstl</artifactId>
         <version>${version.jstl}</version>
       </dependency>
   
       <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>servlet-api</artifactId>
         <version>${version.servlet}</version>
       </dependency>
   
   	<!-- Misc -->
       <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>${version.junit}</version>
         <scope>test</scope>
       </dependency>
   
       <dependency>
   	    <groupId>log4j</groupId>
   	    <artifactId>log4j</artifactId>
   	    <version>${version.log4j}</version>
   	</dependency>
   
     </dependencies>
   </project>
   

7. Die Bibliotheken, welche Maven bereitstellt, müssen beim Deploy in WEB/lib kopiert werden. Die Nutzung der Maven Dependencies geschieht durch folgende Einstellung: In den Eigenschaften des Projekts muss unter Java EE Module Dependencies die Maven Dependencies ausgewählt werden.
8. Web.xml für JSF anpassen. Z.B. wie folgt:

   <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
   <web-app xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xmlns=&quot;http://java.sun.com/xml/ns/javaee&quot; xmlns:web=&quot;http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&quot; xsi:schemaLocation=&quot;http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&quot; id=&quot;WebApp_ID&quot; version=&quot;2.5&quot;>
     <display-name>dynWebTest</display-name>
   
     <servlet>
       <servlet-name>Faces Servlet</servlet-name>
       <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
       <load-on-startup>1</load-on-startup>
     </servlet>
   
     <servlet-mapping>
       <servlet-name>Faces Servlet</servlet-name>
       <url-pattern>*.xhtml</url-pattern>
     </servlet-mapping>
   
     <!-- This parameter is also possible to set over JNDI -->
     <context-param>
       <param-name>javax.faces.PROJECT_STAGE</param-name>
       <param-value>Development</param-value>
     </context-param>
   
     <welcome-file-list>
       <welcome-file>index.html</welcome-file>
       <welcome-file>index.xhtml</welcome-file>
     </welcome-file-list>
   </web-app>
   

Nun steht das Grundgerüst bereit, um endlich mit JSF 2.0 anzufangen.
Für diejenigen, die mit JSF 1.x schon gearbeitet haben, werden wohl die faces-config.xml vermissen. Korrekt. Ist gewollt. Ist nämlich die erste Verbesserung von JSF 2.0! Die faces-config.xml kann immer noch verwendet werden, aber vieles ist durch Annotations möglich und die Navigation ist einfacher/verständlicher geworden. Später mehr dazu.

Vielleicht noch ein paar Worte zur Beispielanwendung: Die Beispielanwendung beinhaltet eine Seite, mit einem Input-Feld und zwei Select-Boxen. Man stelle sich folgendes Szenario vor: Man möchte ein Registrierungs-Formular erstellen, in dem der Nutzer überprüfen kann, ob der Username noch vorhanden ist. Zusätzlich soll er das Land auswählen können, in dem er lebt.

Controller:
Der Controller ist das ManagedBean, welches in den XHTML-Seiten verwendet wird und alle Anfragen verarbeitet.

@ManagedBean(name = "fc")
@RequestScoped
public class FrontController {

	private Person person;

	private String country;

	private String continent;

	private Map<String, String[]> countries;

	@ManagedProperty(value = &quot;#{authService}&quot;)
	private AuthService authService;

	public void isUsernameValid() {

		if(authService.isUsernameValid(person.getUsername())) {

			output = &quot;Username ist nocht nicht vorhanden&quot;;
		} else {
			output = &quot;Username ist schon vorhanden. Bitte einen anderen auswählen&quot;;
		}
	}

        public String[] getCountries() {
		// deliver the countries to the actual continent
		return countries.get(continent);
	}
       /* further get/set-Methods */
}

Durch die Annotations wird JSF mitgeteilt, dass es sich bei der Klasse um ein managed bean mit dem Namen fc handelt (@ManagedBean) und die jeweils immer nur für ein Request gültig ist (@RequestScoped, weitere Scops sind vorhanden). Früher hat man diese Einstellungen in faces-config.xml durchgeführt.
Neu ist auch @ManagedProperty. Mittels dieser Annotation wird die Dependency Injection Funktionalität von JSF 2.0 verwendet. In FrontController#authService wird nun das passende Objekt mit dem managed bean namen “authService” injiziert.
Hier sei anzumerken, dass JSF kein field access durchführt, sondern die getter/setter-Methoden verwendet um Properties zu setzen.

Die Domain-Klasse Person ist ein einfaches Bean bzw. POJO, und repräsentiert die einzugebenden Daten in dem Formular.

Zu dem Controller und Model Teil gehört noch die Präsentation und diese wird mittels Facelets durchgeführt. In JSF 2.0 ist Facelets die primäre Technologie zur Beschreibung des Views. Man kann natürlich JSP nutzen, wenn man den Sprung nicht durchführen möchte. Aber die Vorteile liegen eher bei Facelets!

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
        &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>

<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
      xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;
      xmlns:f=&quot;http://java.sun.com/jsf/core&quot;
      xmlns:h=&quot;http://java.sun.com/jsf/html&quot;>

<h:head>
  <title>JSF Demo</title>
</h:head>
<h:body>
  <h1>Register</h1>
  <h:form>

    <h:inputText id=&quot;name&quot; value=&quot;#{fc.person.username}&quot;>
    </h:inputText>
    <h:commandButton value=&quot;Check username&quot; action=&quot;#{fc.isUsernameValid}&quot;>
    	<f:ajax execute=&quot;name&quot; render=&quot;outIsUserValid&quot; />
    </h:commandButton>
    <h:outputText id=&quot;outIsUserValid&quot; value=&quot;#{fc.output}&quot; />
  </h:form>
  <br />

  <h:form>
                <!-- First select box to select the continent.... -->
  		<h:selectOneMenu value=&quot;#{fc.continent}&quot;>
  			<f:selectItems value=&quot;#{fc.continents}&quot; />
  			<f:ajax render=&quot;countrylist&quot; />
  		</h:selectOneMenu>

                <!-- ...and depending of the selected continent, contains this
                      second select box the countries
                -->
  		<h:selectOneMenu value=&quot;#{fc.country}&quot; id=&quot;countrylist&quot;>
  			<f:selectItems value=&quot;#{fc.countries}&quot; />
  		</h:selectOneMenu>
  </h:form>
</h:body>
</html>

Mittels Facelets ist die Beschreibung der Views reiner XML/XHTML.
In dem ersten Formular ist das Input-Feld, in dem der Nutzer überprüfen kann, ob sein Username schon vergeben ist. Die Überprüfung wird mittels Ajax durchgeführt. Hierfür ist der neue <f:ajax>-Tag zuständig. Beim betätigen des Buttons wird ein Ajax-Request verschickt, dieser beinhaltet die Werte aus den Felder in dem execute-Attribute. In unserem Fall aus dem Feld mit der ID name. Die Antwort wird, wie in dem render-Attribute definiert, in ID outIsUserValid eingefügt. Auf dem Server wird zur Verarbeitung die Methode FrontController.isUsernameValid() aufgerufen. Während des Aufrus ist FrontController#person mit den aktuellen Werten (hier: username) gesetzt.

In dem zweiten Formular gibt es zwei Select-Boxen. In dem einen kann ein Kontinent ausgewählt werden. Resultierend dazu, wird in der zweiten eine Liste von Ländern angezeigt. Diese Länder-Liste wird durch Ajax ermittelt.
In der ersten Liste ist wieder ein <f:ajax>-Tag zu finden. Bei dem 1. Beispiel wurde der Request verschickt, wenn der Nutzer den Button drückt. D.h. in der Javascript-Welt, beim Click-Event, wird der Request verschickt. Das <f:ajax>-Tag wählt immer das passende Event aus, abhängig von der Komponente, in dem es verwendet wird.
Bei Listen horcht es auf ein OnChange-Event. Natürlich kann man ein anderes Event festlegen, dafür gibt es das event-Attribut.
D.h. also, sobald in der ersten Liste die Auswahl verändert wird, wird die zweite Liste aktualisiert (durch render=”countrylist”). Auf dem Server wird FrontController.getCountries() aufgerufen. In dem Kontext ist FrontController#continent belegt, da der Nutzer eine Auswahl in der 1.Liste durchgeführt hat. FrontController.getCountries() liefert nun nur ein Array von Ländern zurück. Die korrekte Verschachtelung in HTML-Elemente (option-Tag) übernimmt JSF!

Fazit:

• Mittels JSF 2.0 hat man weniger Konfigurationsaufwand
• Durch den Einsatz von Facelets macht das Erstellen der HTML-Seiten wieder Spass. Hier kann man die vorhandenen HTML-Templates fast unverändert übernehmen…
• Unproblematischer Javascript/Ajax-Einsatz, ohne es wirklich zu merken!
• DI ohne Spring!

Also der erste Eindruck hat überzeugt. Wenn man JSF-Fan war, wird man JSF-Fan weiter bleiben. Wenn nicht, könnte man es jetzt bestimmt werden

• Andy Schwartz Blogeintrag Andy hat selbst eine Auflistung inklusive weitere Erklärung aufgeführt
• Mojarra: Get started
• Mojarra 2.0.0 Release Notes: Mit den Verweisen zu den aktuellen APIs, TLDs etc

Zu dieser Auflistung, die aktualisiert wird, folgen in dem Blog ein paar Beispiele zu speziellen Themen.

P.S.: In dem Block “Spec 2.0″ folgen demnächst Beiträge zu Spezifikationen, Frameworks die nun in Version 2.0 erschienen sind.