In this post I'm going to demonstrate how JSF 2.0 "Hello World" application could be developed with the Maven 2 plugins for Jetty, Tomcat and Glassfish v3. The application consists of two pages and request scoped managed bean. The first page (
hello.xhtml ) asks the user "What's your name?", validates the input , then the second page (
response.xhtml ) greets the user with "Hi". The two pages share common layout defined in
template.xhtml and request scoped managed bean
HelloWorld.java exposed under name "hi". The titles of the pages are set with UL expression
#{hi.greetFrom('greeting passed as parameter')}. The template loads its css and also one image file with the new ResourceHandler API.
Prerequisites:
* Basic knowladge of Java and Maven 2.
* Installed Maven 2 (
http://maven.apache.org ). The sample was tested with version 2.2.1
Quick start:
The source can be downloaded from
here.
or could be checkout with subversion from:
http://sandcode.googlecode.com/svn/trunk/jsf2/helloworldRun the sample with one of the following commands :
* mvn package tomcat:run-war
* mvn package jetty:run-war
* mvn package -Pglassfish
In your browser type the URL :
http://localhost:8080/helloworldSome details :
In the
pom.xml file there are defined two profiles.
1. The first profile <id>default</id> is active by default and is needed for running the application with servlet container like tomcat or jetty.
The needed dependencies are :
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>[2.0.1,)</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>[2.0.1,)</version>
</dependency>
<dependency>
<groupId>javax.el</groupId>
<artifactId>el-api</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>org.glassfish.web</groupId>
<artifactId>el-impl</artifactId>
<version>2.2</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>
The Tomcat plugin is defined by :
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>tomcat-maven-plugin</artifactId>
<configuration>
<path>/${project.build.finalName}</path>
<!-- Embedded port -->
<port>8080</port>
</configuration>
</plugin>
Details about the Tomcat plugin you can find at :
http://mojo.codehaus.org/tomcat-maven-plugin/index.htmlThe Jetty plugin is defined by :
<plugin>
<groupId>org.mortbay.jetty</groupId>
<artifactId>maven-jetty-plugin</artifactId>
<configuration>
<!-- Delete this block to have Jetty run default port (8080) -->
<connectors>
<connector implementation="org.mortbay.jetty.nio.SelectChannelConnector">
<port>8080</port>
</connector>
</connectors>
<!-- force friendly name instead of artifact name + version -->
<contextPath>${project.build.finalName}</contextPath>
<!-- This parameter will auto-deploy modified classes. -->
<!-- You can save changes in a file or class and refresh your browser to view the changes. -->
<scanIntervalSeconds>3</scanIntervalSeconds>
</configuration>
</plugin>
Details about the Jetty plugin you can find at :
http://docs.codehaus.org/display/JETTY/Maven+Jetty+Pluginhttp://wiki.eclipse.org/Jetty/Feature/Jetty_Maven_Plugin2. The second profile <id>glassfish</id> is needed for running the application with JEE compatible server. In our case I'm using embedded Glassfish v3.
The only needed dependency is :
<dependency>
<groupId>javax.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
And the GLassfish plugin is defined by :
<plugin>
<groupId>org.glassfish</groupId>
<artifactId>maven-embedded-glassfish-plugin</artifactId>
<version>3.0</version>
<configuration>
<app>${project.build.directory}/${build.finalName}.war</app>
<port>8080</port>
<contextRoot>${build.finalName}</contextRoot>
<autoDelete>true</autoDelete>
</configuration>
<executions>
<execution>
<phase>package</phase>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
</plugin>
that plugin is binded to the 'package' phase of maven for convenience. It could be executed also with :
mvn -Pglassfish embedded-glassfish:runDetails about the glassfish plugin you can find at :
http://docs.sun.com/app/docs/doc/821-1208/gijhs?a=viewhttp://docs.sun.com/app/docs/coll/1343.9 - section "Sun GlassFish Enterprise Server v3 Embedded Server Guide"
Interesing part of the web.xml is the following context parameter :
<context-param>
<param-name>com.sun.faces.expressionFactory</param-name>
<param-value>com.sun.el.ExpressionFactoryImpl</param-value>
</context-param>
It is needed by JSF when running under tomcat or jetty, so that faces could load the UL v2.2, which is needed for passing parameters in the EL expressions in the xhtmls.
Also when running under plain servlet container the following dependency is needed:
<dependency>
<groupId>javax.el</groupId>
<artifactId>el-api</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>org.glassfish.web</groupId>
<artifactId>el-impl</artifactId>
<version>2.2</version>
<scope>runtime</scope>
</dependency>
Example of passing parameters (from
hello.xhtml):
<ui:define name="top">
#{hi.greetFrom('initial page')}
</ui:define>
Where 'greetFrom' method is defined in
HelloWorld.java :
@ManagedBean(name = "hi")
@RequestScoped
public class HelloWorld {
...
public String greetFrom(String pageName) {
return "Hello World ! ( " + pageName + " )";
}
...
}
In JSF 2.0 one of the most powerful features is the PDL (Page Description Language), and especially the possibility for encapsulating common fragmets of a page in 'templates'.
In the sample you can see the usage of the
template.xhtml :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="#{resource['css/default.css']}" rel="stylesheet" type="text/css" />
<link href="#{resource['css/cssLayout.css']}" rel="stylesheet" type="text/css" />
<title>Hello World (facelets template)</title>
</h:head>
<h:body>
<div id="top" class="top">
<div class="left"><h:graphicImage url="#{resource['delta.png']}" /></div>
<div class="right"><h2><ui:insert name="top">Top</ui:insert></h2></div>
<div style="clear:both"></div>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
</html>
in
hello.xhtml :
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
template="./template.xhtml">
<ui:define name="top">
#{hi.greetFrom('initial page')}
</ui:define>
<ui:define name="content">
<h2>What's your name?</h2>
<h:form id="helloForm" >
<h:inputText id="username" value="#{hi.name}" required="true"/>
<h:commandButton id="submit" action="response" value="Submit"/><br/>
<h:message for="username" styleClass="error"/>
</h:form>
</ui:define>
</ui:composition>
and in
response.xhtml:
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
template="./template.xhtml">
<ui:define name="top">
#{hi.greetFrom('response page')}
</ui:define>
<ui:define name="content">
<h:form id="responseform">
<h2>Hi, #{hi.name} !</h2>
<h:commandButton id="back" value="Back" action="hello" />
</h:form>
</ui:define>
</ui:composition>
More about the new features of JSF 2.0 you can read here :
http://andyschwartz.wordpress.com/2009/07/31/whats-new-in-jsf-2/
