• 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.

Wie man bei [1] sehen kann, unterstüzt WebSphere 6.1 Servlet 2.4 und JSP 2.0 – das entspricht etwa einem Tomcat 5.5.x [2]. Möchte man nun JSF 1.2 (mittels MyFaces 1.2.x) nutzen hat man da ein kleines Problem.
JSF 1.2 benötigt nämlich Servlet 2.5, JSP 2.1 und Java 5 oder später. Genau das kann WebSphere 6.1 mit seiner integrierten JSF 1.1 Implementierung nicht bieten.

Erst bei WebSphere Application Server 7 werden die gewünschten Versionen unterstützt. Wenn man jetzt nicht auf Version 7 umsteigen will/kann, und nicht unzählige Bibliotheken in WebSphere 6 ersetzen will, kann man es sich “einfach” machen und auf JSP verzichten. Das geht. Und zwar mit JSF und Facelets [4] als View-Technologie. D.h. es ist kein JSP mehr notwendig und WebSphere kann irgendeine Version anbieten.

Ich werde jetzt hier nicht Facelets beschreiben, das ich mach vielleicht mal später. Speziell geht es hier gerade um die Nutzung von JSF 1.2 mit Facelets in WebSphere Application Server 6.x.

Dazu muss in dem WEB-INF/lib-Ordner alle benötigten Bibliotheken aufgeführt werden. Das sind mindestens diese:

• commons-beanutils-1.7.0.jar
• commons-codec-1.3.jar
• commons-collections-3.2.jar
• commons-digester-1.8.jar
• commons-discovery-0.4.jar
• el-api-1.0.jar
• el-impl-1.0.jar
• jsf-facelets-1.1.11.jar
• jstl-1.2.jar
• myfaces-api-1.2.5.jar
• myfaces-impl-1.2.5.jar
• myfaces-shared-impl-3.0.5.jar

Wie man vielleicht bemerkt hat, commons-logging.jar ist nicht dabei. Denn diese existiert schon in WebSphere App Server und sollte rausgenommen werden. Weiter sind die el-*.jars auch drin. Die hat WebSphere gar nicht und werden von Facelets benötigt.

Nachdem man nun das WAR-Archiv in WebSphere Application Server deployed hat, muss man noch die Reihenfolge des Classloaders ändern, damit zuerst die eigenen Bibliotheken genutzt werden und nicht z.B. JSF 1.1 von WebSphere. Das wählt man in “Modul verwalten”, wenn man das Web-Modul ausgewählt hat aus, und selektiert in der Select-Box den Eintrag, damit der Classloader der Anwendung zuerst gewählt wird (intern auch als “PARENT_LAST” bekannt).

Nun kann die Anwendung gestartet werden und sollte ohne Probleme laufen. Im Endeffekt einfach. Wenn man weiß wie!

Links:
[1] WebSphere supported Specifications and API
[2] Tomcat
[3] MyFaces
[4] Facelets

Wird ein Input-Feld bezüglich den Veränderungen beobachtet ($('field').observe('change', ...')) wird beim IE dieser Event dann gefeuert, wenn der Focus das Feld verlässt.

Hat das Input-Feld nun auch Autocompletion, wird dieser Event nicht mehr gefeuert, wenn, der Nutzer mit Tab oder Enter ein Eintrag aus der Autocompletion-Liste auswählt.

Hier muss man den Event selbst feuern, wenn der Eintrag aus der Autocompletion-Liste ausgewählt wurde. Da man bei Prototype keine native Events abfeuern kann, nutzt man die eigenen Events [2] nutzen.

script.aculo.us Autocompletion ruft die Funktion selectEntry wenn ein Eintrag ausgewählt wurde. Nun kann man diese Funktion überschreiben und nach der Auswahl das nötige Event feuern. Natürlich nur beim IE ansonsten hat man das Event doppel. In dem folgenden Listing wird dies beispielhaft für Autocompleter.Local gemacht

var al = new Autocompleter.Local('field', 'auto_box', localResults, { });
    // overwrite the selecEntry() function to fires the change event in IE
    al.selectEntry = function() {
       // the next two lines are the same from the original function!
       this.active = false;
       this.updateElement(this.getCurrentEntry());

       // the additional functionality
       // fire the event only for IE, cause IE does not fire this existing change event
       if(Prototype.Browser.IE) {
          var elem = $('field');
          elem.fire('clazz:event', ...);
       }
};

Links:
[1] script.aculo.us
[2] Prototype Element.fire

Überblick

Um JavaFX-Anwendung zu nutzen, braucht man standardmäßig nur die aktuelle Java Version. Hier ist Java 1.6.0_11 [3] passend, da diese Version die Fähigkeit anbietet, Applets auf den Desktop zu ziehen. Beim ersten Aufruf einer JavaFX-Anwendung werden die Runtime-Bibliotheken beim ersten Mal runtergeladen, wenn sie nicht vorhanden sind. Bei entsprechender Implimentierung der JavaFX-Anwendung (was ja ein Applet ist), kann man sich das Applet auf den Desktop ziehen. Schließt man dann den Browser, bekommt man die Möglichkeit ein Verweis auf den Desktop zu erstellen, um später das Applet – und nur das Applet, nicht auch den Browser – wieder zu nutzen.

JavaFX kommt auch mit einer neuen Script-Sprache, dem JavaFX Script. JavaFX Script ist eine deklarative kompilierbare Scriptsprache, was auch type inference – und somit implizit auch statische Typen – anbietet.

Entwicklung

Zur Entwicklung. Sun setzt ja bekanntlich auf Netbeans. Das bedeutet in dem Fall, es gibt ein Netbeans-Version [4] mit integriertem JavaFX. Diese Version beinhaltet das JavaFX Software Development Kit, Beispiele und bei Windows noch den JavaFX Mobile Emulator.

Zusätzlich gibt es Plugins für Photoshop und Adobe Illustrator. Mit JavaFX sollen ja auch schöne GUIs erstellt werden und hierfür bietet man Grafikern eine einfache Möglichkeit dies in ihren bekannten Umgebungen zu erstellen. Wie gut diese Plugins funktionieren, kann ich leider nicht sagen.

Für Eclipse-Nutzer gibt es ein veraltetes Plugin [5], hier ist zu hoffen, dass demnächst eine aktuellere Version veröffentlich wird.

Mit Netbeans kann man jedenfalls recht einfach erste JavaFX Anwendungen realisieren. Für die grafische Darstellung kann man eine Palette von vorhandenen Mustern, Transformationen etc nutzen. Jedoch gibt es hier keinen visuellen Designer. Die Palette beinhaltet nur Code-Fragmente, die in den existierenden Code eingefügt werden können. Ob es hier einen Designer geben wird, ist fraglich, da entsprechen Photoshop/Illustrator Plugins existieren.

Features

Die Features dürfen nun auch nicht vergessen werden:

• RIA Plattform für verschiedene Endgeräte
• Einfache Integration für Grafiker
• Gute Unterstützung von Grafiken, 2D, 3D, Video, Audio
• Zugang zu Java-Bibliotheken

Für weitere Details sei auf die Überblicks-Seite in [1] verwiesen.

Links:
[1] JavaFX Überblick: http://javafx.com/about/overview/
[2] JavaFX Getting Started with the Technology: http://javafx.com/docs/gettingstarted/javafx/
[3] Java SE 6 Update Release Notes: http://java.sun.com/javase/6/webnotes/6u11.html
[4] JavaFX Download (for Windows): http://javafx.com/downloads/windows.jsp
[5] OpenJFX Eclipse Plugin v0.0.2: http://download.java.net/general/openjfx/plugins/eclipse/
[6] JavaFX API: http://java.sun.com/javafx/1/docs/api/index.html
[7] JavaFX Script Language: http://java.sun.com/javafx/1/tutorials/core/
[8] JavaFX Language Reference: http://openjfx.java.sun.com/current-build/doc/reference/JavaFXReference.html
[9] JavaFX Blog: http://blogs.sun.com/javafx/

var ar1 = new Array();
ar1[2] = 'A';
ar1[13] = 'B';
ar1[23] = 'C';

var out = '';
ar1 = ar1.compact();
ar1.each(function(item, index) {
  out += index + ': ' + item + ', ';
});
// => out = 0: A, 1: B, 2: C, 

out = '';
for(i in ar1) {
  if( (typeof ar1[i]) != 'function' )
    out += i + ': ' + ar1[i] + ', ';
}
// => out = 2: A, 13: B, 23: C, 

var ar2 = {
 a: 'Part_1',
 b: 'Part_2',
 sum: 'Part_1_2'
};

out = '';
for(a in ar2) {
 out += a + ': ' + ar2[a] + ', ';
}
// => out = a: Part_1, b: Part_2, sum: Part_1_2,

Der IE gibt folgendes aus:

// 1.output: 0: undefined, 1: undefined, 2: A, 3: undefined, 4: undefined, 5: undefined, 6: undefined, 7: undefined, 8: undefined, 9: undefined, 10: undefined, 11: undefined, 12: undefined, 13: B, 14: undefined, 15: undefined, 16: undefined, 17: undefined, 18: undefined, 19: undefined, 20: undefined, 21: undefined, 22: undefined, 23: C, 

// 2.output: 2: A, 13: B, 23: C,
// 3.output: a: Part_1, b: Part_2, sum: Part_1_2,

Wie man beim 1. Output sehen kann, werden die Lücken mit angezeigt.
Dies kann man verhindern, in dem man das Array zusammenfasst und das geht z.B. mit der Prototype Funktion Array.compact().
Also ein

 ar1 = ar1.compact();

hilft hier.

Bei der zweiten Variante werden die korrekten Indizes beibehalten. Hier muss man jedoch bedenken, dass man durch das ganze JavaScript Object iteriert und einem meistens die Funktionen nicht interessieren.

Und das letzte Beispiel zeigt, dass dies auch bei einem eigenen Objekt funktioniert. Auch dort sollte man Funktions-Filter einbauen, wenn erwünscht.

Links:
[1] http://www.prototypejs.org/api/array/compact