JavaServer Faces (JSF) 2.0: Hello World Example

To start with any tutorial is to start Hello World Example. In this tutorial we will see JSF 2.0 Hello World Example below

  Download Source code for tutorial

Setup Development Environment For JSF 2.0 Hello World Example

To start with JavaServer Faces Hello World Example, you need to setup development environment. Below list shows you, how to setup tutorial’s development environment, dependencies and basic configurations.

Creating JavaServerFaces Project in Eclipse

Step 1 : Create New Dynamic Web Project

  • Create New Dynamic Web Project by clicking File àNewà Dynamic Web Project and give project name as “JavaServerFaces”.
  • Select the target runtime. If there is no target runtime already created, click on New Runtime button and create the target runtime. This is the target server where your application will be running.
  • Select Dynamic Web module version as 3.0
  •  Select Configuration as JavaServer Faces v2.0 Project
  • Click Next

Please see below screenshot for step 1.

JSF Eclipse Project

Step 2 : Configure project for building a Java application.

  • Select Source ( src) and output folder as show in below screenshot.


Step 3 : Configure web module settings.

  • Select default values for context root and context directory.
  • Select Generate web.xml deployment descriptor checkbox.
  • Click on finish button to create the JSF Project in eclipse workspace.


Final project structure, in case you get lost or confused about the creation of project files –

JSF 2.0 Servlet Configuration in web.xml

To run the JSF 2.0 application, you need to configure the JSF servlet in web.xml, similar to any other web framework.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="" xmlns="" xmlns:web="" xsi:schemaLocation="" id="WebApp_ID" version="3.0">
  <display-name>JavaServer Faces 2.0 Hello World Application</display-name>

  <!-- Change to "Production" when you are ready to deploy -->

  <!-- Welcome page list -->

  <!-- JavaServer Faces Servlet -->
	<servlet-name>Faces Servlet</servlet-name>

  <!-- Servlet Mapping to URL pattern -->
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-name>Faces Servlet</servlet-name>


Add “javax.faces.webapp.FacesServlet” servlet and map it to different URL patterns as below –

  • *.xhtml
  • *.jsf
  • *.faces

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

JSF 2.0 Managed Bean

Managed bean is nothing but a regular java bean which has received as fancy name in JSF terminology. Whenever a bean is registered with the JavaServer Faces it becomes a managed bean. Managed beans are used as a model for UI components. Prior to JSF 2.0, managed bean was registered in faces-config.xml but now in JSF 2.0, there is no need to declare managed bean in the config xml file. Instead in JSF 2.0 managed beans are registered using @managedbean annotation.

Create a managed bean in package com.kodehelp.jsf as below. You can prefer any package name.

package com.kodehelp.jsf;


import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

public class HelloWorldBean implements Serializable {

	private static final long serialVersionUID = 1L;

	private String firstName;

	private String lastName;

	public String getFirstName() {
		return firstName;

	public void setFirstName(String firstName) {
		this.firstName = firstName;

	public String getLastName() {
		return lastName;

	public void setLastName(String lastName) {
		this.lastName = lastName;


JSF 2.0 UI Pages

The standard for creating the UI pages is in .xhtml format and this is recommended in JSF.

I will be writing on UI Tags soon. Please keep watching

To use JSF tags in UI page you need to include below namespaces in the html tag –

<html xmlns="" xmlns:ui="" xmlns:h="" xmlns:f="">

To use file you need to add below JSF tag –

<f:loadBundle basename="resources.application" var="msg"/>

And you a can use as the as shown below –

# -- welcome --
welcomeTitle=JSF Hello World Application


welcomeMessage=This is a JSF Hello World application. \
	Please Enter your First Name and Last Name below.


helloMessage=This is a JSF Hello World application. \
	Enjoy your JSF Learning and there is much more to learn in JSF 2.0. \
	Please stay with Vigilance series of JSF 2.0 Tutorial at


    <title><h:outputText value="#{msg.welcomeTitle}" /></title>

File: index.xhtml – 

  • Renders 2 outputText which shows the property value from file.
  • Renders 2 outputLabel for First Name and Last Name.
  • Renders 2 textbox for firstName and lastName which are attached with respective managed bean property.
  • Renders a button which displays hello.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" xmlns:ui="" xmlns:h="" xmlns:f="">

<f:loadBundle basename="resources.application" var="msg"/>

    <title><h:outputText value="#{msg.welcomeTitle}" /></title>


<h3><h:outputText value="#{msg.welcomeHeading}" /></h3>

<h:outputText value="#{msg.welcomeMessage}" />

  <h:panelGrid columns="2">
   <h:outputLabel for="firstName">First Name *</h:outputLabel>
   <h:inputText id="firstName" value="#{helloWorldBean.firstName}"></h:inputText>

   <h:outputLabel for="lastName">Last Name *</h:outputLabel>
   <h:inputText id="lastName" value="#{helloWorldBean.lastName}"></h:inputText>

    <h:commandButton value="Submit" action="hello"></h:commandButton>


File: hello.xhtml – This page renders the value from the managed bean for First name and Last Name entered on the index.xhtml.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xmlns:f="" xmlns:h="">
<f:loadBundle basename="resources.application" var="msg"/>

    <title><h:outputText value="#{msg.welcomeTitle}" /></title>

<h3><h:outputText value="#{msg.helloHeading}" />&nbsp;#{helloWorldBean.firstName}&nbsp;#{helloWorldBean.lastName}</h3>

<h:outputText value="#{msg.helloMessage}" /><a href=""></a>


The #{ } indicate as a JSF expression language, in this case, #{helloWorldBean.firstName} and #{helloWorldBean.lastName}, when the page is submitted, JSF will find the “helloWorldBean” and set the submitted textbox value via the setFirstName() method. When hello.xhtml page is displayed, JSF will find the “helloWorldBean” and displays the firstName and lastName property value via the getFirstName() and getLastName() methods respectively.

Running the JSF 2.0 Hello World Application

To run this application from eclipse, right click on the project à Run As à Run On Server

Select the tomcat 7.0 server and run the application.

Go to url http://localhost:8080/JavaServerFaces/ for view the page.

JSF 2.0 Hello World Example



  1. Deekay says:

    Any Suggestions are welcomed 🙂

  2. Deekay says:

    Any comments, suggestion are most welcomed 🙂

    • Henk says:

      One small “mistake” that a lot of tutorials make: There’s no need to use an h:outputText if there’s no styling or escaping going on. Just put e.g. #{msg.welcomeTitle} directly on the Facelet.

      Also f:loadBundle is rare to put directly on every Facelet, you’re much better of declaring this globally (in faces-context.xml).

      Yet another point is to compress tags with empty bodies. Your outputLabel, inputText and commandButton tags all have empty bodies. Better not to do this, it adds to the verbosity for no extra gain.

      Finally, your title says JSF 2.0, but you’re pointing to a snapshot version of the not-yet-released JSF 2.2.

      Otherwise, keep up the good work! 🙂

  3. Dennis P says:

    Nicely articulated the tutorial for Java Server Faces (JSF) 2.0. This is a good resource for newbie to kick-start their JSF learning.

  4. Bharath says:

    Very good article for kick start……………keep up the good work…

  5. G says:

    I’m unable to navigate to index.xhtml no matter what I try

Please Post Your Comments & Reviews

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.