An introduction to creating

JSF applications in
Rational Application Developer Version 8.0

September 2010

Copyright IBM Corporation 2010. 1

Overview
Although you can use several Web technologies to create dynamic Web
applications, JavaServer Faces (JSF) gives you the ability to create form-based
applications easily. You can implement JavaServer Faces technology in your
Web application by using different views. Use the Standard Faces Components
and Facelet Tags drawers in the Palette view to add user interface (UI)
components and define data sources for the page. Use the Data and Services
drawer in the Palette view to define new data sources and drag data components
such as JavaBeans beans and relational record lists to the page. The Page
Data view shows the defined data sources.

What is JavaServer Faces?

JavaServer Faces (JSF) is a framework for developing Web applications. It
simplifies the construction of user interfaces (UI) for server-based applications by
enabling the assembly of reusable UI components in a page. JSF facilitates the
connection of widgets to data sources and to server-side event handlers.

The JSF framework unifies techniques for simplifying Web application design
and development by addressing the following Web application design and
development concerns:

User interface development

JSF allows direct binding of user interface (UI) components to model data.
It abstracts request processing into an event-driven model. Developers
can use extensive libraries of prebuilt UI components that provide both
basic and advanced Web functionality.

Navigation
JSF introduces a layer of separation between business logic and the
resulting UI pages; stand-alone flexible rules drive the flow of pages.

Session and object management

JSF manages designated model data objects by handling their
initialization, persistence over the request cycle, and cleanup.

Validation and error feedback

JSF allows direct binding of reusable validators to UI components. The
framework also provides a queue mechanism to simplify error and
message feedback to the application user. These messages can be

Copyright IBM Corporation 2010. 2

 associated with specific UI components.

Internationalization
JSF provides tools for internationalizing Web applications, supporting
number, currency, time, and date formatting, and externalizing of UI
strings.

JSF is easily extended in a variety of ways to suit the requirements of your

particular application. You can develop custom components, renderers,
validators, and other JSF objects and register them with the JSF runtime.

JavaServer Faces specification

JavaServer Faces was created by Java Specification Request (JSR) 127. JSR
127: JavaServer Faces 1.0, defines a standard set of JSP tags and Java classes
that simplify the development of Web application user interface (UI). JSR 252:
JavaServer Faces 2.0, is the latest version of the JavaServer Faces
specification.

JavaServer Faces was created by Java Specification Request (JSR) 127:

JavaServer Faces. IBM, Sun, and BEA, along with many other industry leading
companies participated in the development of the specification. The JSR 127
Expert Group owns and maintains the JSF specification, however, anyone can
contribute to the specification and provide feedback.

IBM provides its own implementation of the JSF specification as well as

providing extensions to the framework in accordance with the specification.
Extensions include custom UI controls.

What's new in JSF 2.0

In JSF 2.0, Facelets 2.0 is the standard view decoration language for JSF
application development. It is not recommended to combine Faces JSP and
Facelets in the same project.

Facelets provides a lightweight template framework that is designed for

component reuse and ease of development and maintenance. Facelets offers
the following features to help you create robust, flexible, and extensible user
interfaces:
Templates to define layout
Composite components, so that you can turn a page into a JSF UI component
Custom logic tags

Copyright IBM Corporation 2010. 3

 Expression functions and validation
Component libraries
XHTML page development

The JSF tools in Rational Application Developer fully supports JSF 2.0 and
Facelet development. You can create Facelet pages and templates, drag and
drop Facelet UI components from the palette to your page, and edit the
component attributes in the Properties view.

Other new features of JSF 2.0 include:

Configure managed beans using annotations instead of XML
Support for relocatable resources. You can specify the location in the page
where you want the resource to be placed, using the target attribute.
Native AJAX support to make AJAX calls with the <f:ajax> tag
Bookmarking support for links and buttons with the <h:link> and <h:button>
tags
Simplifed implicit navigation handling
Support for HTTP GET requests with view parameters
Partial state-saving mechanism
Support for global system events and component system events
View scope state and flash scope state
Improved validation and error handling

JavaServer Faces life cycle

Each JavaServer Faces request that renders a JavaServer Pages (JSP) page
involves a JavaServer Faces component tree, also called a view, and goes
through a request processing life cycle made up of phases. The standard phases
of the request processing life cycle begin with building the restore view, applying
request values, processing validations, updating model values, and invoking the
application.

Copyright IBM Corporation 2010. 4

Build restore view
The JavaServer Faces component tree is used to build and maintain state and
events for the page. The tree is built once every session and reused when users
return to the page. At the end of this phase, the root property of the
FacesContext instance for the current request reflects the saved configuration of
the view generated by the previous faces response, if there is one.

Apply request values

The purpose of applying request values is to give each component the
opportunity to update its current value using the information included in the
current request, such as parameters, headers, and cookies.

Process validations
As part of the creation of the view for this request, zero or more validator
instances can be registered for each component. In addition, component classes
themselves can implement validation logic in their validate() methods. At the end
of this phase, all configured validations are completed.

Validations that fail cause messages to be enqueued via calls to the

addMessage() method of the FacesContext instance for the current request, and
the valid property on the corresponding components are set to false. If any of the

Copyright IBM Corporation 2010. 5

validate() methods that were invoked called responseComplete() on the
FacesContext instance for the current request, the life-cycle processing of the
current request must be immediately terminated. If any of the validate() methods
that were invoked called renderResponse() on the FacesContext instance for the
current request, control must be transferred to the Render Response phase of
the request processing life cycle. The same conditions are true for an event
listener that processed a queued event. If none of these conditions occurs,
control proceeds to the next phase to update model values.

Update model values

If this phase of the request processing life cycle is reached, it means that the
incoming request is syntactically and semantically valid according to the
validations that were performed, the local value of every component in the
component tree has been updated, and it is now appropriate to update the
application's model data in preparation for performing any application events that
have been queued.

Invoke application
As described when building a restore view, if the view for the current request was
reconstructed from state information saved by a previous request, the
JavaServer Faces implementation will have ensured that the ActionListener
returned by calling getActionListener on the Application object for this Web
application will be registered with all UICommand components in the component
tree, by virtue of the restoreState() method.

Render response
This phase accomplishes two things at the same time: causes the response to
be rendered to the client, and causes the state of the response to be saved for
processing on subsequent requests. The reason for handling both of these
responsibilities in one phase is because the act of rendering the response in JSP
applications can cause the view to be built as the page renders. Therefore, the
state of the view cannot be saved until after it is rendered to the client.

Event Processing
During several phases of the request processing life cycle, events can be
queued, for example, via a call to the queueEvent() method on the source
UIComponent instance, or a call to the queue() method on the FacesEvent
instance. These queued events must now be broadcast to interested event
listeners. The broadcast is performed as a side effect of calling the appropriate
life-cycle management method (processDecodes(), processValidators(),

Copyright IBM Corporation 2010. 6

processUpdates(), or processApplication()) on the UIViewRoot instance at the
root of the current component tree. For each queued event, the broadcast()
method of the source UIComponent will be called to broadcast the event to all
event listeners who have registered an interest on this source component for
events of the specified type. A Boolean flag is returned indicating whether this
event has been handled completely and whether the JavaServer Faces
implementation can remove it from the event queue.

It is also possible for event listeners to cause additional events to be queued for
processing during the current phase of the request processing life cycle. Such
events must be broadcast in the order they were queued after all originally
queued events are broadcast, but before the life-cycle management method
returns.

Model-view-controller architecture
The JSF framework implements the Model-View-Controller (MVC) architecture
ensuring that applications are well designed and easier to maintain..

According to the MVC pattern, a software component is separated into layers

along the following lines:

Model Encapsulates the information (data) and the methods to operate

on that information (business logic).

Managed beans define the model of a JSF application. These

Java beans typically interface with reusable business logic
components or external systems, such as a mainframe or
database.
View Presents the model.

JSPs make up the view of a JSF Web application. These JSPs

are built using predefined and custom-made UI components and
by connecting these components to the model.
Controller Processes user events and drives model and view updates.

The Faces servlet, which handles the request processing

lifecycle defined by JSF, drives the application flow.

With JSF, Java programmers to focus on backend data encapsulation

development that is then integrated with the UI. With JSF, Web page creators
can create the user interface by assembling prebuilt JSF components that

Copyright IBM Corporation 2010. 7

already contain the necessary logic.

JavaServer Faces development

JSF supports the creation of user roles in the development cycle through its
implementation of MVC architecture. MVC architecture supports the separation
of business logic into distinct parts. Each part is the responsibility of a different
user role.

JSF development user roles

A user role is the classification of a user as having a specific set of tasks which
are executed using a specific set of skills. These user roles allow for the parallel
distributed development of the Web application. The basic JSF development
user roles are:

Application developer

Copyright IBM Corporation 2010. 8

These users create the business logic, or model, of the application. They provide
object-oriented access to backend data, manage persistence of the model, and
expose interfaces for common backend tasks. They must have Java skills and
knowledge of any backend integration.

Component developer
These users create reusable JSF components, such as UI components,
renderers, and validators. They are responsible for encoding the data from the
application developer's interfaces, as well as decoding the request information to
update the model. They require skills in J2EE and JSF APIs. The JSF Widget
Library (JWL), created by IBM and included in this product, does the work of the
component developer by providing reusable JSF components.

Web page developer

These users are responsible for the look and feel, or view, of the application.
They create Web pages using the components created by the component
developer and the business logic and data objects created by the application
developer. Typically these users own the navigation and model life cycle
configuration. They require HTML, CSS, JavaScript, and other browser-based
technology skills.

JSF development cycle

An application developer writes Java classes that provide an object-oriented
interface for a set of tables in a database. The developer packages the code into
a JAR file for use by the page developer.

A page developer creates a new JSF-enabled Web application and imports the
supplied JAR file from the application developer. The page developer creates a
new JSF page for interfacing with the database and adds a class from the JAR
to the page as a managed bean, then drags it onto the page. A set of fields are
created with which to update the record. The page developers drags a command
button onto the page from the Enhanced Faces drawer of the palette and
associated it wit a supplied update method in the supplied business logic. The
page developer adds navigation rules to display other pages based on the
success of the update operation. Finally, the page is tested by running it on the
application server.

The end user accesses the Web application for the database application to
update the database directly via a Web interface.

Copyright IBM Corporation 2010. 9

Developing Web applications using JSF

To create a Web application in Rational Application Developer that uses JSF:

1. Create a JSF enabled dynamic Web project.

2. Create a Faces JSP page or a Facelet page.
3. Add JSF UI components to the page.
4. Add data viewing components to the page.
5. Configure the properties for each component.
6. Assign actions to JSF UI components.
7. Test the Web project.
8. Run the Web project on a server.

Tools for JSF development

The Rational Application Developer JSF tools help you use JSF to develop Web
applications more effectively.

Page Data view

The Page Data view allows you to add, modify, or delete data objects in JSP,
HTML, and XHTML files. Supported data types include:

Standard scripting variables that are available to all JSP files:

applicationScope enables you to add and modify attributes in the
application object
param enables you to add and modify attributes to be used in the page
object
requestScope enables you to add and modify attributes in the request
object
sessionScope enables you to add and modify attributes in the session
object
Other data objects, depending on the type of file:
Faces component
Use Beans
Page Bean
Faces Managed Beans
JPA
SDO Relational Records
Services
RPC Adapter Services

Copyright IBM Corporation 2010. 10

Properties view
The Properties view displays specific information pertaining to the currently
selected tag in a Web page. For example, the Properties view shows a variety of
information about an HTML table tag. The Properties view lets you edit
JavaScript and JSP tags while Page Designer is open in the Design or Split
pane. When you edit in the Properties view, your changes take effect when
cursor focus is changed. If you make changes to tags in the Source pane of
Page Designer, the changes take effect immediately in the Properties view.

Quick Edit view

The Quick Edit view lets you add short scripts to your Web pages. For example,
if you select a button tag on a JSP page, you can then associate a click event
with that button and add a script to it.

Validation
You can validate your Web application to ensure that the syntax is correct and
your markup is well-formed. A validator is a tool that checks that resources
conform to a specification or set of rules. You can add and remove validators
from your Web application. To configure what validators will run on a project,
click Window > Preferences > Validation. The JSF validators include:

JSF application configuration validator

JSF view extended validator
JSF view validator

Content assist
Content assist provides context-based proposals at the current text insertion
point. A popup of possible tags and attributes are made available as you type.
Content assist is available for most of the JSF tag library attribute values.

JSF Palette Tools

Drawer Description Example

Copyright IBM Corporation 2010. 11

Standard Faces The Standard Faces
Components drawer (JSF library, contains a basic
1.x and 2.0) set of JSF tags that are
defined by the
JavaServer Faces
Technology specification.

Enhanced Faces The Enhanced Faces

Components drawer (JSF Components drawer
1.x) contains JSF Widget
Library (JWL) tags,
standard JSF tags, and
some enhanced versions
of standard JSF tags.

Copyright IBM Corporation 2010. 12

Facelet Tags drawer (JSF The Facelet Tags drawer
2.0) allows you to drag and
drop Facelet UI
components onto a Web
page.

Data and Services drawer The Data and Services

drawer allows you to drag
and drop page data onto
a Web page.

Custom drawer or third A component library

party library contains JSF
components that you can
use in your Web
applications to create a
user interface that
connects to a data
source. When you add
support for a library, the
library tags are added to
the palette.

Copyright IBM Corporation 2010. 13

JSF Wizards
Wizard Description
Faces Component Library Project A custom component library contains
new and modified JSF components
that you can use in your Web
applications and distribute the libraries
to your development team.
Faces Custom Component Use this wizard to create new JSF tags
or modify existing JSF tags that you
can use in your Web applications to
create UI.
Faces Definitions Project Use this wizard to create a project that
contains support information for
existing JSF libraries.
Faces Library Definition Use this wizard to add support for an
existing JSF library.

JSF project facets

A project facet is a specific unit of functionality that you can add to a project
when that functionality is required. When a project facet is added to a project, it
can add natures, builders, classpath entries, and resources to a project,
depending on the characteristics of the particular project. JSF facets define the
characteristics of your JSF enabled Web application. The JSF facets specify the
requirements and constraints that apply to your JSF project.

JSF trace view and console

In a JSF application every request from the browser goes through a complex
series of steps before a response is generated. In a JSF application, this series
of steps is known as the JSF Lifecycle. A number of conditions can influence
which phases of the lifecycle are executed and therefore which phases are sent
back to the browser in response to a request. It is difficult to see all of the steps
in the JSF lifecycle when an application is run on server.
JSF Trace gives you look into the running JSF application by collecting
information about the JSF Lifecycle and presenting it in real time in an easy to
understand form.
When you add JSF Tracing support to an application, the Trace view collects
and presents information about the JSF lifecycle of your application while your

Copyright IBM Corporation 2010. 14

request is processed.

In addition to the JSF Trace view, the JSF Trace console presents raw
information received over the network socket from the running application.

Copyright IBM Corporation 2010. 15

For more information
To learn more about JSF and Rational Application Developer, see these
resources:
Rational Application Developer Web site:
http://www-01.ibm.com/software/awdtools/developer/application/index.html
Rational Application Developer Information Center:
http://publib.boulder.ibm.com/infocenter/radhelp/v8/index.jsp
Rational Application Developer wiki:
https://www.ibm.com/developerworks/wikis/display/rad/Home

Copyright IBM Corporation 2010. 16