Javatpoint Logo
Javatpoint Logo

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.

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

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 file.


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

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

Next TopicJSF Ui components

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA