JSF Example Using JSF 2.0, eclipse, and maven

June 22, 2014 by Mukesh Kumar at 3:47 pm

In this article I will show you how to create a simple JavaServer Faces (JSF) Web application starting from zero with Eclipse and Maven.

In this tutorial, JSF is used to create a simple greeting web application to run on the Tomcat server. It also demonstrates how Maven brings in the relevant dependent JAR files.

Tools used :

JSF 2
Maven 3
Eclipse
JDK 1.6
Tomcat 6.0

Step 1 : Create Web Application Project using Maven Template

Create a Java web application project from “maven-archetype-webapp” template.

In this article I will show you how to create a simple JavaServer Faces (JSF) Web application starting from zero with Eclipse and Maven.

In this tutorial, JSF is used to create a simple greeting web application to run on the Tomcat server. It also demonstrates how Maven brings in the relevant dependent JAR files.

Tools used :

JSF 2
Maven 3
Eclipse
JDK 1.6
Tomcat 6.0

Step 1 : Create Web Application Project using Maven Template

Create a Java web application project from “maven-archetype-webapp” template.

mvn archetype:generate -DgroupId=com.javawebtutor -DartifactId=JSFWebAppEx -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

maven jsf project

Step 2 : Eclipse IDE integration

Convert this project to Eclipse web project with Maven command “mvn eclipse:eclipse -Dwtpversion=1.5".Open command prompt and navigate to generated "JSFWebAppEx" project and issue following command.

mvn eclipse:eclipse -Dwtpversion=1.5

Step 3 : Import the Project into eclipse

Import the project into eclipse IDE. Directory structure of projects is given bellow.

maven jsf project

Step 4 : Add JSF 2.0 Dependencies in pom.xml

Add JSF dependency like jsf-api-2.1.3.jar, jsf-impl-2.1.3.jar, el-ri-1.0.jar, jsf-facelets-1.1.14.jar , jsp-api-2.1.jar, and so on in the pom.xml.

For Java EE Application Server like Glassfish

In most Java EE application servers, it has build-in support for JSF 2.0, so you need to download the single JSF API for development purpose.

...
<dependencies>
  <dependency>
    <groupId>javax.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>2.0</version>
    <scope>provided</scope>
  </dependency>
</dependencies>
<repositories>
  <repository>
    <id>java.net.m2</id>
    <name>java.net m2 repo</name>
    <url>http://download.java.net/maven/2</url>
  </repository>
</repositories>
...

For simple servlet container like Tomcat

For tomcat server you need to download following dependencies.

pom.xml

<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.javawebtutor</groupId>
	<artifactId>JSFWebAppEx</artifactId>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>JSFWebAppEx</name>
	<url>http://maven.apache.org</url>
	<dependencies>

		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.1.7</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.1.7</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
		</dependency>
		<!-- Tomcat 6 need this -->
		<dependency>
			<groupId>com.sun.el</groupId>
			<artifactId>el-ri</artifactId>
			<version>1.0</version>
		</dependency>

	</dependencies>
	<build>
		<finalName>JSFWebAppEx</finalName>
	</build>
</project>

After updating the pom.xml again execute "mvn eclipse:eclipse -Dwtpversion=1.5". After executing this command Maven will download required libraries.

Step 5 : Create java directory :

Create a directory named java under main."/src/main".

Note:-If created java directory is not in class path of project,we need to add this directory to class path of your project.

Step 6 : Add java directory to classpath of the Project :

Right click on Project -> Build Path -> Configure build path.a new screen will open in that screen click on Source tab and then click on Add folder as shown bellow.

maven jsf web project

Again one new screen will open and in that screen select the java checkbox and click on ok again OK as shown bellow.

maven jsf web project

Now Java folder is in classpath of project.

Step 7 : Create JSF Managed Bean

A Managed Bean is a regular Java Bean class, registered with JSF. In other words, Managed Bean is a java bean, managed by the JSF framework.From JSF 2.0 and onwards, we can declare a managed bean, just by using the annotation @ManagedBean.

Create a package com.jwt.jsf.bean in java folder and create a class PersonBean in that package.Add bellow lines of code in this class.PersonBean is Managed bean class.

package com.jwt.jsf.bean;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class PersonBean {

	private String name;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

Note:- In JSF 1.x, you had to declare this beans in the faces-config.xml, but this is no longer required in JSF 2.0. We declare this beans using annotation.

Step 7 : Create properties file

Create a package com.jwt.jsf.properties inside src/main/resources folder and create a properties file messages.properties inside this package and add following code into this.

header=Welcome to javawebtutor.com
greeting_text=Welcome to javawebtutor.com
button_text=Hello
sign=!
welcome_msg=This is Welcome Page

Step 8 : Create JSF Pages

In JSF 2.0, it’s recommended to create a JSF page in XHTML file format, a file with a .xhtml extension.Create .xhtml file inside webapp directory of Project.

Right click on the webapp folder
Select New => HTML File (if you can’t find it, just select Other and the wizard will guide you through it).
In the File Name, type index.xhtml and hit Next.
Select the xhtml 1.0 strict template.
Hit Finish.

index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<f:loadBundle basename="com.jwt.jsf.properties.messages" var="msg" />

<h:head>
	<title>JSF 2.0 Greeting</title>
</h:head>
<h:body>
	<h3><h:outputText value="#{msg.header}" /></h3>
	<h:form>
		<h:inputText id="name" value="#{personBean.name}"></h:inputText>
		<h:commandButton value="greeting" action="welcome"></h:commandButton>
	</h:form>
</h:body>
</html>

welcome.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"  
      xmlns:h="http://java.sun.com/jsf/html">
    
 <f:loadBundle basename="com.jwt.jsf.properties.messages" var="msg" />  
  
    <h:head>
     <title>JSF 2.0 Hello World</title>
    </h:head>
    <h:body bgcolor="white">
     <h3><h:outputText value="#{msg.welcome_msg}" /></h3>
     <h4><h:outputText value="#{msg.greeting_text}" />
      #{personBean.name}
  <h:outputText value="#{msg.sign}" /></h4>
    </h:body>
</html>

Step 9 : JSF 2.0 Serlvet Configuration

In this step we will configure JSF via the web.xml file which is found under src/main/webapp/WEB-INF.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>JSF</display-name>
  <welcome-file-list>
    <welcome-file>faces/index.xhtml</welcome-file>
  </welcome-file-list>
  <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>/faces/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
  </context-param>
  <listener>
    <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
  </listener>
</web-app>

In the web.xml file we have defined our index.xhtml page, as the welcome page that will be displayed, when the project’s URL, will be accessed.

After that we defined a javax.faces.webapp.FacesServlet mapping and mapped the application to the most used JSF file extensions (/faces/*, *.jsf, *.xhtml, *.faces).

In this case, the below 4 URLs are pointing to the same index.xhtml.

http://localhost:8080/JSFWebAppEx/index.jsf
http://localhost:8080/JSFWebAppEx/index.faces
http://localhost:8080/JSFWebAppEx/index.xhtml
http://localhost:8080/JSFWebAppEx/faces/index.jsf

In JSF 2.0 development, it’s recommended to set the “javax.faces.PROJECT_STAGE” to “Development“, it will provide many useful debugging information to let you track the bugs easily. For deployment, just change it to “Production“, you just do not want your customer to look at this annoying debugging information :).

Final Structure Of Project

Final structure of project is given bellow:

maven jsf web project

Step 10 : Build the project

Open command prompt and navigate to "StrutsWebApp" project and issue mvn:package command.

mvn package

After executing above command "JSFWebAppEx.war" file will generate in target folder of the project.

Step 11 : Run it

Copy the generated "JSFWebAppEx.war" file from target folder to your tomcat webapp folder and start the server. After successful start of server open web browser and enter http://localhost:8080/JSFWebAppEx/ in URL bar we will see following output.

maven jsf web project

You will get the welcome.xhtml page as shown below. the URL will still stay the same as this is a page "forward". If you want the URL to change, then you need to do a "sendredirect" by defining the navigation rule in the faces-config.xml.

maven jsf web project