JSF 2.2 Hello World

In this tutorial, we will create our first JSF Hello World application.

 

1. Technologies used

  • JSF 2.2.8
  • Maven 3.0.5
  • Eclipse 4.2
  • JDK 1.6
  • Tomcat 7.0

 

2. Project structure

We create a maven based web application project.

JSF2.2-Hello-World-1

 

3. JSF 2.2 dependencies

We add the JSF dependencies in Maven’s pom.xml file.

Then, we run the command : mvn clean install to download JSF libraries and put them into Maven’s local repository.

 

4. Managed Bean

Managed Bean is a Java class registered with JSF and so managed by JSF framework.

It is used as model for UI components and it can be accessed by JSF page.

To register a managed bean, we can use either annotations or JSF configuration file (faces-config.xml).

In this tutorial, we will use annotations to register our Student bean.

 

5. JSF pages

They represent the view of the JSF MVC pattern.

File : index.xhtml

#{student.name}  means that the input text will be linked to the name attribute of Student bean.

The action attribute in the button tag is used to tell the browser where to navigate,  so, when the button is clicked, we will be redirected to hello.xhtml page. In the same time the inputText ‘s value will be submitted to Student bean through the setName(..) method.

File : hello.xhtml

In this page, JSF will display the name property value of Student bean through the getName() method.

 

6. Web app configuration

Now, we will configure the web server part of our application using web.xml file.

The most important part in web.xml is the Faces Servlet that handles the incoming requests.

We must also define the mappings for the Faces Servlet using servlet-mapping tag. In our case, we say that all URLs having the extensions .xhtml or.jsf will be processed by the Servlet.

File : web.xml

We defined the index.xhtml as the home page.

 

7. Test It

URL : http://localhost:8080/JSF2.2-Hello-World/index.jsf

JSF2.2-Hello-World-2

We enter a name and click the button.

JSF2.2-Hello-World-3

 

Download source code