JSF Forms - Developing form based application

Complete Java Server Faces (JSF) Tutorial - JSF Tutorials. JSF Tutorials at Rose India covers everything you need to know about JSF.

Developing Forms in JSF 1.2
In this tutorial we will show you how to develop UI forms using JSF 1.2. For this tutorial we will use the project developed in the last section Installing JSF 1.2 on tomcat. After completing this tutorial you will be able to develop user entry forms in JSF 1.2 technology.

About JSF Forms Application

The application we are going to develop displays a form to the user asking user to enter the name. When user enters the name and clicks on the "OK" button, welcome message "Welcome to JSF 1.2 World!" is displayed to the user in new screen.

Creating web application

Download the application created in the Installing JSF 1.2 on tomcat section and rename this application to "jsf12forms" and deploy on the Tomcat 6.0 server.

Steps to develop the Application

We can divide the process into following steps:

1. Create user interface components (JSP files)
2. Create manage bean
3. Write navigation rules
4. Compile the application
5. Deploy and test the application

Let's follow the steps to develop the application.

1. Create UI Screens (JSP files)
   In this application we are going to develop two pages inputname.jsp and welcome.jsp. The inputname.jsp prompts the user to enter his/her name. Code of inputname.jsp is:
   

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

   Save the above file in "webapps\jsf12forms\user" directory.
   
   Now let's examine the code of inputname.jsp. The first two lines of the actually are the directives which specify the location to find the JSF tags that defines HTML elements and core JSF tags respectively.
   
   JSF HTML Tags: <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
   JSF Core Tags: <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
   
   The tag simply generates "JSF 1.2 Tutorial" text that is displayed on the user screen.
   
   The code that generates forms and buttons:
   1
   2
   3
   4
   5

   Line 1: Generates HTML code for the form.
   Line 2: Prints the message "Enter Your Name:" on the screen.
   Line 3: Creates HTML text input element, where user can enter his/her name. The attribute value="#{UserBean.userName}", actually bind this filed with the managed beans property "userName".
   Line 4: Creates HTML submit button with the text "OK" on it.
   Line 5: Creates HTML forms end tag

   
   Next file is welcome.jsp, which displays the welcome message to the user. The welcome.jsp contains following code:

   <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> , to JSF 1.2 World!

   Save above file in "webapps\jsf12forms\user" directory. Above file displays welcome message to user.
   The code to JSF 1.2 World! is used to display the message on the welcome page.
   

2. Create managed Bean
   Now we will create a bean that will hold the form data (user name in this case) entered by user. This bean is also know as backing bean or JSF managed bean. The JSF managed bean is a regular JavaBeans components whose property and methods are used by JSF components.
   
   Here is the code of our Managed Bean (UserNameBean.java):
   

   package net.roseindia; public class UserNameBean { String userName; /** * @return User Name */ public String getUserName() { return userName; } /** * @param User Name */ public void setUserName(String name) { userName = name; } }

   Save UserNameBean.java into "webapps\jsf12forms\WEB-INF\src\java\net\roseindia" directory.
   We can define the BackingBean in the "faces-config.xml" using the following code:
   
   UserBean
   net.roseindia.UserNameBean
   request
   
   

3. Writing the navigation rule
   Open the faces-config.xml and add the following code to define the navigation rule:
   
   /user/inputname.jsp
   
   welcome
   /user/welcome.jsp
   
   
   
   The file version of faces-config.xml is:
   

   "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> /user/inputname.jsp welcome /user/welcome.jsp UserBean net.roseindia.UserNameBean request

   
   
4. Compiling the application
   Now we are at the final stage of the development. We will use ant tool to compile the application. So, you download the final version of the application that contains the build.xml file and directories necessary to build the application. Download the full application now.
   
   To compile the application go to "apache-tomcat-6.0.13\webapps\jsf12forms\WEB-INF\src" directory and issue ant command.
   

   C:\>cd C:\testjsf\apache-tomcat-6.0.13\webapps\jsf12forms\WEB-INF\src C:\testjsf\apache-tomcat-6.0.13\webapps\jsf12forms\WEB-INF\src>ant Buildfile: build.xml clean: [delete] Deleting directory C:\testjsf\apache-tomcat-6.0.13\webapps\jsf12form s\WEB-INF\classes [mkdir] Created dir: C:\testjsf\apache-tomcat-6.0.13\webapps\jsf12forms\WEB- INF\classes prepare: resources: compile: [javac] Compiling 1 source file to C:\testjsf\apache-tomcat-6.0.13\webapps\j sf12forms\WEB-INF\src\classes [jar] Building jar: C:\testjsf\apache-tomcat-6.0.13\webapps\jsf12forms\WEB -INF\lib\jsf12tutorial.jar project: all: BUILD SUCCESSFUL Total time: 10 seconds C:\testjsf\apache-tomcat-6.0.13\webapps\jsf12forms\WEB-INF\src>

   
   To test the application run tomcat and type http://localhost:8080/jsf12forms/user/inputname.jsf. You browser should display the Input screen. Enter your name and press ok:

   
   

   The welcome screen should look like:

   

Download the full application discussed in this section