Download JavaServer Faces is a framework for building Web applications u

Tutorial for JSF(JavaServer Faces)
by
Chandrakala Rondla
Under guidance of Dr. C.C.Lee
Introduction:
JavaServer Faces is a framework for building Web applications using Java. JavaServer
Faces provides the following main features:
 Page navigation specification
 Standard user interface components like input fields, buttons, and links
 User input validation
 Easy error handling
 Java bean management
 Event handling
 Internationalization support
JSF provides the common plumbing for any Web application allowing the developer to
concentrate on the specific application instead of worrying about things like how to create
a link from one page to another.
Description:
The tutorial gives brief introduction about JSF and explains the Life Cycle of JSF. Also
the tutorial will take through the process that involves developing, building, deploying
and running a sample JSF application.
Life Cycle of JSF
JSF handles HTTP requests with seven distinct phases, as shown in Figure 1. The normal
flow of control is shown with solid lines, whereas dashed lines show alternate flows
depending on whether a component requests a page redisplay or validation or conversion
errors occur.
When a client makes a request for the page, the lifecycle starts. During the lifecycle, JSF
implementation must build the view while considering the state changed from the
previous postback. When the client performs a postback of the page, JSF implementation
must perform the Lifecycle steps:
1. Validation
2. Conversion
Figure 1. The JavaServer Faces lifecycle
Lifecycle handles two different types of requests.
1. Initial Request: A user requests the page for the first time. Lifecycle only executes
Request tree (view) and Render response phases.
2. Postback: A user submits a form contained on a page that was previously loaded
in the browser as a result of executing a initial request. Lifecycle executes all
phases.
Developing the application from scratch:
As a start the following are required:
JDK 1.4 (minimum)
Ant
Tomcat 5.0 or any other servlet container. Tomcat is used in this example.
Go to the "webapps" directory where apache was installed:
/opt/apache-tomcat-5.5.17/webapps.
This is where the application resides. Create a directory, which is your project name.
Example: jsfProject. Under "jsfProject" create the following directory structure.
/ant
build.xml
/JavaSource
/WebContent
/WEB-INF
/classes
/lib
jsf-impl.jar
jsf-api.jar
faces-config.xml
web.xml
/pages
The different parts of the skeleton structure are described below:
The “jsfProject” is the project folder, which is also the project name.
The “ant” folder holds Ant build scripts including a default build.xml file.
The “JavaSource” folder is where the Java source classes and properties files are placed.
The “WebContent” folder holds the actual Web application files used by the application
server or servlet container.
The “WEB-INF” folder inside the “WebContent” folder holds files that are used as part
of the runtime Web application but are hidden from the browser.
The “classes” folder inside the “WEB-INF” folder holds compiled Java classes along
with properties files copied from JavaSource.
The “lib” folder inside the “WEB-INF” folder holds libraries required by the application,
for example, third party Jar files.
jsf-impl.jar
jsf-api.jar
These two files inside the lib folder are library files included with the JavaServer Faces
Reference Implementation available at www.java.sun.com website. Every JSF application
requires these files.
The “web.xml” file inside the “WEB-INF” folder is the Web Application Deployment
Descriptor for the application. This is an XML file describing the Servlets and other
components that make up the application.
The “faces-config.xml” file inside the “WEB-INF” folder is the JavaServer Faces
configuration file. This file lists bean resources and navigation rules.
The “pages” folder inside the “WebContent” folder holds JSP and HTML presentation
pages.
Steps to develop sample JSF application:
Before we start it is important that directory structure explained above has been created.
The following steps are involved in developing the sample application. Each step is then
explained in more detail.
1. Create JSP pages
2. Define a navigation rule
3. Create a managed bean
4. Create a properties file
5. Edit JSP pages
6. Create an index.jsp file
7. Compile the application
8. Deploy and run the application:
1. Creating JSP Pages
Create the inputname.jsp and greeting.jsp files in WebContent/pages
2. Navigation
The navigation rule for this application is described in the faces-config.xml file.
In this application, the controller switches from inputname.jsp to greeting.jsp
The rule says that from the view (page) inputname.jsp go to the view (page)
greeting.jsp, if the "outcome" of executing inputname.jsp is greeting.
<navigation-rule>
<from-view-id>/pages/inputname.jsp</from-view-id>
<navigation-case>
<from-outcome>greeting</from-outcome>
<to-view-id>/pages/greeting.jsp</to-view-id>
</navigation-case>
</navigation-rule>
3. Creating the Managed Bean
Next, create com/edu/HelloWorld folders inside the JavaSource folder. Inside the
HelloWorld folder, create a PersonBean.java file. It's a simple Java bean with oneattribute and setter/getter methods. The bean simply captures the name entered by a user
after the user clicks the submit button. This way the bean provides a bridge between the
JSP page and the application logic. (Please note that the field name in the JSP file must
exactly match the attribute name in the bean.)
Put this code in the PersonBean.java file:
package com.edu.HelloWorld;
public class PersonBean {
String personName;
public String getPersonName() {
return personName;
}
public void setPersonName(String name) {
personName = name;
}
}
Declaring the Bean in faces-config.xml
Now, the second part of faces-config.xml describes Java bean that was created in the
previous steps. This section defines a bean name PersonBean. The next line is the full
class name, com.edu.HelloWorld.PersonBean. request sets the bean scope in the
application.
<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>com.edu.HelloWorld.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
The final faces-config.xml file should look like this:
<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
<navigation-rule>
<from-view-id>/pages/inputname.jsp</from-view-id>
<navigation-case>
<from-outcome>greeting</from-outcome>
<to-view-id>/pages/greeting.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>com.edu.HelloWorld.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>
4. Creating a Properties File (Resource Bundle)
A properties file is just a file with param=value pairs. The messages stored in the
properties file in our JSP pages are used.
Create a bundle folder in the JavaSource/com/edu/HelloWorld folder and then a
messages.properties file in the bundle folder. Place it in the JavaSource folder so that
during project compilation, this properties file will be copied to the classes folder where
the runtime can find it.
Put this text in the messages.properties properties file:
inputname_header=JSF KickStart
prompt=Tell us your name:
greeting_text=Welcome to JSF
button_text=Say Hello
sign=!
5. Editing the JSP Pages
Two pages should already have been created in jsfProject/WebContent/pages.
Put the following coding into the inputname.jsp file:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="com.edu.jsfProject.bundle.messages" var="msg"/>
<html>
<head>
<title>enter your name page</title>
</head>
<body>
<f:view>
<h1>
<h:outputText value="#{msg.inputname_header}"/>
</h1>
<h:form id="helloForm">
<h:outputText value="#{msg.prompt}"/>
<h:inputText value="#{personBean.personName}" />
<h:commandButton action="greeting" value="#{msg.button_text}" />
</h:form>
</f:view>
</body>
</html>
Put the following coding inside the second JSP file, greeting.jsp:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="com.edu.jsfProject.bundle.messages" var="msg"/>
<html>
<head>
<title>greeting page</title>
</head>
<body>
<f:view>
<h3>
<h:outputText value="#{msg.greeting_text}" />,
<h:outputText value="#{personBean.personName}" />
<h:outputText value="#{msg.sign}" />
</h3>
</f:view>
</body>
</html>
6. Creating the index.jsp File
Create the index.jsp file inside the WebContent folder. Note that this file is not created
in the pages folder like the previous JSP files.
Having an index.jsp file will allow us to start the application like this:
http://cczone.mcs.csueastbay.edu:8080/jsfProject/
Now, put this code into the file:
<html>
<body>
<jsp:forward page="/pages/inputname.jsf" />
</body>
</html>
7. Compiling
To build the application, run the build.xml script from the ant folder:
ant build
8. (a). Deploying
Before running this application within the servlet container, it has to be deployed.
To do this, insert this code:
<Context debug="0" docBase="Path_to_WebContent"
path="/jsfProject" reloadable="true"/>
near the end of the server.xml file within the Host element just before the closing
</Host> tag. Of course, Path_to_WebContent needs to be replaced with the exact path
on your system to the WebContent folder inside the jsfProject folder (for example.
/opt/apache-tomcat-5.5.17/webapps/jsfProject/WebContent)
8. (b). Running
Next, start the Tomcat server (probably using the script startup.bat in Tomcat's bin
directory). When Tomcat is done loading, launch a web browser and enter:
http://cczone.mcs.csueastbay.edu:8080/jsfProject/
A simple example to show the effectiveness of JSF:
The jsp page that is displayed initially has no default text in the textbox. By making a
small modification the in the faces-config.xml file the jsp page will have a default text
shown in the textbox. The following lines declare a managed bean property of type
java.lang.String and then set its value to Dr. Lee. The lines in bold below show what
should be added.
<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>com.edu.HelloWorld.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>personName</property-name>
<property-class>java.lang.String</property-class>
<value>Dr. Lee</value>
</managed-property>
</managed-bean>
Without default text:
With default text: