JSF Example with Eclipse and Tomcat

YatinApril 28th, 2017Last Updated: May 9th, 2019

3 2,009 4 minutes read

In this example, we will learn how to configure a JSF example with eclipse and tomcat. We will discuss the tools used and steps required to configure your first JSF enabled sample application.

1. Introduction

JSF is an MVC framework that eases the user interfaces for server based applications by reusable UI components. It facilitates Web application development by:

Providing reusable UI components
Easy data transfer between UI components
Manage UI state across multiple server requests
Enable implementation of custom components
Wire client side event to server side application code

The application is similar to any other Java based web application. It runs in a Java servlet container and contains:

JavaBeans components as models
A custom tag library for representing event handlers, validators and rendering UI components
Server-side helper classes and controllers to perform the user actions
Validators, event and navigation handlers
Application configuration resource file

2. JSF Example with Eclipse and Tomcat

2.1 Tools Used

Our preferred environment is Eclipse. We are using Eclipse Kepler SR2, JDK 8 (1.8.0_131) and Tomcat 7 application server. Having said that, we have tested the code against JDK 1.7 and it works well.

2.2 Project Structure

First, let’s review the final project structure, in case you are confused about where you should create the corresponding files or folder later!

JSF Example - jsf-project-structure-new — jsf-sample-application-project-structure

2.3 Project Creation

In this section, we will see how to create a Java project with Eclipse. In eclipse IDE, go to File -> New -> Dynamic web project

JSF Example - jsf-project-guide-19 — fig. 1 – Create Dynamic Web Project

In the “New Dynamic Project” window fill in the below details and click next

Enter the project name and project location
Select “Target runtime” as “Apache Tomcat v7.0” from dropdown
Select “Configuration” as “JavaServer Faces v.2.2 Project“ from dropdown (this is required to download the java server faces capabilities in your project)

JSF Example - jsf-project-guide1 — fig. 2 – Project Details

Leave everything as default in this window as we are not making any java files for the hello-word application. Simply click next and we will land up on the web-module window

JSF Example - jsf-project-guide-8 — fig. 3 – Java Src Window

In the Web Module window, leave the context_root and content_directory values as default (however, you can change the context_root but for the first application let’s keep it as a default value). Simply, check “Generate web.xml deployment descriptor” checkbox and click next

JSF Example - jsf-project-guide2 — fig. 4 – Web Module Window

In the JSF Capabilities windows, we will require downloading the dependencies (not available by default) so that our project is configured as a JSF module in Eclipse. Add the JSF capabilities to the web project by clicking on the download icon (encircled in fig. 5) and download the JSF 2.2 mojara implementation.

JSF Example - jsf-project-guide-11 — fig. 5 – JSF Capabilities Window

A new pop-up window will open where it will auto lists down the JSF library. Select the JSF 2.2 library and click next (the library name and download destination will be auto populated).

JSF Example - jsf-project-guide-10 — fig. 6 – JSF Capabilities Download Window

Check the license checkbox and click finish. Eclipse will download the JSF 2.2 library and will display them on the JSF capabilities windows (i.e. Step5)

JSF Example - jsf-project-guide-12 — fig. 7 – JSF Capabilities License Window

Now the JSF implementation libraries will be listed down on the capabilities page. Select the checkbox (JSF2.2 (Mojarra 2.2.0)) and leave everything else as default. Click finish.

JSF Example - jsf-project-guide-13 — fig. 8 – JSF Capabilities Library Selection Window

Eclipse will create the project named JSF HelloWorld in the workspace and web.xml will be configured for accepting the JSF requests. It will have the following code

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 HelloWorld</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</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>
	<context-param>
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
		<param-value>resources.application</param-value>
	</context-param>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

Once the project is created in the eclipse workspace, we can start building our first application. Right click on WebContent -> New -> File

In JSF 2.0, it’s recommended to create a JSF page in XHTML format, a file format with a .xhtml extension

JSF Example - jsf-project-guide-18 — fig. 9 – File Creation

A pop-up window will open, verify the parent folder location as JSF HelloWorld/WebContent and enter the file name (hello-world.xhtml) and click Finish.

JSF Example - jsf-project-guide-16 — fig. 10 – hello-world.xhtml

Repeat the where we need to create the file for our application (i.e. fig. 9). Again, verify the parent folder location as JSF HelloWorld/WebContent and enter the filename (myresponse.xhtml) and click Finish.

JSF Example - jsf-project-guide-17 — fig. 11 – myresponse.xhtml

Required files will be created in the WebContent folder of the project and now the project structure will look like as per fig. 12

JSF Example - jsf-project-structure-fig. 12 — fig. 12 – Project Layout

Now in order to use the JSF component tags, we need to declare the below namespaces at top of the page in the prepared files.

xmlns:c="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"

Here in the input file, #{theUserName} means that the input text will be linked to the name on the response page. The action attribute in the button tag will tell the browser where to navigate for output. Add the following code to it –

hello-world.xhtml

<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
	<h:head>
		<title>Hello World - Input Form</title>
	</h:head>
	<h:body>
		<h:form>
			<h:inputText id="name" value="#{theUserName}"
				p:placeholder="What's your name?" />
			<h:commandButton value="Submit" action="myresponse" />
		</h:form>
	</h:body>
</html>

In this page, JSF will display the #{theUserName} property value which we set in the input page (i.e. hello-world.xhtml). Add the following code to it.

myresponse.xhtml

<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">
	<h:head>
		<title>Hello World - Response</title>
	</h:head>
	<h:body bgcolor="white">
		<h4>Hello, #{theUserName}</h4>
	</h:body>
</html>

As we have now successfully configured the required code for our application, we are ready to deploy it on the Tomcat7 to test it and understand how the application works.

2.4 Project Deploy

Now, let’s deploy the project on tomcat application server. In order to deploy the application on tomcat7, right-click on the project and navigate to Run as -> Run on Server

JSF Example - jsf-project-guide-14 — fig. 1 – How To Deploy Application On Tomcat

Tomcat will deploy the application in its webapps folder and shall start its execution to deploy the project so that we can go ahead and test it on the browser.

JSF Example - Tomcat Processing — Tomcat Processing

Open your favorite browser and hit the following URL. The output page will be displayed

http://localhost:8082/JSF_HelloWorld/faces/hello-world.xhtml

Server name (localhost) and port (8082) may vary as per your tomcat configuration

2.5 Project Demo

When we will hit the application url, the input page will be displayed where you need to enter text in the textbox.

JSF Example - jsf-project-guide6 — demo-fig. 1 – Input Page

Hit the submit button and that’s it, the page should display hello world message now.

JSF Example - jsf-project-guide7 — demo-fig. 2 – Output Page

Hope this helped!

3. Conclusion

Through this example, we have learned on how to configure a hello-world JSF application in eclipse and deploy it using the tomcat7 application server.