First sample hello world example in JSF 1.2

1. JDK 1.5 or above should be installed and properly configured. In this example we are using JDK 1.6
2. Eclipse/Net Bean IDE : We are using Eclipse IDE in this Hello World JSF Example.
3. Apache Tomcat : In this example we are using Apache tomcat to run our Hello World JSF example. I would recommend to install Apache tomcat in eclipse IDE. It will make easy to create, deploy and run JSF dynamic web application.
4. Required JSF jars : jsf-api.jar and  jsf-impl.jar are required to do any JSF page. If we have installed Apache Tomcat in our Eclipse or our IDE has JSF support then these two Jars are easily available.

If you are ready with above mentioned things then we can go with our first sample Hello World Example in JSF.

1. Create A Workspace :
Open Eclipse IDE and create workspace to do first dynamic example in JSF.

2. Configure Apache Tomcat Server in Eclipse:

We are going to create our first JSF Hello World Example in this tutorial.
If we want to learn JSF tags and other components quickly and easily I would suggest to install Apache Tomcat Server in your Eclipse IDE for quick learning. We can install any other web servers in the Eclipse IDE, it depends on our feasibility. But We have to be careful about web servers which Eclipse supports. Here we are going to create JSF hello world example.
To See how to install Apache Tomcat in Eclipse IDE. Please read our tutorial “How to install Apache Tomcat In Eclipse”.

3. Create A Dynamic web Project :
To create JSF first example we need to create one dynamic web project in our Eclipse or any other IDE. See “How to create Dynamic Web Project Using Eclipse and Apache tomcat”,  Please see our complete tutorial. But JSF needs some extra effort for that you can go through this tutorial.
Please follow these steps to learn how to create stand alone hello world jsf example.
1. In Eclipse IDE go to File > New >  Select Dynamic Web Project.
2. After Selecting Dynamic Web project you have to provide project properties. We need to provide supportive jars required to compile and run a JSF application. If Apache tomcat is installed in your eclipse IDE then setting JSF jars are at fingers. Please follow these steps and see images also for your reference. We are explaining you complete configuration in Eclipse.
The process has been explained by taking screen shots. Please follow these steps.
2.1 Provide Name of Project :
In this step you have to provide the project name. see the below image. Please see the next step also before going ahead with this step.

Project Name and JSF configuration Screen

2.2 Eclipse will create web.xml for you
Please make sure “generate web.xml deployment descriptor” has been checked.

Eclipse will generate web.xml file automatically

2.3 Providing JSF capabilities :

Please find the below images. By seeing them we can configure Eclipse for JSF capabilities.

Above screen will come firstly here we have to configure Library and URL pattern for our JSF application. Just click the appropriate icon and provide the info. Please follow step 2.3.1, 2.3.2 and 2.3.3 to complete this step.

2.3.1 Providing Libraries to Eclipse
In the above image you can see the JSF implementation Library section. There you click on proper icon and select Apache Tomcat libraries. Please see the image for your reference.

Apache Tomcat Library Has been selected

2.3.2 Configuring URL path for JSF application inEclipse IDE :
You can remove url pattern /faces/* as given in the above image and you can define your own like *.faces or *.jsf . It depends on you but make sure to define url patter web.xml. If you want *.faces or *.jsf you have to declare that.

URL pattern in JSF

2.3.3 Say Finish You have all done

Setting Java Build Path

In our project we have java files. These java files will become java class files after compilation. Eclipse will compile these java files into class files at the time of creating war file. In case of dynamic web project these class files should be copied to WEB-INF/classes folder. So we have to create one classes folder in WEB-INF folder. We also need to configure Eclipse to send all compiled java classes files to classes folder. In our project this folder location will be like HelloWorldJSF/WebContent/WEB-INF/classes.

So how to do this ? First of all Right Click On Dynamic web Project > Select Java Build Path in Left Panel > Paste HelloWorldJSF/WebContent/WEB-INF/classes as shown in image.

Setting Java build Path

4. Create One JSP page :
After setting Dynamic Web Project to create a sample hello world example in JSF. We need to create one JSF page. Here we will create one JSP page and we will import JSF tags inside JSP. So let us put one more step forward towards our First Sample Hello Word JSF example.

1. Create one userForm.jsp
userForm.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello World Example In JSF Application</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGrid border="0" cellpadding="2" cellspacing="2">
<h:outputText>Your Good Name :</h:outputText>
<h:inputText
value="#{helloWorldJSFManagedBean.userFormView.userName}"></h:inputText>
</h:panelGrid>
<h:panelGroup style="text-align:center;">
<h:commandButton value="Show Welcome Note" type="submit"
action="welcomePage"></h:commandButton>
</h:panelGroup>
</h:form>
</f:view>
</body>
</html>

2. Create one welcomeToHelloWorldJSF.jsp
welcomeToHelloWorldJSF.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>First Hello World Application in JSF</title>
</head>
<body>
<f:view>
<h:panelGrid border="0" cellpadding="2" cellspacing="2">
<h:outputText
value="Welcome #{helloWorldJSFManagedBean.userFormView.userName} !"></h:outputText>
<h:outputText
value="This is our first Hello World JSF Web Application."></h:outputText>
</h:panelGrid>
</f:view>
</body>
</html>

In the above two jsp you can see  “helloWorldJSFManagedBean” has been used in both the JSP’s.
HelloWorldJSFManagedBean is nothing but Managed Bean. We will see the importance of Managed Bean in next steps.

5. Create Managed Bean For Hello World JSF Application
In any Jsf application Managed-Bean and faces-config.xml file together works as controller.
Every request will go to faces-config.xml and then to Managed Bean. In JSF application While retrieving any field value or invoking any action we use Managed Bean. So knowing Managed Bean and faces-config.xml is very important. So let us create a Managed Bean for Our Hello World Example in JSF. Here we have created Managed Bean with name HelloWorldJSFManagedBean.

HelloWorldJSFManagedBean.java

package jsfHelloWorldBean;
import java.io.Serializable;
public class HelloWorldJSFManagedBean implements Serializable{
private static final long serialVersionUID = 1L;
private UserFormView userFormView;
public HelloWorldJSFManagedBean(){
this.userFormView = new UserFormView();
}
public UserFormView getUserFormView() {
return userFormView;
}
public void setUserFormView(UserFormView userFormView) {
this.userFormView = userFormView;
}
public String showUserDetails(){
System.out.println("The Name Of the user is :"+this.userFormView.getUserName());
return "welcomePage";
}
}

6. Create UserFormView.java file

package jsfHelloWorldBean;
public class UserFormView {
private String userName;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
}

7. Create faces-config.xml  file
In this step we will create our faces-config.xml file for our Hello World Example in JSF.
Faces-config file very useful in JSF application. Every request handles by faces-config.xml same as struts-config.xml in struts. Below given code is faces-config.xml for our Hello World JSF Example.
faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>helloWorldJSFManagedBean</managed-bean-name>
<managed-bean-class>jsfHelloWorldBean.HelloWorldJSFManagedBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<display-name>UserForm</display-name>
<from-view-id>/userForm.jsp</from-view-id>
<navigation-case>
<description>welcome page hello word jsf example</description>
<from-outcome>welcomePage</from-outcome>
<to-view-id>/welcomeToHelloWorldJSF.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

8. Check your web.xml file
This is the web.xml file for our Hello World JSF Example.
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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>HelloWorldJSF</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</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>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<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>server</param-value>
</context-param>
<context-param>
<description>
This parameter tells MyFaces if javascript code should be allowed in
the rendered HTML output.
If javascript is allowed, command_link anchors will have javascript code
that submits the corresponding form.
If javascript is not allowed, the state saving info and nested parameters
will be added as url parameters.
Default is 'true'</description>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>
If true, rendered HTML code will be formatted, so that it is 'human-readable'
i.e. additional line separators and whitespace will be written, that do not
influence the HTML code.
Default is 'true'</description>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>
If true, a javascript function will be rendered that is able to restore the
former vertical scroll on every request. Convenient feature if you have pages
with long lists and you do not want the browser page to always jump to the top
if you trigger a link or button action that stays on the same page.
Default is 'false'
</description>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.numberOfViewsInSession</param-name>
<param-value>500</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.numberOfLogicalViews</param-name>
<param-value>500</param-value>
</context-param>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
</web-app>

9. Project Hierarchy
This is the project hierarchy of the eclipse IDE in case of this first Hello World JSF Example.

Hello World JSF Application Project

10. Deploy war to Apache Tomcat Server
In this step we will create and deploy war of our Hello World JSF application.
In this step you need to deploy war to apache tomcat server. Afte deploying war we need to start the server. If you want to know how to deploy war to Apache Tomcat Server and How to start Tomcat Server in eclipse IDE, Please see our complete tutorial – How to create Dynamic Web Project Using Eclipse and Apache tomcat.

11. Run The Dynamic Web Application In Web Browser
Once the war has been deployed and server started. We can see our Hello World JSF Example in internet  Explorer. Let us run our first Hello World JSF Example using Internet Explorer.
Type “http://localhost:8080/HelloWorldJSF/userForm.faces”  in the internet explorer then see the ouput screen.
Out put screen will look like this

Output Screen : JSF Hello World Example

In this output screen you provide you good name and then click on “Show Welcome Note” button. You will receive the image like this.

Welcome Screen