Getting Starting with JSF 2.0 - A First Example

October 2nd, 2009  | Tags:

JSF 2.0 specification has already been approved, however its official version is gonna be released with JEE 6.
Although its stable version has not been released, we can get started with some examples and get familiar with the new changes, by the way, a lot of changes.
If you’re interesting about JSF 2.0 and would like to test an example, this post may be useful for you.

Creating the web project

The first thing to do is creating a web project. As usual, we’re going to use Maven to do that. Type the following onto console.

mvn archetype:create \
 -DgroupId=com.jairrillo \
 -DartifactId=JSF2FirstExample \
 -DarchetypeArtifactId=maven-archetype-webapp

After that, edit the pom.xml file and add the content below:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.jairrillo</groupId>
	<artifactId>JSF2FirstExample</artifactId>
	<packaging>jar</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>JSF2FirstExample</name>
	<url>http://maven.apache.org</url>
	<build>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.0.2</version>
				<configuration>
					<target>1.6</target>
					<source>1.6</source>
				</configuration>
			</plugin>
		</plugins>
	</build>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.7</version>
			<scope>test</scope>
		</dependency>
	</dependencies>
</project>

Note: We didn’t setup the JSF’s libraries. Unfortunately the JSF 2 JAR files aren’t within the maven repository yet. We’ll copy them yourself.

Downloading JSF 2.0

Go to the official java server faces page and there download the lastest version. http://java.sun.com/javaee/javaserverfaces/. When I wrote this topic, the latest version was the mojarra-2.0.0-SNAPSHOT-binary version.
Probably you’re going to download a .zip file. After extract it, copy the jsf-api.jar and jsf-impl.jar to the project/src/main/webapp/WEB-INF/lib.

Modifying the XML

We must change the web.xml file and tell to the project that we’re going to use JSF 2.0. To do that, simply edit the web.xml file and add the following entries:

	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
	</servlet>
 
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.jsf</url-pattern>
	</servlet-mapping>

That’s all about setting up, but what about the faces-config.xml? That’s a good news, no longer the faces-config.xml is needed!!!
Now we can register a managed bean through annotation and use convention over configuration for navigation. JSF 2.0 is much easier than its old version.

Coding the project

It’s time to have fun, let’s coding. But before get started, let’s understand our application. It is a simple application, it has 2 pages (principal and success) and one managed bean. The principal page has a form with one field. It calls the managed bean and then the success page is opened. Success page can open the principal page directly, no navigation rule is needed.

Changing the current index.jsp file

When we had used the webapp archetype to create the project for us, a index.jsp file had also been created. Edit it and put the following content:

<html>
  <body>
    <jsp:forward page="principal.jsf" />
  </body>
</html>

Now, let’s create a new file. Its name should be principal.xhtml. Here we’ve got a new feature. By default, JSF 2 has facelets as engine, therefore we’re using the xhtml extension. The content of the principal.xhtml is:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
    <f:view>
        <h2><h:outputText value="This is our first JSF 2.0 example" /></h2>
        <h:form>
        	Name: <h:inputText value="#{helloWorld.name}" />
        	<h:commandButton action="#{helloWorld.doSomething}" value="Something is gonna happen" />
        </h:form>        
    </f:view>
</h:body>
</html>

Note: We’ve got a new tag there!! h:body. JSF 2.0 brings new tags, such as: h:body, h:head, h:link, etc.
Nothing special in the file above. We’ve got a simple form with one field. This field uses the managed bean helloWorld and it is binding with the name attribute. Now, let’s create/implement this ManagedBean.

Creating the ManagedBean

By default, the folder src/main/java is not created by this maven archetype (honestly, I have no idea why), therefore, let’s create it ourself.
After that, create a HelloWorldMBean.java class with the following content:

package com.jairrillo.mbeans;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
 
@ManagedBean(name="helloWorld")
@RequestScoped
public class HelloWorldMBean {
 
	private String name;
 
	public String doSomething() {
		name = name.toUpperCase();
		return "success";
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

Stop now, take a breath and let’s analyse three lines of the code above.
First of all, look at the @ManagedBean annotation. This is the annotation responsible to register the MBean. If you have already used JSF 1.2 + Spring, this annotation is not new. Also, we have a @RequestScoped annotation. You can guess there are other annotation for the other different scopes as well.
Check the return of the doSomthing method. It returns a String with the name success, which means the JSF 2.0, through convention over configuration, looks for a success.xhtml page and try to open it. That’s awesome, huh?

Creating the success.xhtml

Finally, create a success.xhtml file and put the content:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
    <f:view>
    	<h2><h:outputText value="Success page"/></h2>
    	<h:outputText value="Your name in uppercase is: "/>
    	<h:outputText value="#{helloWorld.name}" /><br />
    	<h:link value="Back do Principal" outcome="principal" />
    </f:view>
</h:body>
</html>

Stop again. What does h:link do? It’s another new feature from JSF 2.0. Different than its version 1, that all requests were POST, with JSF 2 we can use GET instead. h:link creates a simple a href on the page.

Running the application

If you reach this point, you will be able to run the application. I have tested in Tomcat 6 and Glassfish v2 and worked in both.

Conclusion

Certainly JSF 2 is easier than version 1. The JCP learned with the mistakes from version 1 and created a new version better. No doubt that this new version is gonna be more productive and funny.

This topic ends up here. You can download the First Example project HERE.
If you have any comment/question or feedback, leave your message below.

Thanks guys.

Leave a comment | Trackback
« (pt-BR) Ubuntu - Configuração do GRUB JSF 2.0 and AJAX example »
  1. Koiti
    February 26th, 2010 at 15:57
    #1

    Thanks a lot! great tutorial!

  2. Alexandre Ferreira
    September 7th, 2010 at 01:46
    #2

    Gostei Jair!

TOP