Tutorial for JSF(JavaServer Faces)

normalpetsSoftware and s/w Development

Nov 4, 2013 (3 years and 9 months ago)

80 views





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 navigati
on 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 a
llowing 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
th
e 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 show
n 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
i
mplementation 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 co
ntained 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 an
y 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: jsfPro
ject. 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.xm
l


/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 hol
ds 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.ja
va.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
pag
es.

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.

Crea
te 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
Web
Content/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 v
iew (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.js
p</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 one
-
attribu
te 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 setPe
rsonName(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
-
bea
n
-
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
JavaSourc
e/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 t
ext 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/p
ages
.

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/h
tml" 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:ou
tputText 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
WebCo
ntent

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 fil
e:


<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, i
t 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 usi
ng 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 i
nitially 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 s
et 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</mana
ged
-
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: