Simple JSF Hello Application

This is the simplest JSF application that enables even a novice to understand easily the steps to follow to create own JSF application. In this example we will explain all you need, to develop this application like how to use JSF tags in JSP pages, how to configure the application through faces-config.xml, and web.xml, directory structure of the application etc. A detailed explanation of this example will definitely form a basis for you to develop your own JSF application with more advanced functionality of JSF.

In this application the first page that comes in front of user contains an input text and a command button components. User enters name in the input text and press the button. As soon as the button is pressed next page is shown with the greeting content to the user.

Steps Followed :

We will follow the following steps to create this application :

1. Create development directory structure (root directory and sub directories)
2. Create and place configuration files in appropriate place
3. Create JSP pages
4. Create a properties file
5. Create a managed bean
6. Register managed bean in configuration file
7. Define a navigation rule in configuration file
8. Run the application

To understand clearly where to place which file, directory structure of this application will help you a lot. So have a look on it below:

Directory structure of this application :

Application Name: SimpleHelloByEnteringName

Create and place directories, configuration files :

In this application we used JDK 1.6.0 and TOMCAT 5.5.23 to deploy and run this application. Install and configure TOMCAT for JSF.

Directories :
In tomcat, web applications are placed within webapps folder. Now we are going to start creating "SimpleHelloByEnteringName" application so the first step is to create a folder in web apps with the name "SimpleHelloByEnteringName". This is the root directory of the application. Now create WEB-INF folder in root directory and place web.xml and faces-config.xml file.

Configuration files :

1. web.xml :
   
   You can get web.xml file from WEB-INF folder of any other application available in TOMCAT by default or you can create yourself with the same name and extention of the file i.e. "web.xml". If you are creating this file then take care of mentioning version of xml. For ex. at the top of file and after that all elements will be written within web-app opening and closing tag i.e. and . So the root element of this file is <web-app>.

   So the initial format of this file will be like this:

   .................................. .................................. ..................................

   So if you want to create this file then write above code in notepad and save it with name "web.xml" in the WEB-INF folder of your application. After creating and placing this file to the appropriate position, we have to add some elements within web-app tag. How and why we will write those elements will be described later in this section.

2. faces-config.xml

   Now we come to the second file faces-config.xml that will be in the same place where web.xml is i.e. WEB-INF folder. Here also you have to take care of mentioning version of xml as we did in web.xml file. All tag elements will be within faces-config opening and closing tag i.e. and . So the root element of this file is tag.

   So initial format of this file will be like this:

   ................................. ................................. .................................

   You can create this file also by your own or copy from other JSF Application . If you want to create this file then you can write the above code in notepad and save it with the name "faces-config.xml" in WEB-INF folder of your application. After creating and placing this file to the appropriate position, we have to add some elements within faces-config tag. How we will write those elements will be described later in this section.
   So now there will be two xml files web.xml and faces-config.xml in WEB-INF directory.

This JSF application contains:

1. Three JSP pages for viewing purpose
2. JavaBean to hold model data
3. Configuration files specifying managed bean, navigation rules, controller servlet.

Now our first step is to create view for the application. For this we have created three JSP files given below:

1. index.jsp
2. inputname.jsp
3. result.jsp

Creating JSP pages:

index.jsp :
The index page is stored in root directory "SimpleHelloByEnteringName". The code for "index.jsp" is :

Description :
As you can see in code above, this page simply forwards the user to the page "inputname.jsp" through line of code. Index page doesn't display anything to the user so you can leave creating this page but it has one benefit that you can start application simply mentioning the application name and not specifying any file name at the end of URL i.e. we can simply write http://localhost:8080/SimpleHelloByEnteringName in the URL and see output of the application.
So the first page that appears to the user is "inputname.jsp" not "index.jsp". The code for "inputname.jsp" is:

inputname.jsp :

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

Description :

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

With taglib directive we include the JSF tag libraries. First line tells where to find JSF html tags that defines html elements and second line tells where to find JSF core tags. A page which contains JSF tags is represented by a tree of components. The root of this tree is UIViewRoot. This root is represented by view tag. So it is necessary to include all component tags (tags representing UI components) within view tag.

This line loads our properties file (resource bundle) that holds messages that we want to display in our JSP page. Actually this file is a collection of param=value pair. The name of this file is "messages.properties" in this application which is saved in /WEB-INF/classes/roseindia folder. We will explain more about this in subsequent section.

This tag creates html form using JSF tag. Typically JSP page includes a form, which is submitted when a button is clicked. Form components must be nested inside the form tag i.e. within <h:form> and >.

This tag looks into the resource bundle i.e. properties file(messages.properties) . It looks the value for inputname_header parameter in "message.properties" file and set the value of it to value attribute. Finally this tag prints this value. So in this example this line prints "Roseindia JSF Tutorial".

In this line the value of "prompt" param is looked in "messages.properties" file and this tag prints this message. So in this example this line prints "Enter Your Name:".

This tag is used to create input text box component. The value attribute is used to connect this field to the managed bean attribute .Here StoreNameBean is the name of Bean and personName is the name of attribute of bean. After pressing the submit button bean gets the value in the input text box filled by user . This bean is nothing but a Java Bean that contains attributes and setter and getter methods to set and get those attributes. We will explain more about Managed Bean later in this section.

This tag represents command button component. Here again the value attribute gets its value from "messages.properties" file. So in this example this line prints "Submit" on button component .The action attribute is used to see which page will be displayed next when we will press this button. This "result" value is matched in faces-config.xml file in WEB-INF folder where navigation rules are defined. How to define navigation rules in faces-config.xml file will be described later in this section. Here in this application the next page is "result.jsp" when submit button is pressed..

The collective output of tags used in inputname.jsp page will give rise to the first page appeared in front of the user: So the output of the page is given below:

When above page appears to the user, user enters name to the input text field and submits the button, a new page "result.jsp" is generated that welcomes the user with the user name. The code for "result.jsp" is :

result.jsp :

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

Description :

First three lines are same as in "inputname.jsp" file.

This line is used to access the value of personName attribute from Java Bean named "StoreNameBean" and prints this value(i.e. person's name) on the page.

This line looks the value of greeting_text in "message.prorerties" file and prints this value to the page. Here this line prints "Welcome In Roseindia JSF Tutorial".

Output of result.jsp :
So output will be like this (if "rose" is entered in the text field of "inputname.jsp" page):

Now we come to those topics that has been left unexplained above.

Creating properties file (resource bundle) :

In above JSP files we have used "message.properties" file. This is a properties file and is a collection of param=value pairs. We can use there values of param in our JSP file as we did it previously. This provides a great benefit to the application like we can modify these values easily and there is no need to change the JSP file. In this application we have created "messages.properties" file in roseindia folder in WEB-INF/classes folder. The code for this file is:

inputname_header=Roseindia JSF Tutorial prompt=Enter Your Name: greeting_text=Welcome In Roseindia JSF Tutorial button_text=Submit

Creating Managed Bean :

In the above JSP files we have used Managed Bean named "StoreNameBean". For this we have created "PersonBean.java" file. This Managed Bean is nothing but a Java Bean that contains attributes and setter and getter methods to set and get those attributes. Here in this example there is only one attribute named "personName" and so only one setter method setPersonName() and one getter method getPersonName() for that attribute. This bean is used to get values entered by user after submit button is pressed. Make sure the attribute in this class must be same as the field name in JSP. In this example this file is created in package roseindia. So compile this file and place its class file i.e. PersonBean.class in roseindia folder in WEB-INF\classes folder. The code for this class is:

package roseindia; public class PersonBean { String personName; public String getPersonName() { return personName; } public void setPersonName(String name) { personName = name; } }

If you want to access the bean classes in your JSP files, you have to register the bean classes in faces-config.xml. So now its turn to declare this bean in configuration file faces-config.xml that has been described in the next section below:

Registering managed bean :

We have already created faces-config.xml file with empty tag. This configuration file is used to register managed beans, specifying navigation rules etc. We will add element within and tag to register Managed Bean. So this registration code will be like this for this application:

StoreNameBean roseindia.PersonBean request

defines a managed bean. Bean'name is given in tag. This name is used in JSP files to represent the bean. The class name which corresponds to this bean is given in tag. To define the scope for the bean we specify this in tag. In this Application name of the bean that will be used in JSP files is StoreNameBean that is represented by the bean class PersonBean in roseindia package.

Defining navigation rule :

Now we will understand how navigation from one page to the next page is performed as in our application inputname.jsp page navigates to result.jsp page when user presses submit button after filling text in input text field. To understand this we come back to the the line of code used in "inputname.jsp":

Here action attribute is set to "result". When user presses the command button then which page will be displayed is determined by the navigation rule defined in faces-config.xml configuration file. This rule has been defined like this for our application :

/pages/inputname.jsp result result.jsp

defines navigation rule. is used to specify the jsp file for which navigation rule is to be defined. So here we write the name of the JSP file for which the we are defining the navigation rule. Here in our application it is inputname.jsp that is in pages package. specifies the value which is matched with the value specified in action attribute of commandButton tag. If it matches then the page specified within tag is displayed. Here in our application it is "result.jsp".

So after editing faces-config.xml file, it will look like following:

"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> StoreNameBean roseindia.PersonBean request /pages/inputname.jsp result result.jsp

Editing web.xml :

The FacesServlet servlet works as an engine for all JSF applications. So as we are using JSF framework in our web application, we will edit the deployment descriptor file web.xml to define "FaceServlet" and its mapping in web.xml file.

Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet *.jsf

element is used to map the "javax.faces.webapp.FacesServlet" servlet class to a symbolic name i.e. Faces Servlet is an alias for "javax.faces.webapp.FacesServlet" servlet .So tag registers the Faces servlet. element is used to map any request of pattern like .jsf in the URL must be passed to the Faces servlet.

The FacesServlet servlet works as an engine for all JSF applications( handling of all JSF related requests, building component tree of the JSP page, accessing all JSP pages in the application, creating an Event object and passing it to any registered listener). So all requests that need FacesServlet processing must be directed to this servlet. So if we want to invoke this servlet with every request we have to do mapping in element. This is done to map a particular URL pattern with the Faces servlet. URL of every request must contain .jsf pattern because we have mentioned this pattern in tag.

If we look in "index.jsp" file, we will find that there is .jsf file suffix not .jsp in the path for the forward.

This is done to map a particular URL pattern with the Faces servlet. This is used here because we have used *.jsf in the URL pattern in the web.xml file for the application. This is used to signal that the forwarded page should be handled by the FacesServlet servlet within Tomcat.

Running the application :
This application is now complete. To run this application start Tomcat server and type http://localhost:8080/SimpleHelloByEnteringName URL in the address bar of your browser and hit enter.

You can download the example and unzip it and paste SimpleHelloByEnteringName folder in webapps folder and run it.

Dowload now.