Professional Documents
Culture Documents
(JSF) Tutorial
JSF KickStart: A Simple JavaServer Faces
Application
In this tutorial, we will show you an example of a JSF application developed without any special
IDE. We won't dwell on the theory behind JSF here. There are plenty of sites and books that will
do that for you. Instead, we will go quickly into the construction of this simple application that we
hope can form the basis for you to start developing more advanced applications.
JSF provides the common plumbing for any Web application allowing you to concentrate on your
specific application (instead of worrying about things like how to create a link from one page to
another). This will become clearer as we go along.
• JDK 1.4
• Tomcat 5.0 or any other servlet container (JBoss, Resin, JRun). We will use Tomcat in
this example.
• Ant
We will provide you with many of the project files so that you don't need to create them yourself.
We will be concentrating primarily on the actual JSF application, not on creating Ant scripts or
web.xml files. These files will be provided for you. You will just need to copy and paste content
from this tutorial.
/ant This folder holds Ant build scripts including a default build.xml file.
/JavaSource This folder is where you place your own Java source classes and
properties files.
/WebContent This folder holds the actual Web application files used by the application
server or servlet container.
/WEB-INF This folder inside the WebContent folder holds files that are used as part
of the runtime Web application but are hidden from the browser.
/classes This folder inside the WEB-INF folder holds compiled Java classes
along with properties files copied from JavaSource.
/lib This folder inside the WEB-INF folder holds libraries required by your
application, for example, third party Jar files.
jsf-impl.jar These two files inside the lib folder are library files included with the
jsf-api.jar JavaServer Faces v1.1 Reference Implementation. Every JSF application
requires these files.
web.xml This file inside the WEB-INF folder is the Web Application Deployment
Descriptor for your application. This is an XML file describing the
servlets and other components that make up your application.
faces- This file inside the WEB-INF folder is the JavaServer Faces
config.xml configuration file. This file lists bean resources and navigation rules. We
will cover this file in more detail later.
pages This folder inside the WebContent folder holds JSP and HTML
presentation pages.
We have already provided you with two complete project files in the the
project, web.xml and build.xml, so that you don't have to spend time creating these. (This
tutorial is not about creating these kinds of files.)
The Steps
We will complete the following steps:
These files will act as place holders for now. We will complete the content of the files a little bit
later.
Now that we have the two JSP pages, we can create a navigation rule.
Navigation
Navigation is the heart of JavaServer Faces. The navigation rule for this application is described
in the faces-config.xml file. This file already exists in the skeleton directory structure. You just
need to create its contents.
In our application, we just want to go from inputname.jsp to greeting.jsp. As a diagram, it would
look something like this:
PersonBean.java
Put this code in the file:
package jsfks;
String personName;
/**
* @return Person Name
*/
public String getPersonName() {
return personName;
}
/**
* @param Person Name
*/
public void setPersonName(String name) {
personName = name;
}
}
Later you will see how to "connect" this bean with the JSP page.
faces-config.xml
Your 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>jsfks.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>
Let's create a bundle folder in the JavaSource/jsfks folder and then a messages.properties file
in the bundle folder. We need to 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.
messages.properties
Put this text in the properties file:
inputname_header=JSF KickStart
prompt=Tell us your name:
greeting_text=Welcome to JSF
button_text=Say Hello
sign=!
inputname.jsp
Put the following coding into this file:
Now, let's explain the important sections in this file after displaying the code for each section
starting from the top.
greeting.jsp
Put this coding inside the second 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="jsfks.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>
This page is very simple. The first three lines are identical to our first page. Theses lines import
JSF tag libraries and our properties file (resource bundle) with the messages.
The main code of interest to us is between the <h3>..</h3> tags. The first line will take a
message from the resource bundle and print it on the page. The second line will access a Java
bean, specifically the bean attribute personName, and also print its contents on the page.
Once this page is displayed in a Web browser, you will see something like this:
<html>
<body>
<jsp:forward page="/pages/inputname.jsf" />
</body>
</html>
If you look at the path for the forward, you'll notice the file suffix is .jsf and not .jsp. This is used
here, because in the web.xml file for the application *.jsf is the URL pattern used to signal
that the forwarded page should be handled by the JavaServer Faces servlet within Tomcat.
Deploying
Before you can run this application within the servlet container, we need to deploy it. We will use
null (link) deployment to deploy the application in-place. To do this we need to register a context
in Tomcat's {TomcatHome}\conf\server.xml file.
<Context debug="0"
docBase="Path_to_WebContent"
path="/jsfks" 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 jsfks folder (for
example, C:/examples/jsfks/WebContent).
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://localhost:8080/jsfks. (Port
8080 is the default port in Tomcat. Your setup, though, might possibly be different).
Try This!
It's always a good learning experience to modify the application after you are done. Let's try a
simple modification.
Let's say we want to initialize the name value. In other words, when we first run the application,
the input text field should have a value already displayed.
It is very simply to do this in JSF. We can provide an initial value in the faces-config.xml file, in
the managed bean section. The lines in bold from this section show what we need to add. These
lines declare a managed bean property of type java.lang.String and then set its value
to JavaJoe.
<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>jsfks.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>JavaJoe</value>
</managed-property>
</managed-bean>
You don't even need to recompile anything, just restart Tomcat and launch the application.
Next Step
Try the next tutorial - adding simple validation to your project.
Interested in a new open enterprise data analysis tool built using JavaServer
Faces and RichFaces? Find out more about dVision or download it now!
Exadel provides both onsite and offsite JavaServer Faces training.