A Simple JavaServer Faces Application

To create a JSF application, we are using NetBeans IDE 8.2. You can also refer to other Java IDEs.

Here, we are creating a project after that we will run to test it's configuration settings. So, let's create a new project fist.

Step 1: Create a New Project

Go to file menu and select new Project.

JSF Simple application 1

Select Category Java Web and Project Web Application.

JSF Simple application 2

Enter project name.

JSF Simple application 3

Select Server and Java EE Version.

JSF Simple application 4

Select JSF Framework

JSF Simple application 5

Select Preferred Page Language: Earlier versions of JSF framework are default to JSP for presentation pages. Now, in latest version 2.0 and later JSF has included powerful tool "Facelets". So, here we have selected page language as facelets. We will talk about facelets in more details in next chapter.

JSF Simple application 6

Index.xhtml Page: After finishing, IDE creates a JSF project for you with a default index.xhtml file. Xhtml is a extension of html and used to create facelets page.

JSF Simple application 7

Run: Now, you can run your application by selecting run option after right click on the project. It will produce a default message "Hello from Facelets".

We have created JSF project successfully. This project includes following files:

  1. index.xhtml: inside the Web Pages directory
  2. web.xml: inside the WEB-INF directory

Whenever we run the project, it renders index.xhtml as output. Now, we will create an application which contains two web pages, one bean class and a configuration file.

It requires the following steps in order to develop new application:

  1. Creating user interface
  2. Creating managed beans
  3. Configuring and managing FacesServlet

# 1) Create User Interface

We will use default page index.xhtml to render input web page. Modify your index.xhtml source code as the given below.

// 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"
<title>User Form</title>
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="username" value="#{user.name}" required="true" requiredMessage="User Name is required" /><br/>
<h:commandButton id="submit-button" value="Submit" action="response.xhtml"/>

Create a second web page which produce the output.

JSF Simple application 8

JSF Simple application 9

After creating response.xhtml page. Now, modify it's source code as the given below.

// response.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"
<title>Welcome Page</title>
<h2>Hello, <h:outputText value="#{user.name}"></h:outputText></h2>

# 2) Create a Managed Bean

It is a Java class which contains properties and getter setter methods. JSF uses it as a Model. So, you can use it to write your business logic also.

JSF Simple application 10

JSF Simple application 11

After creating a Java class put the below code into your User.java file.

// User.java

package managedbean;
Facelet Title
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
public class User {
String name;

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

# 3) Configure Application

To configure application, project contains a web.xml file which helps to set FacesServlet instances. You can also set your application welcome page and any more.

Below is the code of web.xml code for this application.

// web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapFacelet Titlep.FacesServlet</servlet-class>
<servlet-name>Faces Servlet</servlet-name>

Well! All set. Now run the application.

JSF Simple application 12


This is index page of the application.

JSF Simple application 13

Form validation for empty field.

JSF Simple application 14

Providing input to input text.

JSF Simple application 15

This is response page after submitting input (index) page.

JSF Simple application 16