Using JSF
by Andrei Cioroianu
09/03/2003
The JavaServer Faces (JSF) technology provides standard APIs and tag
libraries needed by Java developers that build web-based user interfaces. Craig
McClanahan, the author of the Apache Struts framework, co-leads the JSF project
at Sun. This will ensure an easy migration from the popular Apache project to
the JSF standard. Like the Struts framework, JSF defines a set of JSP tags that
generate HTML form elements that can be bound to JavaBean properties. From the
application developer's perspective, the two frameworks are similar, but JSF
will probably get more support from tool developers, because it is a Java
standard. In the future, all J2EE application servers might actually be
required to support JavaServer Faces.
Sun has recently released its Java Web
Services Developer Pack 1.2, which includes a reference implementation
(Early Access 4 — EA4) of the JSF Specification (Version 1.0, Public
Review Draft 2). The EA4 version implements new features such as actions,
managed beans, and navigation rules. This article focuses on these new features
and shows how to take advantage of JSF in order to build forms, validate user input, and bind user interface components to JavaBean properties.
This article contains a web application made of four main components. A
JavaBean class (PBean.java) acts as a data model, holding some text
and its attributes: font, size, color, alignment, etc. A JSF-based form
(edit.jsp) allows users to provide values for the properties of
the JavaBean. Another Java class (PBuilder.java) generates an HTML
paragraph with the given text and attributes. Finally, a JSP page
(view.jsp) shows the generated paragraph.
Figure 1. The JSF-based form
Building the JSF Form
Handling HTML forms is one of the most common tasks when you develop web
applications. A good framework can save a lot of development time because there
are many routine operations that can be done automatically, or reduced to just a
few declarations in an XML file. It is also possible to simplify web
development using well-designed JSP tag libraries. The JavaServer Faces
framework provides JSP tags for rendering HTML forms, manages the state of the
forms, validates user-input reporting errors, lets you bind user interface
components to JavaBean properties, and does many other things that increase
your productivity. JSF also has a rich API that you can use to build custom
user interface (UI) components, custom validation classes (validators), and
server-side event listeners.
JSF contains two tag libraries called JSF Core and HTML Basic. The
former provides a few general tags and some other tags that let you register
validators and event listeners to UI components. The latter contains JSP tags
that render HTML UI components such as buttons, text fields, checkboxes, lists,
etc. The edit.jsp page uses many of these tags to build its form.
The standard prefixes of these two tag libraries are f and
h, and they are declared at the beginning of
edit.jsp:
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
The <f:use_faces> tag is a container tag that must enclose
all other JSF tags that are used in a page. It doesn't generate any HTML
content, but it triggers internal JSF mechanisms. The <h:form>
tag generates a <form> HTML element that can contain UI
components.
<html>
<head>
<title>Edit</title>
</head>
<body>
<f:use_faces>
<h:form formName="pform">
..........
</h:form>
</f:use_faces>
</body>
</html>
The above JSP code generates the following HTML fragment:
<html>
<head>
<title>Edit</title>
</head>
<body>
<form method="post" action="/usingjsf/faces/edit.jsp">
..........
</form>
</body>
</html>
The next section describes the JavaBean model of the application.
Managed Beans
Like many other web frameworks, JSF separates the user interface from the
model objects that encapsulate data and application logic. When the HTML user
interface is generated with the JSF tags, the JSF framework gets the data from
the JavaBean model and sets the state of the UI components that make the HTML
form. When the user submits the form, JSF validates the user input. If
everything is okay, JSF stores the user input in the JavaBean model and the
HTTP request can be forwarded to another page following a "navigation rule." If
there are validation errors, JSF returns the form with error messages, so that
the user can correct the input errors.
The PBean class follows the JavaBean patterns, implementing
java.io.Serializable and providing get and set methods for its
properties: text, size, font,
color, align, bold, italic,
and underline. For each user of the application, JSF creates a
PBean instance that is stored within the session JSP
scope with the pbean ID as specified in an XML configuration file
named faces-config.xml. JSF also initializes the properties of the
JavaBean instances with the values that are provided in
faces-config.xml. This XML file may contain other JSF
configuration parameters, including the navigation rules, which are explained
later in the article.
The following XML fragment contains the declarations related to the JavaBean
that is managed by JSF:
<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
..........
<managed-bean>
<managed-bean-name>pbean</managed-bean-name>
<managed-bean-class>
com.devsphere.articles.usingjsf.PBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>text</property-name>
<null-value/>
</managed-property>
<managed-property>
<property-name>size</property-name>
<value>3</value>
</managed-property>
<managed-property>
<property-name>font</property-name>
<values>
<value>Arial</value>
<value>Courier New</value>
</values>
</managed-property>
<managed-property>
<property-name>color</property-name>
<value>green</value>
</managed-property>
<managed-property>
<property-name>align</property-name>
<value>left</value>
</managed-property>
<managed-property>
<property-name>bold</property-name>
<value>false</value>
</managed-property>
<managed-property>
<property-name>italic</property-name>
<value>true</value>
</managed-property>
<managed-property>
<property-name>underline</property-name>
<value>false</value>
</managed-property>
</managed-bean>
</faces-config>
The managed beans that are created by JSF can be stored within the
request, session, or application scopes,
depending on the value of the <managed-bean-scope> element,
which may also contain none. JSF will not create a JavaBean
instance if an object is already registered within the given scope with the
given ID.