Java Server Faces for

application developers
(JSR 127, 252 & 314)

K.V. Ramana Rao

[email protected]

[email protected]
HTTP to a Java application server that supports servlets and JavaServer
Pages (JSP) based applications. These applications are typically form-
based, and are comprised of one or more HTML pages with which the
user interacts to complete a task or set of tasks.

JSF tackles the following challenges associated with these applications:

* Managing UI component state across requests

* Supporting encapsulation of the differences in markup across
different browsers and clients
* Supporting form processing (multi-page, more than one per
page, and so on)
* Providing a strongly typed event model that allows the application
to write server-side handlers (independent of HTTP) for client
generated events
* Validating request data and providing appropriate error reporting
* Enabling type conversion when migrating markup values (Strings)
to and from application data objects (which are often not Strings)
* Handling error and exceptions, and reporting errors in human-
readable form back to the application user
* Handling page-to-page navigation in response to UI events and
model interactions.

[email protected]
Evolution of Web aplication’s
Design Architecture

[email protected]
Evolution of MVC Architecture

1.No MVC

2.MVC Model 1 (Page-centric)

3.MVC Model 2 (Servlet-centric)

4.Web application frameworks

Struts

5.Standard-based Web application framework

JavaServer Faces (JSR-127)

[email protected]
Model 1 Architecture (Pagecentric)

[email protected]
[email protected]
Model 2 Architecture (Servletcentric)

[email protected]
Why Model 2 Architecture (instead of Model 1)?

* What if you want to present different JSP

pages depending on the data you receive?
– JSP technology alone even with JavaBeans and
custom tags (Model 1) cannot handle it well

* Solution
– Use Servlet and JSP together (Model 2)
– Servlet handles initial request, partially process the
data, set up beans, then forward the results to one
of a number of different JSP pages

[email protected]
 MVC Frameworks
• Struts
• JSF
• Webwork
• SpringMVC
• Tapestry
• Apache Shale
• Flex & JavaFX
• Ruby On Rails
[email protected]
Struts Vs JSF

[email protected]
 Maturity

Struts has been around for a few years

and has the edge on maturity.

[email protected]
Controller Flexibility/Event Handling
• The heart of Struts is the Front Controller.
• Struts uses the Front Controller and Command Pattern
• A single servlet takes a request translates
HTTP parameters into a Java ActionForm, and passes
the ActionForm into a Struts Action class, which is a
command.
• The URI denotes which Action class to go to. The Struts
framework has one single event handler for the HTTP
request.
• Once the request is met, the Action returns the result
back to the front controller, which then uses it to choose
where to navigate next.
[email protected]
Controller Flexibility/Event Handling
• JSF uses the Page Controller pattern.
Although there is a single servlet every
faces request goes through, the job of the
servlet is to receive a faces page with
components. It will then fire off events for
each component and render the
components using a render toolkit.
• The components can also be bound to
data from the model.

[email protected]
Controller Flexibility/Event Handling
• JSF adds many benefits of a front controller, but
at the same time gives you the flexibility of the
Page controller.
• JSF can have several event handler on a page
while Struts is geared to one event per request.
In addition, with struts, your ActionForms have to
extend Struts classes, creating another layer of
tedious coding .
• JSF on the other hand gives developers the
ability to hook into the model without breaking
layering. Model is unaware of JSF.
[email protected]
 Navigation
• Both frameworks provides declarative
navigation model and define navigation
using rules inside their XML configuration
file and supports both static navigation –
when one page flows directly to the next;
and dynamic navigation – when some
action or logic determines which page to
go it.

[email protected]
 Page Development
• JSF was build with a component in mind to allow
tool developers to support RAD development.
Struts had no such vision.
• Although Struts provide custom libraries to hook
into Action Forms and offers some helper
utilities, it is geared toward a JSP and HTTP-
centric approach.
• JSF provides the ability to build components
from a variety of view technologies and does it in
such a way to be toolable.

[email protected]
 Integration
• Struts was designed to be model neutral, so
there is no special hooks into a model layer.
Usually, page data must be moved from an
Action Form into another Model input format and
requires manual coding.
An ActionForm class, provides an extra layer of
tedious coding and state transition.
• JSF hides the details of any data inside the
component tree. Rich components such as data
grids can be bound to any java class. This
allows powerful RAD development,
[email protected]
 Extensibility
• Both Struts and JSF provides
opportunities to extend the framework to
meet expanding requirements.
• The main hook for Struts is a
RequestProcessor class that has various
callback methods throughout the life-cycle
of request.
• Developer can extend this class to replace
or enhance the framework.
[email protected]
 Extensibility
• JSF provides equivalent functionality by
allowing you to extend special life-cycle
interfaces.

• JSF decouples the render phase from the

controller allowing developers to provide
their own render toolkits for building
custom components.
[email protected]
Struts1.x MVC
[email protected]
[email protected]
JSF MVC
[email protected]
RichFaces Architecture

[email protected]
JavaServer™ Faces (JSF) Framework Is…

“ A server side user interface (UI) component framework for

Java technology-based web applications. Drag-and-drop UI
components to build a web Application.”

[email protected]
• Environment free development
– Servlet
– Portlet
• Rendering free
– Usually HTML
– Could be not web related

[email protected]
What is JSF?

* Next generation Web application framework

based on component model
– UI Components
– Events-based interaction model
– Back-end-data integration

* Designed to be leveraged by tools (as

opposed to be used by developers directly)
– Example: Sun Java Studio Creator
– You can still create JSF application by writing JSP
pages yourself

[email protected]
Why JSF?

* Higher abstraction for Web application development

– Event-driven programming model (as opposed to
HTTP request/response programming model)

* MVC for web applications

* Extensible Component and Rendering architecture

– Support for client device independence

* Standard

* Huge vendor and industry support

[email protected]
Why JSF? (Continued)

* Offers finer-grained separation of behavior

and presentation than JSP
– Component-specific event handling
– UI elements as stateful objects on the server

* UI-component and Web-tier concepts

without limiting you to a particular view
Technology (markup language)
– Can work with any presentation technology
including JSP
– Facelets is getting popular

[email protected]
Why JSF?

* JSP and Servlet

– No built-in UI component model
* A few words on Struts first
– Struts and JSF can be used together

* Struts
– No built-in UI component model
– No built-in event model for UI components
– No built-in state management for UI components
– No built-in support of multiple renderers (Struts is
more or less tied up with HTML)

[email protected]
JavaServer Faces Must Be ...

* Tool friendly

* Client device / protocol neutral

* Usable with JavaServer Pages (JSP)

* Usable without JSP

* Useful in the context of HTML and today's browsers

* Scalable

[email protected]
How the JSF Specification Fits In

[email protected]
JSF is a UI Framework for Java Web Applications

[email protected]
JSF Architecture

[email protected]
Important Basic Capabilities

* Extensible UI component model

* Flexible rendering model

* Event handling model

* Validation framework

* Basic page navigation support

* Internationalization

[email protected]
Key JSF Concepts

* UIComponent
– Render-independent characteristics
– Base class with standard behaviors

* Standard UIComponent Subclasses:

– UICommand, UIForm, UIGraphic, UIInput,
UIOutput, UIPanel, UISelectBoolean,
UISelectMany, UISelectOne

* FacesEvent
– Base class for request and application
events

* Validator
– Base class for standard and application
defined validators

[email protected]
Key JSF Concepts

* Converter
– Plug-in for String-Object conversion

* FacesContext
– Servlet request, response, session
– JSF request, response trees
– Model reference expression evaluators

* Syntax similar to the expression language

of the JSP Standard Tag Library (JSTL) 1.x

* Primary interface between components and

the data provided by (or to) the application

[email protected]
Key JSF Concepts

* Renderer

– Converts components to and from a

specific markup language
– Supports render-dependent attributes on
components
– May support more than one component type

* RenderKit

– Library of Renderers
– Extensible at runtime
– Basic HTML RenderKit is part of the specification

[email protected]
 Introduction

• Rapid user interface development

– Bean population
– Form validation
– Automatic conversion
– Easy localization
• Removes plumbing of JSP
• Reusable UI components
• Event driven model
• Additional components made by third-party
developers
[email protected]
 Introduction
• Follows a specification
– JSF 1.1 (JSR127)
• Final Release 2: May, 27th 2004
• Requires JSP 1.2 and Servlet API 2.3
– JSF 1.2 (JSR252)
• Public Review: April 14th 2005
• Approved by the executive committee for SE/EE
• Requires JSP 2.1 and Servlet API 2.4
• Two major implementations
– Sun RI
• Available version of JSF 1.1
• CVS version of JSF 1.2
– Apache MyFaces
• Focused on JSF 1.1
• More components

[email protected]
 JSF Projects
• MyFaces Tomahawk
• MyFaces Trinidad
• Oracle ADF Faces (Rich Client extends the
Apache Trinidad)
• ICEfaces
• Rich Faces
• MobileFaces
• Ajax4jsf
• YUI4JSF(JavaServer Faces based on Yahoo
UI library )
• Apache Shale
• JBoss Seam
[email protected]
 MyFaces Tomahawk
• MyFaces provides a series of JSF components that go
beyond the JSF specification. These components are
100% compatible with the Sun JSF 1.1 Reference
Implementation (RI) or any other JSF 1.1 compatible
implementation. Of course the custom components can
also be used with the Apache MyFaces JSF
implementation.

• In addition to custom components not found in the JSF

specification, the MyFaces components bundle also
includes an "extended" version of some of the default
components. These are basically components that exist in
either the core or html tag libraries but additional
functionality has been addded that goes beyond the
specification.

[email protected]
 MyFaces Tomahawk
• Example: <t:inputText> - This is similar to the
<h:inputText> component but it provides
additional attributes such as forceId . When this
attribute is true the HTML generated will used
the id specified by the code id/code attribute
instead of the one normally generated by
following the JSF specification.
• Converters - MyFaces components project
contains several custom objects that do not
implement UIComponent . Some of these
include objects that implement the Converter
interface.
• Tiles Support - MyFaces provides a custom
solution to allow the use of Tiles and JSF
together

[email protected]
 MyFaces Trinidad
• Apache MyFaces Trinidad is a JSF framework including a
large, enterprise quality component library, supporting
critical features such as accessibility (e.g. Section 508),
right-to-left languages, etc. It also includes a set of
framework features, including:

• Partial-page rendering support for the entire

component set
• Integrated client-side validation

• A dialog framework

• pageFlowScope, for communicating between pages

[email protected]
 Oracle ADF Faces
• Oracle ADF Faces Rich Client extends the Apache Trinidad
component framework to provide a rich set of AJAX-
enabled JSF components that radically simplifies rich
internet application development.

• Over 100+ AJAX-enabled components

• Extensive data visualization component set
• JSF 1.2 Support
• Complete JavaScript API
• Drag and Drop Framework
• Dialog and Popup Framework
• Navigation Menu Framework
• Built-in Internationalization and Accessiblity support

[email protected]
 Oracle ADF Faces
• Support for Page templates, reusable page
regions, and declarative components
• Partial Page Rendering
• Advanced Data Streaming
• Support for Skinning
• Integration with ADFc to support TaskFlows
and bookmarking
• Integration with ADFm to support data
bindings.
• Oracle ADF Security Support

[email protected]
 ICEfaces
• The ICEfaces Component Suite provides a complete set of
enhanced standard and custom JavaServer Faces (JSF)
components. These components provide the following
additional benefits over other JSF components:

• Optimized to fully leverage ICEfaces Direct-to-Dom

rendering technology providing seamless incremental
user-interface updates for all components without full-
page refreshes (partial-page rendering).

• Support for additional attributes for ICEfaces-specific

features such as effects, partialSubmit,
renderedOnUserRole, etc.

• Support for comprehensive component styling via

predefined component style sheets that are easily
customized
[email protected]
 ICEfaces
• Using the ICEfaces Component Suite complete JSF applications
may be rapidly developed that fully leverage the rich
application features that ICEfaces provides:
• Smooth, incremental page updates without full-page refreshes.

• Asynchronous server-initiated user-interface updates without

polling.

• Rich AJAX-enabled web applications with no JavaScript

development required.

• User context preservation during page update, including

scrollbar positioning and user focus.

• Fine-grained user interaction during form entry that augments

the standard submit/response loop.

[email protected]
 RichFaces
• RichFaces is a rich component library for JSF and an
advanced framework for easily integrating AJAX
capabilities into business application development.

• The RichFaces components come ready to use out-of-

the-box, so developers can immediately save time in
taking advantage of component features to create Web
applications that provide greatly improved user
experience more reliably and more quickly.

• RichFaces also includes strong support for the

skinnability of JSF applications. RichFaces also takes full
advantage of the benefits of the JSF framework including
lifecycle, validation, and conversion facilities, along with
the management of static and dynamic resources.

[email protected]
 MobileFaces
• MobileFaces is a core library to extend JSF
web application to mobile devices.

• MobileFaces automatically renders standard

JSF page to different end devices.

• Open architecture with source code for further

development e.g. to support more mobile
features.

[email protected]
 MobileFaces
• MobileFaces is compatible with any JSF implementation.

• MobileFaces consists of
• DeviceManager
• Media Adaptor
• Content Filter
• Custom Renderkits for adapt web to mobile
• XHTML-MP, cHTML, WML, HTML
• Script Renderers

• MobileFaces is an open structure for easy add-on

extension for standard JSF frameworks.
MobileFaces architecture

[email protected]
[email protected]
[email protected]
MobileFaces

[email protected]
 Apache Shale
* Key Functionality:

View Controller
Dialog Handler
Clay Plug-In
Tiger Extensions
Remoting

* Other Features:

Application Controller
JNDI and Spring Integration
Unit Testing Framework
Struts Feature Integration
(Validator, Tiles, Token)

[email protected]
 Apache Shale
* Key Functionality:

View Controller
Dialog Handler
Clay Plug-In
Tiger Extensions
Remoting

* Other Features:

Application Controller
JNDI and Spring Integration
Unit Testing Framework
Struts Feature Integration
(Validator, Tiles, Token)

[email protected]
 JBoss Seam
JBoss Seam is a powerful new application framework for
building next generation Web 2.0 applications by unifying
and integrating technologies such as :

- Asynchronous JavaScript and XML (AJAX),

- Java Server Faces (JSF),
- Enterprise Java Beans (EJB3),
- Java Portlets and Business Process Management (BPM).

[email protected]
 Ajax4JSF
Java Server Faces provided a Component Based
Architecture for building User Interface
Components for the Web Application.

Ajax aims in providing Faster Response to the

Client Applications by reloading only the needed
Data. Wouldn't be nice to take the advantages
of both Jsf and Ajax for developing Robust Web
Applications. Ajax4Jsf provides solution for this.

Ajax4Jsf is the integration of JSF with Ajax

(which stands for Asynchronous JavaScript and
Xml), thereby providing Ajax Support to the Jsf
UI Components.
[email protected]
[email protected]
[email protected]
 Lifecycle phases
• Restore View: recreates the server-side component tree

• Apply Request Values: copies request parameters to

component submitted values

• Process Validations: converts then validates the submitted

values

• Update Model Values: copies values to the model

• Invoke Application: invokes action listeners then actions

• Render Response: saves states and loads the next view

[email protected]
 Lifecycle of JSF
Response Complete Response Complete

Request Restore Apply Process Process Process

View Request Events Validation Events
Values

Render Response

Response Complete Response Complete

Response Render Process Invoke Process Update

Response Events Application Events Model
Values

Conversion Errors / Render Response

Validation or conversion errors / Render

Response

[email protected]
[email protected]
 (immediate)
ValueChangeEvent

(immediate) ValueChangeEvents
ActionEvents

PhaseEvents PhaseEvents PhaseEvents PhaseEvents

Apply
Restore Request Process
View Values Validations

ActionEvents

PhaseEvents PhaseEvents PhaseEvents

Render Invoke Update

Response Application Model Values

The Processing of events throughout the request processing lifecycle

[email protected]
 Web Application Start-up
Upon receiving a JSF request, the JSF implementation much launch, or
Acquire, references to several processes/services that must be available
To JSF web application running in a servlet or portlet environment.

When a JSF web application starts, four factories are instantiated :

1. ApplicationFactory : creates the Application instance.

2. LifecycleFactory : returns a LifeCycle instance for a lifecycle id.
3. RenderKitFactory : returns a RenderKit instance
4. FaesContextFactory : create an instance of FacesContext instance
used to represent contextual information
associated with the incoming request and
eventually with the response.

[email protected]
Application Creation
[email protected]
 Application instance
• Each JSF web application has one Application Factory

• This factory class is responsible for creating and replacing the

Application instance that is required by all applications
utilizing JSF.

• Application instance will then serve other processes with

services supported by this instance.

• The JSF configuration file, faces-config.xml is read once

during the creation of the web application and stored in
the Application instance.

[email protected]
 RenderKit instance

• The RenderKitFactory is responsible for returning a RenderKit

instance based on the RenderKit identifier for the application.

• The HTML RenderKit is identified by a string constant

RenderFactory.HTML_BASIC_RENDER_KIT.

[email protected]
 Lifecycle instance

• The Lifecycle instance is in charge of invoking processing

logic to implement the required functionality for each phase
of the request-processing lifecycle.

[email protected]
 FaceContext instance

• FacesContext is used to represent contextual information

associated with the incoming request and eventually
creating the response.

[email protected]
 Initial Request

• When the user access the application for the first time, an initial
request is sent to the FacesServlet, which dispatches the
request to the JSF Lifecycle instance.

[email protected]
 Restore View Phase
• The first phase of the JSF lifecycle is the Restore View Phase

• It is used to check whether this page has been requested

earlier or if this is a new request.

• JSF lifecycle is responsible for restoring a view from the

server and client state.

• During the first request for this view, the ViewHandler.restoreView()

method will return null, since there is no stored state.

• If the return value is null, the Restore View phase will call
renderResponse() on FacesContext for this request.

[email protected]
 Restore View Phase
• The renderReponse() method will indicate that when this
phase is done, the render() method is called to execute phase.6
(Render Reponse), without proceeding with phases 2 through 5.

• Subsequently, the Restore View phase will call the

ViewHandler.createView() method to create the component
hierarchy root – UIViewRoot and attach it to the FacesContext.

[email protected]
[email protected]
 Render Response Phase
• When the renderResonse() method is called during the Restore
view phase, the lifecycle skips directly to the render() method,
which is responsible for performing the Render Response phase.

• During this phase, the ViewHandler.renderView() method is

called to execute the JSP document.

• The renderView() method will pass the value of the viewId

property acquired from the UIViewRoot noade as a context-
relative path to the dispatch() method of the ExternalContext
associated with the request.

• The dispatch() method will forward the value of the viewId

property (ex., /login.jspx as a context-relative path) to the
Web container

[email protected]
[email protected]
 Render Response Phase
• Since, the JSF-specific mapping is not part of the forwarded
request, the request is ignored by the FacesServlet and
passed to the JSP container, which in turn will locate the
JSP based on the context-relative path and execute the
JSP page matching the viewId (ex., /login.jspx)

• Before processing and executing the JSF JSP document,

the JSP runtime first determine the content type and
character encoding to use.

• For JSF to work in harmony with the JSP lifecycle, the

<f:view> tag needs to be present.

[email protected]
 Render Response Phase
• The <f:view> tag is a JSP body tag that buffers all the rendered
output from the nested JSF components.

• <f:view> tag serves as a container for all other JSF components.

• <f:view> tag is responsible for creating and storing an instance

of the ResponseWriter on the FacesContext.

• The createResponseWriter() method creates a new instance of

ResponseWriter for the specified content type and character
encoding.

• The ResponseWriter is responsible for writing the generated

markup to the requesting client, in this case the <f:view>
body content buffer.

[email protected]
 Render Response Phase
• For each JSF JSP tag within <f:view> during the initial render,
a JSF component is created and attached to the component
hierarchy (components are attached under UIViewRoot of
FacesContext.

• For <h:form>, an instance of HtmlForm component is

created and attached to the UIViewRoot.

• The tag then calls encodeBegin() method of the HtmlForm.

• The encodeBegin() method on the Renderer calls methods on

the ResponseWriter to write the markup for the HTML
form element -- <form method=“” action=“”>.

[email protected]
 Render Response Phase
• The process continues, and all nested components within the
HtmlForm component are rendered and added to the <f:view>
body content buffer.

• The closing tag for the <h:form> tag calls the encodeEnd()
method of the Renderer.

• HtmlFormRenderer, which in turn calls the writeState() method

on the ViewHandler.

• The writeState() method passes a token to the ResponseWriter

which is added to the <f:view> body content buffer.

• The encodeEnd() method then calls methods on the

ResponseWriter to write the closing tag for the HTML form element.

[email protected]
 Render Response Phase
• The </f:view> end tag calls the writeState() method on the
StateManager.

• Depending on the init parameter – STATE_SAVING_METHOD,

the StateManager stores the state in the session on the
server or delegates to the ResponseStateManager to save
state on the client replacing the token with the serialized state.

• After the state has been saved, the buffer is flushed out to the
client to the client, and execution of any remaining non-JSF JSP
tags will take place. The page is now rendered in the browser.

[email protected]
[email protected]
[email protected]
[email protected]
Replacing token with serialized state and closing </f:view>

[email protected]
Restore View Phase (Postback Request)

(Postback Request)

[email protected]
Apply Request Values Phase

[email protected]
Process Validation Phase

[email protected]
Update Mode Phase

[email protected]
Invoke Application Phase

[email protected]
Postback with Navigation

[email protected]
Render Response on postback

[email protected]
 JSF’s Application-related classes
Event Handling <<interface>> *
UI Components
FacesListener *
<<interface>> 1
PhaseListener

Other UI
<<interface>> <<interface>> UIComponent
Components
ActionListener ValueChangeListener
<<use>>

<<use>> <<use>>
PhaseEvent
UIViewRoot
ActionEvent ValueChangeEvent
<<instantiate>>
1
<<instantiate>>
DefaultActionListener
FacesEvent
Context
1
1

FacesContext ExternalContext

Application
<<instantiate>>
MethodBinding
Application
*

<<instantiate>>
FacesMessage

Managed/Backing ValueBinding
[email protected]
beans
Application represents a per-web-application singleton object where applications based on
JavaServer Faces (or implementations wishing to provide extended functionality) can register
application-wide singletons that provide functionality required by JavaServer Faces. Default
implementations of each object are provided for cases where the application does not
choose to customize the behavior.

The instance of Application is created by calling the getApplication() method of

ApplicationFactory. Because this instance is shared, it must be implemented in a thread-safe
manner.

The application also acts as a factory for several types of Objects specified in the Faces
Configuration file.
createComponent(java.lang.String),
createConverter(java.lang.String),
createMethodBinding(java.lang.String, java.lang.Class[]),
createValidator(java.lang.String), and createValueBinding(java.lang.String).

[email protected]
Application Instance provides access to global resources

Class or Package Where to get reference Description

Interface
Application Javax.faces. FacesContext. Provides access to
application getApplication() supported
Locales, default render kit,
And factory methods for
creating UI components,
converters, validators and
value-binding expressions.
ValueBinding Javax.faces.el Application. Represents, a value-binding
createValueBinding expression, and provides the
UIComponent. Ability to set or evaluate that
getValueBinding() expression
MethodBinding Javax.faces.el Application. Represents a method-
createMethodBinding() binding
expression, and provides the
ability to set or evaluate that
Expression.

[email protected]
FacesContext contains all of the per-request state information related to the
processing of a single JavaServer Faces request, and the rendering of the
corresponding response. It is passed to, and potentially modified by, each phase
of the request processing lifecycle.

A FacesContext instance is associated with a particular request at the beginning

of request processing, by a call to the getFacesContext() method of the
FacesContextFactory instance associated with the current web application.

The instance remains active until its release() method is called, after which no
further references to this instance are allowed. While a FacesContext instance is
active, it must not be referenced from any thread other than the one upon which
the servlet container executing this web application utilizes for the processing of
this request.

[email protected]
 Context-related JSF classes represent the application’s
Current User-related state
Class or Package Where to get reference Description
Interface

FacesContext Javax.faces. Either passed in, or via Represents the state of the
Context FacesContext. Current request. You can get
getCurrentInstance() access to the current view,
add a new message. This is
the main entry point to JSF
API, for developing an
application.
FacesMessage Javax.faces. FacesContext. Represents a message for
Application getMessages() the current request(for
errors). FacesContext keeps
a list of messages.
Messages can be displayed
with an HtmlMessage or
HtmlMessages component.
ExternalContext javax.faces FacesContext. Provides access to the
.context getExternalContext() hosting environment, which
is either a servlet or portlet
conainer. From here, you can
get access to the underlying
session, request, response
[email protected] and so on.
The base UI component classes, and their HTML subclasses. All of them
Are in the javax.faces.component package
Class Family HTML Subclasses Description

UIComponent N/A N/A The abstract base class for

all components.

UIComponetBas N/A N/A Abstract base class with

e basic implementations of
almost all UICompnents
methods.
UIColumn Column N/A A table column. Uses to
configure template columns,
for the parent UIData
component
UICommand Command HtmlCommandButton A user command
HtmlCommandLink
UIData Data HtmlDataTable Represents a data-aware
component that cycles
through rows in the
underlying data source and
exposed individual rows to
child components. Require
UIColumn components.

[email protected]
The base UI component classes, and their HTML subclasses. All of them
Are in the javax.faces.component package
Class Family HTML Subclasses Description

UIForm Form HtmlForm An input form; must enclose

all input components

UIGraphic Image HtmlGraphicImage Displays an image based on

its URL

UIInput Input HtmlInputHidden A component that displays

HtmlInputSecretnput its output and collects input
HtmlInputText
HtmlInputTextarea
UIMessage Message HtmlMessage Displays messages for a
specific component
UIMessages Messages HtmlMessages Displays all messages

[email protected]
The base UI component classes, and their HTML subclasses. All of them
Are in the javax.faces.component package
Class Family HTML Subclasses Description

UIOutput Output HtmlOutputFormat Holds a read-only and

HtmlOutputLabel displays it to the user
HtmlOutputLink
HtmlOutputText
UIParameter Parameter N/A Represents a parameter for
a parent component

UIPanel Panel HtmlPanelGrid Groups together a set of

HtmlPanelGroup child components

UISelectBoolean Chechbox HtmlSelectBoolean- Collects and displays a

Checkbox single boolean value
UISelectItem SelectItem N/A Represents a single item or
item group. Usually used
with UISelectMany or
UISelectOne

[email protected]
The base UI component classes, and their HTML subclasses. All of them
Are in the javax.faces.component package
Class Family HTML Subclasses Description

UISelectItems SelectItems N/A Represents multiple items

or item groups. Usually
used with UISelectMany or
UISelectOne
UISelectMany SelectMany HtmlSelectManyCheckbox Displays a set of items,
HtmlSelectManyListbox and allows the user to
HtmlSelectManyMenu select zero or more of
them
UISelectOne SelectOne HtmlSelectOneRadio Displays a set of items,
HtmlSelectOneListbox and allows the user to
HtmlSelectOneMenu select only one of them

UIViewRoot ViewRoot N/A Represents entire view,

contains all components
on the page

[email protected]
Accessing Managed Beans Programmatically

[email protected]
Programatically accessing userid

FacesContext context = FacesContext.getCurrentInstance();

ValueBinding currentBinding = context.getApplication().

createValueBinding(“#{userBean.userid)”);

String userid = (String) currentBinding.getValue(context);

To update this value

currentBinding.setValue(context, “NewUserID”);

[email protected]
The entire UserBean instance can be retrieved by using the
Expression #{userBean} without any properties

FacesContext context = FacesContext.getCurrentInstance();

ValueBinding currentBinding = context.getApplication().

createValueBinding(#{userBean});

UserBean myuserbean = (UserBean) currentBinding.getValue(context);

(OR)

FacesContext context = FacesContext.getCurrentInstance();

UserBean myuserbean =
Context.getApplication().getVariableResolver().resolveVariable(context,
“uservean”);

[email protected]
Invoking a method on a managed bean programmatically

Application application = FacesContext.getCurrentInstance().

getApplication();

MethodBinding mb = application.createMethodBinding(
“#{userBean.addConfirmedUser}”, null);
hai
try {
mb.invoke(context,null);
}

catch (EvaluationException e)
{
Throwable wrapped = e.getCause();
}

[email protected]
Using JSF Tag Libraries

[email protected]
Two Tag Libraries

1. jsf_core
– Defines other JSF related tags
– Independent of any rendering technology

2. html_basic
– Defines tags for representing common HTML
user interface components

JSP page need to declare them

<%@ taglib uri="http://java.sun.com/jsf/html/"

prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core/"
prefix="f" %>

[email protected]
Types of Core Tags

•Event handling tags

•Attribute configuration tag

•Data conversion tags

•Facet tag

•Localization tag

•Parameter substitution tag

•Tags for representing items in a list

•Container tag

•Validator tags
[email protected]
•Output tag
Event Handling Tags and Attributes

<f:actionListener> or actionListener attribute

– Registers an action listener on a component

<f:valueChangeListener> or valueChangeListener attribute

– Registers a value-change listener on a parent component

<f:phaseListener>
– Registers a PhaseListener instance on a
UIViewRoot component

[email protected]
Example: actionListener attribute in
chooseLocale.jsp

<h:commandButton id="NAmerica" action="storeFront"

value="#{bundle.english}"
actionListener="#{carstore.chooseLocaleFromLink}">
</h:commandButton>

[email protected]
Example: <f:valueChangeListener>

<h:inputText id="firstName" value="#{customer.firstName}"

required="true">
<f:valueChangeListener type="carstore.FirstNameChanged" />
</h:inputText>

carstore is a pacakge

FirstNameChanged is a class that implements

valueChangeListener interace

[email protected]
Attribute Configuration Tag

<f:attribute>
– Adds configurable attributes (key/value pairs) to a
parent components

Parameter Substitution Tag

<f:parameter>
– Substitutes parameters into a MessageFormat
instance and to add query string name/value pairs
to a URL

[email protected]
Data Conversion Tags

<f:converter>
– Registers an arbitrary converter on the parent
Component

<f:convertDateTime>
– Registers a DateTime converter instance on the
parent component

<f:convertNumber>
– Registers a Number converter instance on the
parent component

[email protected]
Facet Tag

<f:facet>
– Signifies a nested component that has a special
relationship to its enclosing tag

Localization Tag

<f:loadbundle>
– Loads a resource bundle, stores properties as a
Map

[email protected]
Tags for Representing Items in a List

<f:selectItem>
– Represents one item in a list of items in a
UISelectOne or UISelectMany component

<f:selectItems>
– Represents a set of items in a UISelectOne or
UISelectMany component

[email protected]
Container Tag

<f:subview>

– Contains all JavaServer Faces tags in a page that

is included in another JavaServer Faces page

Output Tags
<f:verbatim>
– Generates a UIOutput component that gets its
content from the body of this tag

[email protected]
Validator Tags

<f:validateDoubleRange>
– Registers a DoubleRangeValidator on a component

<f:validateLength>
– Registers a LengthValidator on a component

<f:validateLongRange>
– Registers a LongRangeValidator on a component

<f:validator>
– Registers a custom Validator on a component

[email protected]
<f:view> element

- Represents UIViewRoot component

- All component tags on the page must be

enclosed in the view tag

<f:view>
... other faces tags, possibly mixed with other
content ...
</f:view>

-Optional locale attribute

– Overrides the Locale stored in the UIViewRoot

[email protected]
Nested View's

Use <f:subview> element in order to include a

JSF page inside another JSP page

<f:subview>
jsp:include page="theNestedPage.jsp"
<f:subview>

[email protected]
Using HTML Tags

[email protected]
HTML Tags

* Used to control display data or accept data

from the user

* Common attributes
– id: uniquely identifies the component

– value: identifies an external data source mapped

to the component's value

– binding: identifies a bean property mapped to the

component instance

[email protected]
UIForm & <h:form> tag

* UIForm UI component
– An input form with child components representing
data that is either presented to the user or
submitted with the form

* Encloses all of the controls that display or

collect data from the user

* Include HTML markup to layout the controls

on the page
– <h:form> tag itself does not perform any layout

[email protected]
UICommand & <h:commandButton>

* UICommand component performs an action

(submit requests) when it is activated

– No need to use onchange to force form submits

with value change events

* Most common renderers are Button and Link

[email protected]
UICommand & <h:commandButton>

* Additional attributes
– action:
* is either a logical outcome String or a JSF EL
expression that points to a bean method that
returns a logical outcome String

* In either case, the logical outcome String is used

by the navigation system to determine what page

to access when the UICommand component is

activated

– actionListener:

* is a JSF EL expression that points to a bean

method that processes an ActionEvent fired by
the UICommand component
[email protected]
Example1: <h:commandButton>

<h:commandButton action="#{carstore.buyCurrentCar}"
value="#{bundle.buy}" />

*action attribute

– references a method on the CarStore backing bean

that performs some processing and returns an
outcome
– outcome is passed to the default NavigationHandler,
which matches the outcome against a set of navigation
rules defined in the application configuration file.

* value attribute
– references the localized message for the button's label
– bundle part of the expression refers to the
ResourceBundle that contains a set of localized
messages
[email protected]
Example1: <h:commandButton>

<h:commandButton action="#{carstore.buyCurrentCar}"
value="#{bundle.buy}" />

*action attribute

– references a method on the CarStore backing bean

that performs some processing and returns an
outcome
– outcome is passed to the default NavigationHandler,
which matches the outcome against a set of navigation
rules defined in the application configuration file.

* value attribute
– references the localized message for the button's label
– bundle part of the expression refers to the
ResourceBundle that contains a set of localized
messages
[email protected]
Example1: buyCurrentCar() method of CarStore.java

public class CarStore extends Object {

...
public String buyCurrentCar() {
getCurrentModel().getCurrentPrice();
return "confirmChoices";
}
...
}

[email protected]
Example1: Navigation rule for “conformChoices”
in faces- config.xml

<navigation-rule>
<from-view-id>/carDetail.jsp</from-view-id>
<navigation-case>
<description>
Any action that returns "confirmChoices" on
carDetail.jsp should cause navigation to
confirmChoices.jsp
</description>
<from-outcome>confirmChoices</from-outcome>
<to-view-id>/confirmChoices.jsp</to-view-id>
</navigation-case>
</navigation-rule>

[email protected]
Example1: Resources.properties
file of carstore
sunroofLabel=Sunroof
cruiseLabel=Cruise Control
keylessLabel =Keyless Entry
securityLabel =Security System
skiRackLabel =Ski Rack
towPkgLabel =Tow Package
gpsLabel =GPS
buy=Buy
back=Back
buyLabel =Thanks for stopping by!

[email protected]
<h:commandButton>

<h:commandButton id="Custom“
value="#{bundle.Custom}"
styleClass="#{carstore.customizers.Custom.buttonStyle}"
actionListener="#{carstore.choosePackage}" />

choose Package() method of CarStore.java

public class CarStore extends Object {
...
public void choosePackage(ActionEvent event) {
String packageName = event.getComponent().getId();
choosePackage(packageName);
}
public void choosePackage(String packageName) {
// Business logic processing } ... }

[email protected]
action vs. actionListener

action
– Designed for business logic
– Participate in navigation handling

actionListener
– Receives ActionEvent object as a parameter
– Handles user interface logic
– Does not participate in navigation

[email protected]
UIInput & UIOutput Components

* UIInput component displays a value to a user

and allows the user to modify this data
– The most common example is a text field

* UIOutput component displays data that cannot be modified

– The most common example is a label

* Conversions can occur

*Both UIInput and UIOutput components can be rendered

in several different ways

[email protected]
UIInput Component and Renderer Combinations

* inputHidden
– Allows a page author to include a hidden variable in a page

* inputSecret
– Accepts one line of text with no spaces and displays it as a

set of asterisks as it is typed

* inputText
– Accepts a text string of one line

* inputTextarea
– Accepts multiple lines of text

[email protected]
UIOutput Component and Renderer Combinations

* outputLabel
– Displays a nested component as a label for a specified
input field

* outputLink
– Display an <a href > tag that links to another page
without generating an ActionEvent

* outputMessage
– Displays a localized message

* outputText
– Displays a text string of one line

[email protected]
Attributes of <h:inputText> and <h:outputText>

* id
* value
* converter
* validator
– JSF EL expression pointing to a backing-bean
method that performs validation on the
component's data

* valueChangeListener
– a JSF EL expression that points to a backing-
bean method that handles the event of entering a
value in this component

<h:inputText value="#{customer.lastName}" />

[email protected]
UIPanel Component
* Is used as a layout container for its children
* Must have the number of rows Predetermined

UIIPanelComponent and Renderer Combinations

* panelGrid
– Displays a HTML table
– Used to display entire table
– Render attributes are

* columnClasses, columns, footerClass, headerClass,

panelClass, rowClasses

* panelGroup
– Groups a set of components under one parent
– Used to represent rows in the tables

[email protected]
<h:panelGrid columns="2" footerClass="subtitle"
headerClass="subtitlebig" styleClass="medium"
columnClasses="subtitle,medium">
<f:facet name="header">
<h:outputText value="#{bundle.buyTitle}" />
</f:facet>
<h:outputText value="#{bundle.Engine}" />
<h:outputText
value="#{carstore.currentModel.attributes.engine}" />
<h:outputText value="#{bundle.Brakes}" />
...
<f:facet name="footer">
<h:panelGroup>
<h:outputText value="#{bundle.yourPriceLabel}" />
<h:outputText
value="#{carstore.currentModel.currentPrice}" />
</h:panelGroup>
</f:facet>
...
</h:panelGrid> [email protected]
 Managed beans
• Usually represent the model or the user’s
session
• Instantiated and populated by JSF
• Different scopes
– Request
– Session
– Application

[email protected]
 Types of Bean Methods
• Getter and setter methods of properties
– Follows JavaBeans convention
• JSF related methods
– Validation methods
– Action event handler methods
– Value change event handler methods
– Navigation handling methods (Action
methods)
[email protected]
 Managed beans
• A simple object bean
public class User
{
private String name;

public void setName(String name)

{
this.name = name;
}

public String getName()

{
return name;
}

public String doSomething()

{
// Do things
return “display”;
}
}
[email protected]
 Managed beans
• Defined in faces-config.xml

<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>com.example.User</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

[email protected]
 Managed beans
• Properties can be initialized from within faces-config.xml
<managed-bean>
<managed-bean-name>apple</managed-bean-name>
<managed-bean-class>com.example.Fruit</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>name</property-name>
<property-value>Apple</property-value>
</managed-property>
<managed-property>
<property-name>variety</property-name>
<list-entries>
<value-class>java.lang.String</value-class>
<value>Golden</value>
<value>Fuji’s</value>
<value>Granny Smith</value>
</list-entries>
</managed-property>
</managed-bean>

[email protected]
 Managed beans
• Map entries can also be part of the initialization

<map-entries>
<key-class>java.lang.Integer</key-class>
<map-entry>
<key>1</key>
<value>First value</value>
</map-entry>
<map-entry>
<key>2</key>
<value>Second value</value>
</map-entry>
<map-entry>
<key>3</key>
<value>Third value</value>
</map-entry>
</map-entries>

[email protected]
 Validation Methods

• A validation method must accept a

FacesContext and a UIInput component
as parameters
– just like the validate method of the Validator
interface does
• Only values of UIInput components or
values of components that extend UIInput
can be validated
• A component refers to this method with its
validate attribute
[email protected]
Example: ValidateEmail() Method

public void validateEmail(FacesContext context, UIInput toValidate) {

String message = "";
String email = (String) toValidate.getValue();
if (email.indexOf('@') == -1) {
toValidate.setValid(false);
message = CoffeeBreakBean.loadErrorMessage(context,
CoffeeBreakBean.CB_RESOURCE_BUNDLE_NAME,
"EMailError");
context.addMessage(toValidate.getClientId(context),
new FacesMessage(message, ""));
} else {
toValidate.setValid(true);
} }

[email protected]
 Action Event Handler Method

• Handles an ActionEvent
– Accepts an ActionEvent and returns void
• Referenced with the component's
actionListener attribute
• Only UI components that implement
ActionSource interface can refer to this method
– UICommand
– UIButton

[email protected]
 Example:
chooseLocaleFromLink()
• public void chooseLocaleFromLink(ActionEvent
event) {
String current = event.getComponent().getId();
FacesContext context =
FacesContext.getCurrentInstance();
context.getViewRoot().
setLocale((Locale) locales.get(current));
resetMaps();
}
[email protected]
Action Handler (Navigation Handler) Method

• Takes no parameters and returns an

outcome String
• Is referenced with the component's
action attribute

[email protected]
How to reference bean methods in Custom Tags?

• As values of the following attributes

– action
– actionListener
– validator
– valueChangeListener

• Value of attributes are in the form of JSF EL expression

• Only UIInput components or components that

extend UIInput can use the validator or valueChangeListener
attributes

<h:inputText ...validator="#{CarBean.validateInput}"
valueChangeListener="#{CarBean.processValueChange}" />

[email protected]
Types of Binding

• Binding a Component Value to a Property

• Binding a Component Instance to a Bean
Property
– This bean is called Backing bean
• Binding a Component Value to an Implicit
Object (System Object)

[email protected]
 Binding a Component Value to a Property
• To bind a component's value to a bean
property
– You must first specify the name of the bean
and property as the value of the value attribute
using a JSF EL expression #{X.Y}
• X is value of <managed-bean-name>
• Y is value of <property-name>
– Bean and its properties are declared in
Application Configuration File (faces-config.xml)

[email protected]
• Calling page
<h:outputText value="#{CarBean.carName}" />

• Bean declaration in App. Conf. File

<managed-bean>
<managed-bean-name>CarBean</managed-bean-name>
<managed-property>
<property-name>carName</property-name>
<value>Jalopy</value>
</managed-property>
...
</managed-bean>

[email protected]
Reasons for Binding a Component Value to
a Bean Property

• The page author has more control over the

component attributes.

• The backing bean has no dependencies on the

JavaServer Faces API (such as the UI component
classes), allowing for greater separation of the
presentation layer from the model layer.

• The JavaServer Faces implementation can perform

conversions on the data based on the type of the
bean property without the developer needing to
apply a converter.
[email protected]
Binding a UI Component Instance to a Bean Property

• A component instance can be bound to a bean

property using a JSF EL expression with the
binding attribute of the component's tag

• When a component instance is bound to a

backing bean property, the property holds the
component's local value.
– Conversely, when a component's value is bound to a
backing bean property, the property holds its model
value, which is updated with the local value during the
update model values phase of the life cycle.

[email protected]
Reasons for Binding a UI Component
Instance to a Bean Property

• The backing bean can programmatically

modify component attributes

• The backing bean can instantiate

components rather than let the page
author do so
[email protected]
 Example

• Calling page
<inputText
binding="#{UserNumberBean.userNoComponent}" />

• Bean class
UIInput userNoComponent = null;
...
public void setUserNoComponent(UIInput
userNoComponent) {
this.userNoComponent = userNoComponent;
}
public UIInput getUserNoComponent() {
return userNoComponent;
}
[email protected]
 Example:
• Calling page (bookcashier.jsp)
<h:selectBooleanCheckbox
id="fanClub"
rendered="false"
binding="#{cashier.specialOffer}" />

• Bean class (CashierBean.java)

public class CashierBean extends AbstractBean {
protected Date shipDate;
// ---------------------------------------------------- Component Properties
protected String name = null;
protected String shippingOption = "2";
protected String[] newsletters = new String[0];
UIOutput specialOfferText = null;
UIOutput thankYou = null;
UISelectBoolean specialOffer = null;
private CreditCardConverter creditCard = null;
private String stringProperty = "This is a String property";
[email protected]
Guideline
• In most situations, you will bind a component's
value rather than its instance to a bean property.
You'll need to use a component binding only
when you need to change one of the
component's attributes dynamically

• For example, if an application renders a

component only under certain conditions, it can
set the component's rendered property
accordingly by accessing the property to which
the component is bound.
[email protected]
Binding a Component Value to an Implicit Object

• Implicit objects
– applicationScope
– cookie
– facesContext
– header
– headerValues
– initParam
– param
– paramValues
– requestScope
– sessionScope
[email protected]
Example: Binding to Implicit Object
• Calling page
<h:outputText id=version
value="#{initParam.versionNo}“

• web.xml file
<context-param>
<param-name>versionNo</param-name>
<param-value>1.05</param-name>
</context-param>
[email protected]
Managed Bean vs Backing Bean

[email protected]
Managed Bean vs. Backing Bean

Managed bean is a JavaBean registered in

the faces-config file

– These beans have properties that are bound to

the values of UIComponents
– Uses value attribute
– <h:inputText
value="#{ManagedBean,propertyName}" ... />

[email protected]
Managed Bean vs. Backing Bean

* Backing bean is a special type of managed-bean

consisting of properties that are UIComponents
– Instead of the bean properties being bound to the
UIComponent values, they are instead bound to
the UIComponents themselves

– Uses binding attribute

<h:inputText
binding="#{BackingBean.someUICommandInstance}
" ... />

[email protected]
Managed Bean vs. Backing Bean

* Backing bean is a special type of managed-bean

consisting of properties that are UIComponents
– Instead of the bean properties being bound to the
UIComponent values, they are instead bound to
the UIComponents themselves

– Uses binding attribute

<h:inputText
binding="#{BackingBean.someUICommandInstance}
" ... />

[email protected]
Navigating between Pages

[email protected]
What is Navigation Model?

* A JSF page is represented by a component

tree, called a view, which is comprised of all
of the components on a page

* To load another page, the JSF implementation

accesses a component tree identifier and stores
the tree in the FacesContext

* The navigation model determines how this

tree is selected

[email protected]
How Does It Work?

1.When one of the components is activated--

such as by a button click--an ActionEvent is
emitted

– Any components implementing ActionSource (such

as UICommand) in the tree are automatically
registered with the default ActionListener

2.If the Invoke Application phase is reached,

the default ActionListener handles this event

[email protected]
3.The ActionListener retrieves an outcome--
such as "success" or "failure"--from the
component generating the event

– The component either literally specifies an outcome

or refers to an action method with its action property

– The action method performs some processing and

returns a particular outcome string

4.After receiving the outcome string, the

ActionListener passes it to the default
NavigationHandler

5.Based on the outcome, the currently displayed page,

and the action method that was invoked, the
NavigationHandler selects the appropriate component
tree by consulting the application configuration file
(facesconfig.xml)
[email protected]
Navigation Rules Defined Navigation Rules Defined
in faces-config.xml in faces-config.xml

[email protected]
Example: Navigate from /logon.jsp based
on outcome of #{LogonForm.logon}

<navigation-rule>
<from-view-id>/logon.jsp</from-view-id>
<navigation-case>
<from-action>#{LogonForm.logon}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/storefront.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-action>#{LogonForm.logon}</from-action>
<from-outcome>failure</from-outcome>
<to-view-id>/logon.jsp</to-view-id>
</navigation-case>
</navigation-rule>

[email protected]
<navigation-rule> Element

* Each <navigation-rule> element corresponds to

one component tree identifier, defined by the
optional <from-view-id> element
– Each rule defines all the possible ways to navigate
from one particular page in the application
– If there is no <from-view-id> element, the navigation
rules defined in the <navigation-rule> element apply
to all the pages in the application
– The <from-view-id> element also allows wildcard
matching patterns

* <from-view-id>/cars/*</from-view-id>

[email protected]
<navigation-case> Element and its Child Elements

* <navigation-case> element defines a set

of matching criteria
– navigation criteria are defined by optional
<from-outcome> and <from-action> elements

* <from-outcome> element defines a logical

outcome, such as "success"

* <from-action> element refers to an action

method that returns a String, which is the
logical outcome

[email protected]
Redirection

* The current request processing is terminated

and HTTP redirect is sent to the client
– The HTTP redirect response tells client which
URL to use for the next page
– The browser's URL will reflect the new page
(without the redirection, the browser's URL
displays the original URL)

[email protected]
 Navigation
• Controlled by JSF
– Each action results in a string (outcome) leading to a
new view ruled by faces-config.xml
• From-view-id is optional
• Wildcards * can be used in from-view-id
• </redirect> is optional and is only used to display the
new URL (/welcome.jsp in our case)
<navigation-rule>
<from-view-id>/ask*</from-view-id>
<navigation-case>
<from-outcome>display</from-outcome>
<to-view-id>/welcome.jsp</to-view-id>
</redirect>
</navigation-case>
</navigation-rule>

[email protected]
 Navigation
• Static
– <h:commandButton
action=“display”/>
• Dynamic
– <h:commandButton
action=“#{user.doSomething}”/>

[email protected]
 JSF expressions
• Invoke the property getter or setter of a
managed bean attribute
– value=“#{managedBeanName.propertyName}”

• Invoke the property getter or setter of a

managed bean attribute (Map)
– value=“#{managedBeanName.mapName[‘key’]}”
– value=“#{managedBeanName.mapName.key}”

• Invoke the property getter or setter of a

managed bean attribute (List)
– value=“#{managedBeanName.listName[0]}”
[email protected]
 JSF expressions
• Invoke a predefined property, some
examples:
– #{facesContext.externalContext.session.id}
– #{param.myId}
– #{header[“Accept-Encoding”]
– #{cookie[“myCookie”].value}
– #{requestScope[“myVariable”]}
– #{sessionScope[“myVariable”]}
– #{applicationScope[“myVariable”]}
– #{initParam[“myParam”]}

[email protected]
 JSF expressions
• Operators
– Arithmetic
• - + * / div % mod
– Relational
• == != < > <= >- eq ne lt gt ge
– Logical
• && || ! and or not
– Empty
• Empty (true for null, empty strings, empty arrays,
empty map, empty else, false otherwise)
[email protected]
 JSF expressions
• Examples
– ${10+3/2}
– ${10 >= 12}
– ${user.age >= 18)
– ${!(empty user.username)}
– ${(user.name == “toto”) ? “Toto” :
“Someone else”}

[email protected]
 Component Tree
• Created at Restore and View phase
• Access to each page components
• Component dynamic creation
• Access to each components in model

[email protected]
 Component Tree

• The view is defined in a JSP file with custom tag

libraries
...
<f:view>
<html>
<head><title>Ask name</title></head>
<body>
<h:form>
Your name: <h:inputText value=“#{cart.name}”/>
<h:commandButton value=“Display Me” action=“display”/>
</h:form>
</body>
</html>
</f:view>
...

[email protected]
 Component Tree

• The JSP tag library implementation builds the

tree
UIViewRoot
<f:view>

HtmlForm
<h:form>

HtmlInputText HtmlCommandButton
<h:inputText> <h:commandButton>

[email protected]
 Component Tree
• Components can be altered
– UIViewRoot component can be obtained
• FacesContext.getViewRoot();
– Components can be created
• FacesContext.
getApplication().
createComponent(
HtmlOutputText.COMPONENT_TYPE);
– Modified
• component.setValue(“newValue”);

[email protected]
 Component Tree
• Tree can be modified and viewed
– UIComponent.add(UIComponent);
– UIComponent
UIComponent.getParent();
• Programmer has full access to
customize the components at runtime
– FacesContext.
getApplication().
createMethodBinding(...);

[email protected]
 Component Tree

• The button triggers the addComponent()

method on the a managed bean
…
<h:form>
<h:commandButton
value=“Add Component”
actionListener=“#{componentBean.addComponent}”/>
</h:form>
…

[email protected]
 Component Tree
• The listener implementation retrieves the parent
of the triggered component and adds to the form
component a new child component on the fly
public void addComponent(ActionEvent actionEvent)
{
Application application = FacesContext.getCurrentInstance().
getApplication();
UIComponent form = event.getComponent().getParent();
UIComponent newOutput = application.
createComponent(
HtmlOutputText.COMPONENT_TYPE);
newOutput.setValue(”New Output Text”);
form.add(newOutput);
...
}

[email protected]
 Component Tree
public void addComponent(ActionEvent actionEvent)
{
Application application = FacesContext.getCurrentInstance()
.getApplication();

// Create a button component and customize it

UIComponent newButton = application
.createComponent(HtmlOutputText.COMPONENT_TYPE);
newButton.setValue(”New Button”);

// Bind the triggered method to a bean method

MethodBinding mb = application.
createMethodBinding("#{bean.method}");
newButton.setAction(mb);
…
// Retrieve the tree root
UIViewRoot root = FacesContext.getCurrentInstance().getViewRoot();
…
// Retrieve the formUIComponent and add the button to it
formUIComponent.add(newButton);
…
}

[email protected]
 View
• Taglib
– http://java.sun.com/jsf/html (common prefix:h)
– http://java.sun.com/jsf/core (common prefix:f)
• Most commons tags
– f:view
– h:form
– h:inputText
– h:outputText
– h:commandButton
–…
[email protected]
 View
<f:view>
<html>
<head><title>Ask name</title></head>
<body>
<h:form>
Your name: <h:inputText value=“#{cart.name}”/>
<h:commandButton value=“Display Me” action=“display”/>
</h:form>
</body>
</html>
</f:view> askname.jsp

<f:view>
<html>
<head><title>Welcome</title></head>
<body>
<h:outputText value=“#{cart.name}”/>
</body>
</html>
</f:view> welcome.jsp

[email protected]
 View - messages
• The faces context maintains a queue of
messages that can be created by any object
in the lifecycle
– Heavily used by Converters, Validators for errors
– Four kind
• Information
• Warning
• Error
• Fatal

[email protected]
 View - messages
• To display those messages
– <h:messages/> will display all the
messages, used mostly for debugging
– <h:message for=“someId”/> will display
the error messages for the component having
“someId” as id.

<h:inputText id=“userName” required=“true”/>

<h:message for=“userName”/>

[email protected]
 Validation
• Server side validation
• Error notification
• Standard validators bundled with JSF:
– validateDoubleRange
• Attributes ‘minimum’ and ‘maximum’
– validateLength
• Attributes ‘minimum’ and ‘maximum’
– validateLongRange
• Attributes ‘minimum’ and ‘maximum’

[email protected]
 Standard validation - usage
• To use a standard validator:

<h:inputText value=“#{user.weight}”>
<f:validateLongRange minimum=“10” maximum=“300”/>
</h:inputText>

[email protected]
 Custom validation
• Implements javax.faces.validator.Validator
public void validate( FacesContext context,
UIComponent component,
Object value)
throws javax.faces.validator.ValidatorException;

• Registered in faces-config.xml

<validator>
<validator-id>org.jboss.jsf.MyValidator</validator-id>
<validator-class>org.jboss.jsf.MyValidator</validator-class>
</validator>

[email protected]
 Custom validation - usage
• Three ways to use a custom validator:
• <h:inputText value=“#{user.weight}” validator=“#{user.weightValidator}” />

• <h:inputText value=“#{user.weight}”>
<f:validator validatorId=“org.jboss.jsf.MyValidator” />
</h:inputText>

• <h:inputText value=“#{user.weight}”>
<mylib:myWeightValidator minimum=“10” maximum=“300”/>
</h:inputText>

[email protected]
 Conversion
• HTML fields are string
• Managed beans attributes are any object
• Need for objectstring and stringobject
conversion methods
• Standard converters bundled with JSF:
BigDecimalConverter DoubleConverter
BigIntegerConverter FloatConverter
BooleanConverter IntegerConverter
ByteConverter LongConverter
CharacterConverter NumberConverter
DateTimeConverter ShortConverter
[email protected]
 Conversion - usage
• Different ways to use the converters:
• <h:inputText value=“#{user.weight}” converter=“javax.faces.Integer” />
• <h:inputText value=“#{user.weight}” converter=“user.weightConverter” />

• <h:inputText value=“#{user.weight}”>
<f:converter converterId=“javax.faces.Integer” />
</h:inputText>

• <h:inputText value=“#{user.weight}”>
<f:convertInteger />
</h:inputText>

[email protected]
 Conversion - add your own
• Implements javax.faces.convert.Converter
public abstract Object getAsObject( FacesContext context,
UIComponent component,
String value)
throws javax.faces.convert.ConverterException;

public abstract String getAsString( FacesContext context,

UIComponent component,
Object value)
throws javax.faces.convert.ConverterException;

<converter>
<converter-id>org.jboss.jsf.PhoneNumber</converter-id>
<converter-class>org.jboss.jsf.PhoneNumberConverter</converter-class>
</converter>

[email protected]
 Events
• Three kinds
– Value change events
• Fired when an input value changed
– Action events
• Fired by command components like commandButton or
commandLink
• Typically used for user interface logic (business logic
remains in the actions)
– Phase events
• Fired by the JSF lifecycle

[email protected]
 Events
• Each listener can change the lifecycle by
– Calling FacesContext.renderResponse()
– Calling
FacesContext.responseComplete()

[email protected]
Events – ValueChangeListener
• Triggered when a value changed, two ways:
– Public method with an ActionEvent parameter
• valueChangedListener=“${bean.listener}”
– Public class implementing
javax.faces.event.ValueChangeListener
• <f:valueChangeListener
type=“com.example.MyListener”/>
• public void
processValueChange(ValueChangeEvent
event)
– Can set several listeners
[email protected]
 Events – ActionListener
• Triggered before an action is processed,
two ways:
– Public method with an ActionEvent parameter
• actionListener=“${bean.listener}”
– Public class implementing
javax.faces.event.ActionListener
• <f:actionListener
type=“com.example.MyListener”/>
• public void processAction(ActionEvent
event)
– Can set several listeners
[email protected]
 Components
• Fast development
• Available on the web open source or not
– MyFaces: Tomahawk
• Calendar
• Tree view
• Tabbed panel
• File upload
• …
–…
[email protected]
 Custom component
• For better reusability
• Minimal requirements:
– Definition in TLD of the new tag
– Reference the component in faces-
config.xml
– Tag class extending UIComponentTag
– UI class extending UIComponentBase
element

[email protected]
 Custom component - Taglib
• To add a custom converter to a taglib:
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>1.2</jsp-version>
<short-name>myTaglib</short-name>
<uri>http://example.com/jsftaglib</uri>
<tag>
<name>mytag</name>
<tag-class>com.example.MyTag</tag-class>
<body-content>empty</body-content>
<attribute>
<name>text</name>
<required>true</required>
</attribute>
</tag>
</taglib>

[email protected]
 Custom component – faces-
config.xml
• To reference the new component
<component>
<component-type>com.example.myComponentRef</component-type>
<component-class>com.example.UIMyTag</component-class>
</component>

[email protected]
 Custom component – Tag
class
public class MyTag extends UIComponentTag
{
private String text;
public String getText() { return text;}
public void setText(String text) { this.text = text; }

public String getComponentType() { return “com.example.myComponentRef”; }

public String getRendererType() { return null; }

protected void setProperties(UIComponent component)

{
super.setProperties(component);
component.getAttributes().put(“text”, text);
}
}

[email protected]
 Custom component – UI class
public class UIMyTag extends UIComponentBase
{
public void encoding(FacesContext context) throws IOException {
String text = (String)getAttributes().get(“text”);

ResponseWriter writer = context.getResponseWriter();

writer.startElement(“b”, this);
writer.writeAttribute(“style”, “color:blue”, null);
writer.write(text);
writer.endElement(“b”);
}

public String getFamily()

{
return null;
}
}

[email protected]
 Facelets

[email protected]
 JSF and JSP

JSP is the default view technology

JSP tags refer to JSF components
h:commandButton =
HtmlCommandButton
Mixing them brings overhead because of two
different lifecycles

[email protected]
 JSF and JSP (Advantages)

• JSP is well adopted, reduces learning

curve of JSF ( the only advantage)

[email protected]
 JSF and JSP (Disadvantages)

• JSP is created to generate dynamic

output not to create component trees
• Two different lifecycles (overhead)
• Content Interweaving Issues

[email protected]
 JSF & JSP
JSF 1.1 - Initial request (e.g. index.jsf)

• 1. FacesServlet gets the request and JSF lifecycle begins

• 2. restoreState returns null and a new view is created (createView)
with view id = index.jsp (jsp is the default suffix)
• 3. lifecycle jumps to renderResponse
• 4. renderView is called that dispatches index.jsp to the container
• 5. Container traverses all the tags, tags call component’s encode
methods during component tree is created
• 6. State is saved via writeState and buffered output is rendered
to the client.

JSF 1.2 - a servletwrapper is used instead of f:view to buffer the

content and component tree is created before rendering

[email protected]
 Facelets
• A viewhandler purely created for JSF
• No more JSP
• .xhtml instead of .jsp
• No tld files and no tag classes to defined a
UIComponent
• Faster than using JSP&JSF
• JSF 2 also provides a powerful mechanism
called composite components, which builds on
Facelets' templating features
[email protected]
 Migrating from JSP to Facelets

<%@ taglib uri=http://java.sun.com/jsf/html prefix="h"%>

<%@ taglib uri=http://java.sun.com/jsf/core prefix="f"%>

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

[email protected]
 Facelets Installation
• Add jsf-facelets.jar to the classpath
• Add viewhandler config to faces-config.xml
• Change javax.faces.DEFAULT_SUFFIX to.xhtml

[email protected]
 *.taglib.xml

• Concept similar to tld but lightweight

• Used to define components,
converters, validators, composition
components, custom logic tags,
functions and etc.

[email protected]
 Jsfc
• Jsfc : jwcid concept in Tapestry
<h:commandButton id=“btn_save” value=“Save”
action=“#{bean.method}” />

<input jsfc="h:commandButton" type="submit"

id=“btn_save" value=“Save“
action=“#{bean.method}”/>

• Provides integration with HTML editors

[email protected]
 Inline Text
• Inline Text: Display texts without a UIComponent

<h:outputText
value=“#{IndexPageBean.welcomeMessage}” />

<h1>#{IndexPageBean.welcomeMessage}</h1>

[email protected]
 Support for Unified EL

• Facelets support the Unified EL

#{BeanName.field}
same as;
${BeanName.field}

[email protected]
 Templating

• A template is an xhtml with placeholders

• Placeholders are marked with ui:insert
• Fragment from Template.xhtml
<title>
<ui:insert name="title">Default Title</ui:insert>
</title>
• In order to use the template ui:composition is needed.
• Fragment from index.xhtml
• <ui:composition template="/template.xhtml">
<ui:define name="title">
Welcome to index page
</ui:define>
[email protected]
 Composition Components
• Composition component is basically a template

userInfo.xhtml

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"> <h3>Logged

as : #{user}</h3>
</ui:composition>

myfacelets.taglib.xml

<tag>
<tag-name>userInfo</tag-name>
<source>tags/userInfo.xhtml</source>
</tag>

Use as;
<ds:userInfo user="#{myBean.currentUser}"/>

[email protected]
 EL Functions

• MyFunctions.java

public static String length(String name) {

if( name == null )
return null;
else
return String.valueOf( name.length() ); }

myfacelets.taglib.xml
<function>
<function-name>length</function-name>
<function-class>faceletsbox.utils.CustomerUtils</function-class>
<function-signature>
java.lang.String length(java.lang.String)
</function-signature>
</function>
Use as;
• ƒÞ #{ds:length(MyBean.userName)}

[email protected]
 JSTL Support

With JSP, mixing JSF and JSTL is

problematic
• Facelets brings limited but faultless
support
<c:if>
<c:forEach>
<c:catch>
<c:set>
[email protected]
 Custom logic tags

JSTL like logic tags by extending Facelets TagHandler

myfacelets.taglib.xml
<tag>
<tag-name>if</tag-name>
<handler-class>mycompany.myproject.utils.IfHandler
</handler-class>
</tag>
Use as;
<ds:if test="#{MyBean.isLoggedIn}"> Welcome </ds:if>

[email protected]
 List of built-in Facelets tags

Facelets Templating Tages

<ui:composition/>
<ui:decorate/>
<ui:define/>
<ui:include/>
<ui:insert/>
<ui:param/>
[email protected]
 List of built-in Facelets tags

Non-Templating Facelets Tages

<ui:component/>
<ui:debug hotkey="p" rendered="true"/>
<ui:fragment/>
<ui:remove/>
<ui:repeat/>

[email protected]
 TagHandlers Components Other

c:forEach f:validator
c:choose ui:repeat f:converte
c:set ui:fragment r
c:if ui:component
f:facet f:view
f:actionListener f:verbatim
f:valueChangeListene f:selectItems
r h:inputText
ui:include h:datatable
ui:decorate any custom
ui:composition UIComponent
any custom tag file
[email protected]
TagHandlers vs Components

The most important thing to understand about the jstl

tags in Facelets is that they do not represent components
and never become a part of the component tree once the
view has been built. Rather, they are tags which are
actually responsible for building the tree in the
first place.Once they have done their job they expire.

[email protected]
My c:if always evaluates to false

<h:dataTable values="${numbers}" var="number">

<h:column>
<c:if test="${number > 5}">
<h:outputText value="${number}"/>
</c:if>
</h:column>
</h:datatable>

Yes, the c:if is always evaluating to false! But

it is only ever evaluated once - when the tree is
built. The h:outputText component never makes it
into the tree.

[email protected]
Solution: replace the c:if with:

<ui:fragment rendered="${number > 5}"> ... </ui:fragment>

My ui:include fails inside ui:repeat

<ui:repeat value="#{bean.items}" var="item">

<ui:include src="#{item.src}"/>
</ui:repeat>

The EL for the ui:include is evaluated when the

view is built and is invalid since it relies on
a variable only made available by the ui:repeat
during rendering. Use c:forEach in this case.

[email protected]
ui:composition :The UI Composition tag is a templating tag that wraps content
to be included in another Facelet.

Any content outside of the UI Composition tag will be ignored by the

Facelets view handler.

Any content inside of the UI Composition tag will be included when

another Facelets page includes the page containing this
UI Composition tag.

Example:
<p><strong>template.jsf</strong></p>
<h2><ui:insert name="title" /></h2><p>
ui:composition
<strong>composition.jsf</strong></p>
This text will be ignored.
<ui:composition template="template.jsf">
<ui:define name="title">Hello World!</ui:define>
</ui:composition>
This text will be ignored.HTML Output

<p><strong>composition.jsf</strong></p> <pre id="line1">

<h2>Hello World!</h2>

Tag Attributes

template String : The [email protected]

to the template to be populated by the content within the
composition tag.
ui:debug
The UI Debug tag allows you to display helpful information about the
JSF component tree and scoped variables in your browser when you test
your JSF pages. The hotkey attribute specifies a key combination
(CTRL + SHIFT + D is the default value) to display the popup window
containing the information. The UI Debug tag can be enabled or
disabled by setting the rendered attribute.

Example:

<h:commandButton value="Continue Shopping"

action="#{shoppingCartBean.saveCart}">
<ui:debug />
</h:commandButton>

Tag Attributes
hotkey String

The key to press with 'CTRL' + 'SHIFT' to display the debug popup
window. The default value is CTRL + SHIFT + D. This attribute does
not accept EL expressions.

rendered String

A value-binding expression that evaluates to a Boolean condition

[email protected]
indicating if this component should be rendered.
ui:decorate
The UI Decorate tag is a templating tag that decorates content
included from another Facelet. Any content outside of the UI
Decorate tag will be displayed by the Facelets view handler.

Any content within the decorate tag will be passed to the

associated template as parameters or simply ignored. You can use
nested ui:define tags to pass named content to the associated
template. See ui:insert for more information.

<p><strong>decorate.jsf</strong></p>
Text before will stay.<br />
<ui:decorate template="template.jsf">
<ui:define name="title">Our Products</ui:define>
<ui:define name="body">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</ui:define>
</ui:decorate>
Text after will stay. [email protected]
ui:define
The Define tag is a templating tag that defines named content to be
inserted into a template. The name attribute value must match that
of a ui:insert tag in the target template for the named content to
be included.

Example:

<h:outputText value="#{dateBean.today}">
<s:convertDateTime dateStyle="full" type="both" />
</h:outputText><p><strong>template.jsf</strong></p>
<h2><ui:insert name="title" /></h2>
<p><strong>template.jsf</strong></p>
<ui:composition template="template.jsf">
<ui:define name="title">Hello World!</ui:define>
</ui:composition>HTML Output

<p><strong>composition.jsf</strong></p>
<h2>Hello World!</h2>

[email protected]
ui:component

The UI Component tag inserts a new UIComponent instance into the JSF
component tree. Any components or content fragments outside this tag will be
ignored by the Facelets view handler.

Any components or content fragments within this tag will be added to the
component tree as children of the UIComponent instance.
Example:

This text will be ignored.

<ui:component binding="#{myBean.component}">
<div>Hello World!</div>
</ui:component>
This text will be ignored.HTML Output

<div>Hello World!</div>

Tag Attributes

binding String

The value-binding expression linking this component tag

[email protected]
to a backing bean property.
ui:fragment

The UI Fragment tag inserts a new UIComponent instance into the

JSF
component tree. Any components or content fragments outside this
tag
will be included by the Facelets view handler. Any components or
content fragments within this tag will be added to the component
tree as children of this component instance. See also ui:component.

Example:

<p><strong>fragment.jsf</strong></p>
This text will be included.
<ui:fragment binding="#{myBackingBean.component}">
</ui:fragment>
<div id="message">Hello World!/div>
This text will be [email protected]
ui:include
The UI Include tag is a server-side include tag for Facelets. It simply
includes the document pointed to by the "src" attribute as part of the
current JSF page. The included document should use a component or
composition
tag to trim unnecessary markup, or it may simply contain a fragment of
XHTML
or XML to be included.

Example:

<p><strong>include.jsf</strong></p>
<ui:include src="header.jsf"/>
Body text here.HTML Output

<p><strong>include.jsf</strong></p>
<h2>Our Company</h2>
Body goes here. [email protected]
ui:insert
The UI Insert tag is a templating tag that declares a named content
element
to be defined by another Facelet. It can be used effectively with the
ui:define tag to pass values between Facelets.

Tag Attributes

1. name - String

The name attribute specifies the name of the matching ui:define tag
that will provide the content to be inserted into this Facelet.

[email protected]
ui:param
The UI Param tag is used to pass objects as named variables between
Facelets. The name attribute of the UI Param tag should match the
name attribute of a ui:define tag contained in a ui:composition or
ui:decorate in the template page receiving the object. The UI Param
tag can also be used to pass objects to another page by using the
ui:include tag.

Example:

<p><strong>param.jsf</strong></p>
<ui:include src="hello.jsf">
<ui:param name="greeting" value="#{helloBean.message}"/>
</ui:include>

HTML Output
<p><strong>param.jsf</strong></p>
<h2>Hello World</h2>
[email protected]
ui:remove
The UI Remove tag is used to specify tags or blocks of content that should be
removed from your page by the Facelets view handler at compile time.

This tag has no attributes. You can use this tag within the "jsfc" attribute to
indicate that a particular tag should be removed from the rendered page.

Note that the Facelets compilation process is much faster than the JSP compilation
process because no Java bytecode is actually generated and compiled behind the
scenes when you first visit your page.

This gives you some flexibility to display content and to work with markup in your
design environment that will be omitted once the page is actually viewed by your
users. FaceletsTools will not display any markup that is wrapped with a ui:remove
tag in Dreamweaver's design view, but it will display markup containing the "jsfc"
variant of this tag.

Example:

This text will be displayed.

<ui:remove>
This text will be removed.
</ui:remove>
This text will be displayed.HTML Output

This text will be displayed. [email protected]

This text will be displayed.
ui:repeat

The UI Repeat tag is used to iterate over a collection of objects exposed to the
JSF page as a value-binding EL expression. It is intended as a replacement for
the c:forEach tag from the JSTL Core tag library.

You can also use this tag with the "jsfc" feature in Facelets.

Tag Attributes

1. value String
Required
The value attribute specifies the value-binding EL expression that resolves to
a List of objects to be iterated over.

2. var String
Required
The var attribute specifies the literal name of the variable used to iterate
over the collection.

[email protected]
uii:componsition vs ui:decorate

<ui:composition> will not render surrounding text, so it is a good

candidate for instantiating a 'full' page template. All of the
surrounding tags in the XHTML file doing the composition will
be replaced by the template.

Use <ui:composition> when you want to replace the entire

page with the template.

<ui:decorate> will include the expanded template into the

document at the location of the ui:decorate tag, so it can be
used inside the <ui:define> sections in the main composition.

Use <ui:decorate> for nested templates or places where

you want to include a template.

[email protected]
 Javax.faces.application.ViewHandler Javax.el.ElContext
+renderView(context:FaceletContext,
root:UIViewRoot)

Faceletcontext

FaceletViewHandler
+buildView(context:FaceletContext, SAXCompiler
root:UIViewRott)

<<singleton>>
DefaultFaceletFactory Compiler <<interface>>
FaceletFactory
com.sun.facelets.
•location : URL tag.TagLibrary
•refreshPeriod : long
+getFacelet(uri:string) : Facelet

0..*
Facelet
+apply(context:FaceletContext,
component:UIComponent)

<<interface>>
root GaceletHandler
DefaultFacelet

+apply(context:FaceletContext, component:UIComponent()
[email protected]
UML class diagram of the core Facelets Architecture
1. During the Render lifecycle phase, the renderView() method is called on
the ViewHandler. This method takes the argument UIViewRoot, which
in the case of an initial request has no children, and does two things
with it :

- Populates it with UIComponent children as defined in the view

description technology.
- Renders the newly constructed view to the client.

2. For Facelets, the default ViewHandler has been replaced with an

instance of the FaceletViewHandler, to fulfill the first requirement
of the renderView() method the protected buildView() method is
called. All of the Facelets-specific processing is done inside this
method and its helpers.

[email protected]
3. In buildView(), the FaceletViewHandler calls its FaceletFactory
to create an instance of the root Facelet for this ViewID.
The implementations of this process is handled by the
DefaultFaceletFactory instance. This class performs the
loading of the XHTML file and compiles it using the Compiler.

4. The Compiler turns the collection of XHTML files that make

up the view into a tree of Facelet instances.

5. Compiler uses the SAX API provided by the java to parse the
XML file. The Compiler contains a list of TagLibrary instances
for the application. This list will always include the standard
Facelets tag libraries, plus any additional ones in use by the
application.

[email protected]
6. With the tree of Facelet instances, the buildView() method simply
calls apply() on the root Facelet, passing the UIViewRoot.
This will cause the UIViewRoot to be populated, thus
accomplishing requirement 1 of renderView().

7. When buildView() returns, the UIViewRoot has been fully

populated with the child components for the view, templates and
all.

8. Once the view has been constructed, the FaceletViewHandler

does exactly same as default ViewHandler, it renders the view
using the standard methods provided by the Faces API.

[email protected]
Creating Composition Components

Facelets provides a simple and fast way to create reusable components

using tag source files, which will define the components and fragments that
will compose our new component.

Creating the inputTextLabeled Custom Component

The first demonstration component we are going to create is a combined

h:outputLabel and h:inputText component, which we are going to call
inputTextLabeled. As combining this functionality is really common in
our applications, writing such a component will help us reuse code and
simplify our pages.

We want the component to be used like this in the JSF documents:

<custom:inputTextLabeled
label="Name"
value="#{bird.name}" />

[email protected]
InputTextLabeled.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">

<ui:component>
<h:outputLabel value="#{label}: ">
<h:inputText value="#{value}"/>
</h:outputLabel>
</ui:component>

</html>

We have created an h:outputLabelcomponent with a nested

h:inputText, which is one of the ways to use these two
[email protected]
components together
mycustom.taglib.xml

<!DOCTYPE facelet-taglib PUBLIC

"-//Sun Microsystems, Inc.//DTD
Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/
facelet-taglib_1_0.dtd">

<facelet-taglib>
<namespace>http://myfaces.apress.com/custom
</namespace>
<tag>
<tag-name>inputTextLabelled</tag-name>
<source>components/InputTextLabeled.xhtml
</source>
</tag>
</facelet-taglib>

[email protected]
web.xml

<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>
/WEB-INF/facelets/mycustom.taglib.xml
</param-value>
</context-param>

[email protected]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:custom="http://myfaces.apress.com/custom">
<body>
<f:view>
<h:form>
<h:panelGrid columns="1">
<custom:inputTextLabeled 􀂬
label="Name" value="#{bird.name}"/>
<custom:inputTextLabeled 􀂬
label="Order" value="#{bird.order}"/>
<custom:inputTextLabeled 􀂬
label="Family" value="#{bird.family}"/>
<h:commandButton 􀂬
value="Add Bird" 􀂬
actionListener="#{birdDirectory.addBird}"/>
</h:panelGrid>
</h:form>
</f:view>
</body> [email protected]
</html>
 Facelets - Summary
• Facelets saves JSF from the burden of jsp

• Great for templating and composition

components plus bonuses like el
functions
• IDE support is not wide, only Exadel
support facelets for now

[email protected]
Ajax4Jsf

[email protected]
 What is Ajax?
•Intuitive and natural user interaction
> No clicking required
 Mouse movement is a sufficient event trigger

• "Partial screen update" replaces the "click, wait, and

refresh" user interaction model
> Only user interface elements that contain new information are
updated (fast response)
> The rest of the user interface remains displayed without
interruption (no loss of operational context)

• Data-driven (as opposed to page-driven)

> UI is handled in the client while the server provides data

[email protected]
 What is Ajax?
• Asynchronous communication replaces
"synchronous request/response model."
> A user can continue to use the
application while the client
• program requests information from the
server in the background
> Separation of displaying from data
fetching

[email protected]
[email protected]
[email protected]
 Technologies Used In AJAX
• Javascript
> Loosely typed scripting language
> JavaScript function is called when an event in a page occurs
 Glue for the whole AJAX operation

• DOM
> API for accessing and manipulating structured documents
 Represents the structure of XML and HTML documents

• CSS
> Allows for a clear separation of the presentation style from the
content and may be changed programmatically by JavaScript

• XMLHttpRequest
> JavaScript object that performs asynchronous interaction with the
server
[email protected]
 XMLHttpRequest
• JavaScript object

• Adopted by modern browsers

> Mozilla™, Firefox, Safari, and Opera

• Communicates with a server via standard HTTP

GET/POST

• XMLHttpRequest object works in the background

for performing asynchronous communication
with the backend server
> Does not interrupt user operation
[email protected]
 Server-Side AJAX Request
Processing
• Server programming model remains the same
> It receives standard HTTP GETs/POSTs
> Can use Servlet, JSP, JSF, ...
• With minor constraints
> More frequent and finer-grained requests from
client
> Response content type can be
> text/xml
> text/plain
> text/json
> text/javascript

[email protected]
[email protected]
[email protected]
 Steps of AJAX Operation
1.A client event occurs
2.An XMLHttpRequest object is created
3.The XMLHttpRequest object is configured
4.The XMLHttpRequest object makes an async.
request
5.The ValidateServlet returns an XML document
containing the result
6.The XMLHttpRequest object calls the callback()
function and processes the result
7.The HTML DOM is updated
[email protected]
1. A Client event occurs

• A JavaScript function is called as the result

of an event
• Example: validateUserId() JavaScript function is
mapped as a event handler to a onkeyup event on
input form field whose id is set to “userid”
<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validateUserId();">
[email protected]
2. An XMLHttpRequest object is created
var req;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}

[email protected]
3. An XMLHttpRequest object is configured with a callback function

var req;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest; // callback function
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}

[email protected]
4. XMLHttpRequest object makes an async. request
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}

• URL is set to validate?id=greg

[email protected]
5. The ValidateServlet returns an XML document containing the results
(Server)

public void doGet(HttpServletRequest request,

HttpServletResponseresponse)
throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>true</valid>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}

[email protected]
6. XMLHttpRequest object calls callback()
function and processes the result
• The XMLHttpRequest object was configured to
call the processRequest() function when there
is a state change to the readyState of the
XMLHttpRequest object

function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...

[email protected]
Filter Settings for web.xml

<?xml version="1.0"?>
<web-app ...>
...
<filter>
<display-name>Ajax4jsf Filter</display-name>
<filter-name>ajax4jsf</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
</web-app>

[email protected]
Tag Summary

• a4j:commandButton and a4j:commandLink

– Run code on the server, then update specified JSF
element (or comma separated element list) after.
• <a4j:commandButton action="#{bean.method}"
value="Button label" reRender="some-id"/>
... <h:outputText value="#{bean.prop}" id="some-id"/>

• a4j:poll
– Run code periodically on server, then update specified
JSF element(s)

• a4j:support
– Capture JavaScript event in any existing JSF control and
invoke server-side code, then update specified element(s)
• <h:inputText ...>
<a4j:support event="onkeyup" reRender="some-id"/>
</h:inputText>
[email protected]
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<f:view>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"" />
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
<title>Ajax4JSF Examples</title>
</head>

[email protected]
h:commandLink: Example

<tr><td width="100">
<h:form>
<a4j:commandLink
action="#{numBean.makeResult}"
value="Show Random Number"
reRender="region2"/>
</h:form>
</td>
<td width="100">
<h:outputText value="#{numBean.result}"
id="region2"/>
</td>
</tr>

[email protected]
a4j:commandButton and a4j:commandLink: faces-config

<managed-bean>
<managed-bean-name>
numBean
</managed-bean-name>
<managed-bean-class>
coreservlets.RandomNumberBean
</managed-bean-class>
<managed-bean-scope>
request
</managed-bean-scope>
</managed-bean>

[email protected]
a4j:commandButton: Example 2

<tr><td width="100">
<h:form>
Range:
<h:inputText value="#{numBean.range}"
size="5"/><br/>
<a4j:commandButton
action="#{numBean.makeResult}"
value="Show Random Number"
reRender="region3"/>
</h:form>
</td>
<td width="100">
<h:outputText value="#{numBean.result}"
id="region3"/>
</td>

[email protected]
a4j:poll: Basic Syntax

<a4j:poll
interval="x"
reRender="some-id"/>

• Interpretation
– Every x milliseconds, send off an asynchronous HTTP request to the server.
– Re-evaluate and re-display the JSF element with the id some-id.
• Key point: this element should result from code that gives different values
at different times
• Unlike with a4j:commandButton, there is no explicit additional server-side
method to run

[email protected]
a4j:poll: Bean

public class TimeBean {

public Date getTime() {
return(new Date());
}
}

[email protected]
JavaScript Event Handlers used with a4j:support

• onchange
– User changes element (IE: and element loses focus)
• onclick/ondblclick
– User single/double clicks form element or link
• onfocus/onblur
– Element receives/loses focus
• onkeydown/onkeypress/onkeyup
– User presses/presses-or-holds/releases a key
• onmousedown/onmouseup
– User presses/releases mouse
• onmousemove
– User moves mouse
• onmouseover/onmouseout
– User moves mouse onto/off area or link
• onselect
– User selects text within a textfield or textarea
• onsubmit

[email protected]
a4j:support: Example

<h:form>
<table border="1">
<tr><th>Textfield</th>
<th>Ajax Value</th>
</tr>
<tr><td width="100">
<h:inputText value="#{myBean.message}">
<a4j:support event="onkeyup"
reRender="output-region"/>
</h:inputText></td>
<td width="100">
<h:outputText value="#{myBean.message}"
id="output-region"/></td>
</tr>
</table>
</h:form>

[email protected]
a4j:support: faces-config.xml

<managed-bean>
<managed-bean-name>
myBean
</managed-bean-name>
<managed-bean-class>
coreservlets.MessageBean
</managed-bean-class>
<managed-bean-scope>
request
</managed-bean-scope>
</managed-bean>

[email protected]
a4j:support: Example 2

• Idea
– Use h:selectOneMenu to make a list of US states
– When the user selects a state, a list of corresponding
cities is shown (again, using h:selectOneMenu)
– When city selected, population of that city is displayed

• Approach
– State list
• <a4j:support event="onchange" reRender="city-list"/>
– City List
• <a4j:support event="onchange" reRender="pop-field"/>
– Bean
• Make it session scoped so values persist across across
multiple submissions (since there are at least two)

[email protected]
a4j:support: Bean

public class LocationBean implements Serializable {

private String state;
private String city;
private boolean isCityListDisabled = true;
public String getState() { return (state); }
public void setState(String state) {
this.state = state;
isCityListDisabled = false;
}
public String getCity() { return(city); }
public void setCity(String city) { this.city = city; }
public boolean isCityListDisabled() {
return(isCityListDisabled);
}

Make city list disabled initially.

[email protected]
a4j:support: Bean (Continued)

public SelectItem[] getCities() {

SelectItem[] cities =
{ new SelectItem("--- Choose City ---")};
if(!isCityListDisabled && (state != null)) {
for(StateInfo stateData:
StateInfo.getNearbyStates()) {
if(state.equals(stateData.getStateName())) {
cities = stateData.getCities();
break;
}
}
}
return(cities);
}

[email protected]
Tools and Toolkits

• Client-Side Tools
– Dojo.
• Open source JavaScript toolkit with Ajax support
• http://www.dojotoolkit.org/

– Google Web Toolkit

• Write code in Java, translate it to JavaScript
• http://code.google.com/webtoolkit/

– script.aculo.us
• Free JavaScript toolkit with Ajax support
• http://script.aculo.us/

– Yahoo User Interface Library (YUI)

• Free JavaScript toolkit with some Ajax support
• http://developer.yahoo.com/yui/

[email protected]
Tools and Toolkits (Continued)

• Hybrid Client/Server Tools

– AjaxTags (built on top of script.aculo.us)

• JSP custom tags that generate Ajax functionality

– Supports many powerful Ajax capabilities with very simple syntax
– http://ajaxtags.sourceforge.net

– JavaServer Faces (JSF) component libraries

• Trinidad (formerly Oracle ADF)
– http://www.oracle.com/technology/products/jdev/htdocs/

partners/addins/exchange/jsf/ (also myfaces.apache.org)

• Tomahawk
– http://myfaces.apache.org/tomahawk/

• Ajax4jsf
– http://labs.jboss.com/jbossajax4jsf/

• IceFaces
– http://www.icefaces.org/

[email protected]
Apache Shale

[email protected]
 JSF and Other JSF and Other Frameworks

• JSF came into being in a world filled with frameworks

• Desire to leverage new and old capabilities together
• Two fundamental approaches to integration:
• Treat JSF as a view tier only
• Treat JSF as a controller and a view tier
• The first approach is available for several
frameworks now:
- Spring
- Struts
- Beehive
And is easily added to others
[email protected]
 JSF and Other JSF and Other Frameworks

• This first approach has overlapping sets of issues:

• Resulting application architecture:
• Typically a front controller “in front of” a front controller
• JSF handles UI events, delegates form submit events
• Overall architectural elegance:
• Redundant functionality – conversion, validation, page
navigation, invoking actions
• Impedance mismatches – expression language syntax,
lifecycle differences
• Treating JSF as view tier only is recommended
primarily as a migration strategy, not as an
endgame
[email protected]
 Building a framework on top of
JSF has advantages:
• Smaller – skip implementing redundant functionality
• Easier to use – learn one approach to each need
• Enables a focus on adding features and improving
ease of use
• Started work on Shale in Fall 2005, focused on:
• Adding ease of use APIs inspired by Java Studio Creator
• Integrate functionality that existing Struts users expect:
• Client side validation, Tiles layout management
• Integrate new functionality enabled by JSF
• (Later) Add a layer that leverages Java SE 5 annotations

[email protected]
 JSF Extension Points
• VariableResolver – Customize evaluation of first
token in expressions
• PropertyResolver – Customize evaluation of the “.”
operator in expressions
• NavigationHandler – Customize navigation
decisions
• ViewHandler – Customize view creation and
restoration
• PhaseListener – Participate in (and modify) the
standard request processing lifecycle

[email protected]
 Shale Features
Key Functionality:
• View Controller
• Dialog Handler
• Clay Plug-In
• Tiger Extensions
• Remoting
• Other Features:
• Application Controller
• JNDI and Spring Integration
• Unit Testing Framework
• Struts Feature Integration (Validator, Tiles, Token)
[email protected]
 View Controller
• A common pattern in JSF is backing bean per page
• Must know the JSF request processing lifecycle to
understand where to inject some types of
application logic
• Example – DB query needed to populate a table:
• Only want to perform the query if it will actually be used
• Skip it if the user navigated to a different page
• Example – Need a transactional resource available
through rendering, but then need to clean up
• Need to regain control after rendering is completed

[email protected]
 View Controller

• Shale provides an optional interface for your

backing bean
• Also use a naming convention for managed bean names
• Implements the “Hollywood Principle”:
• Don't call us, we'll call you
• Four application oriented callbacks are provided:
• init() -- called when view is created or restored
• preprocess() -- called when about to process a
postback
• prerender() -- called when about to render this view
• destroy() -- called after rendering, if init() was called
• AbstractViewController – Convenience base class

[email protected]
 Dialog Manger
• Standard JSF navigation handler decides based on:
• What view am I currently processing?
• Which execute action method was invoked?
• What logical outcome was returned by this action?
• Issue – modeling of a “conversation” is ad hoc
• Issue – how do we deal with conversational state?
• Pass information in hidden fields
• Can be unwieldy when numerous fields are required
• Store information in session
• Occupies memory if not cleaned up

[email protected]
 Dialog Manager
• Dialog Manager deals with these issues:
• Models conversations as an execution engine
• Provides storage mechanism for conversational state
• Heavily inspired by Spring Web Flow, but “JSF-ized”
• Caution – Following functionality is currently in the
• Shale sandbox, but will be imported to trunk soon
• Application uses DialogContext abstraction
• Maintain state (getData(), setData())
• Execution: start(), stop(), and advance()
• Parent dialog support (for popups)
• Start dialogs programmatically or via navigation
[email protected]
 CLAY Plug-In
• JavaServer Faces mandates that standard
components support JavaServer Pages (JSP) for
view representation
• Issue – interoperability problems with template text
• Mostly resolved with JSF1.2 and JSP 2.1(part of Java EE 5)
• Issue – Reuse of portions of page layout is difficult
• Can be addressed by JSF components focused
on this need
• Issue – Some developers prefer a more “pure”
HTML representation of the view portion of an
application
[email protected]
 CLAY Plug-In
• Clay enables grafting a component subtree onto an
existing component tree
• Sounds simple, but provides compelling features:
HTML Views – Can separate views into pure HTML
• pages, with pointers to component definitions
• Similar capabilities found in Tapestry and Facelets
• Metadata Inheritance – Component definitions can
extend previous definitions:
• Similar in spirit to how Tiles can extend other Tiles
• Create reusable “components” with no Java coding
• Symbol Replacement – Customize managed bean
names
[email protected]
Clay Plug-In – JSP Login Page
<h:form>
<table border=”0”>
<tr><td>Username:</td>
<td><h:inputText id=”username”
value=”#{logon.username}”/></td></tr>
<tr><td>Password:</td>
<td><h:inputSecret id=”password”
value=”#{logon.password}”/></td></tr>
<tr><td><h:commandButton id=”logon”
action=”#{logon.authenticate}”></td></tr>
</table>
</h:form>
[email protected]
 Clay Plug-In – Clay Login
<form jsfid=”logonForm”>
<table border=”0”>
<tr><td>Username:</td>
<td><input type=”text” name=”username”
jsfid=”username”/></td></tr>
<tr><td>Password:</td>
<td><input type=”password” name=”password”
jsfid=”password”/></td></tr>
<tr><td><input type=”submit” value=”Log On”
jsfid=”logon”/></td></tr>
</table>
</form>
[email protected]
 Clay Plug-In –Clay Components

<component jsfid=”username”
extends=”inputText”
id=”username”>
<attributes>
<set name=”required” value=”true”/>
<set name=”value”
value=”#{logon.username}”/>
</attributes>
</component>

[email protected]
 Clay Plug-In
• So why do I want this?
• Pure HTML can be easily built with standard HTML editors
• Graphic artist can include “sample” data that will be replaced
<table jsfid=”addressList”>
... dummy columns and data values ...
</table>
• Four general strategies are supported:
• Strictly XML that uses composite components (addressForm)
• Tapestry style separate HTML (as illustrated above)
• Subtree dynamically built at runtime (<clay:clay> tag)
• Pure XML similar to the separate HTML approach

[email protected]
 Remoting
• It is common for applications to respond to
programs as well as to humans:
• Web services
• AJAX-based asynchronous requests
• Shale provides features to make this easier:
• For application developers
• For JSF component authors
• Packaged as a small (40k) JAR, only needs JSF
• Zero configuration if you accept the defaults
• Implemented as a JSF PhaseListener

[email protected]
 Other Shale Features
• Application Controller
• Configured as a servlet filter
• Supports decoration of the request processing lifecycle
• Uses “chain of responsibility” design pattern (Commons Chain)
• Similar in spirit to customizing request processor in Struts
• JNDI and Spring Integration:
• Custom JSF variable and property resolvers
• Transparent access to JNDI contexts and Spring created
beans, via EL expressions
• Unit testing framework:
• Mock objects for building unit tests

[email protected]
 Other Shale Features
• Struts Functionality Equivalents:
• Commons Validator for client side validation
• Implemented as a JSF validator
• Tiles Support
• Based on “standalone” version of Tiles being developed
• No dependency on Struts
• Can navigate to a view or to a tile
• Transaction token support
• Prevent duplicate submits of a form
• Implemented as a component that fires validation
failures on duplicate submits
[email protected]
JBoss Seam

[email protected]
[email protected]
[email protected]
JSF Design Patterns

[email protected]
 Singleton pattern

• The intent of the Singleton pattern is to ensure

that only one instance of a class is loaded, and
that the instance provides a global point of
access.
• While starting a Web application that has JSF
support, the Web container initializes a
FacesServlet instance.
• In this stage, FacesServlet instantiates the
Application and LifeCycle instances once per
Web application. These instances represent the
well-known Singleton pattern, which typically
requires only one instance of the type.
[email protected]
 Singleton
• A Web application using JSF requires only one instance of the
Application and LifeCycle classes.

• LifeCycle manages the entire life cycle of multiple JSF requests.

• It makes sense to have these objects as Singleton patterns

because their states and behaviors are shared across all
requests.

• LifeCycle maintains PhaseListeners, which are also Singleton

patterns. PhaseListeners are shared by all JSF requests.

• You can use a Singleton pattern extensively in JSF framework to

reduce the memory footprint and provide global access to
objects. NavigationHandler (used to determine logical outcome
of the request) and ViewHandler (used to create view) also
represent Singleton patterns.

[email protected]
 Factory Method pattern
• The purpose of the Factory Method pattern is to define an interface
for creating an object but deferring instantiation of the object to
subclasses.
• In the JSF architecture, the Factory Method pattern is used to
create objects. LifeCycleFactory is a factory object that creates and
returns LifeCycle instances. The getLifeCycle (String LifeCycleId)
method of LifeCycleFactory is a Factory Method pattern that creates
(if needed) and returns LifeCycle instances based on LifeCycleId.
• For every JSF request, FacesServlet gets FacesContext from
FacesContextFactory. FacesContextFactory is an abstract class
that exposes the getFacesContext API, and JSF implementation
provides concrete implementation of the FacesContextFactory and
getFacesContext API. This is another example of the Factory
Method pattern where concrete FacesContextFactory creates
FacesContext objects.

[email protected]
 State Pattern
• The intent of the State pattern is to distribute state-
specific logic across different classes that represent
states.
• FacesServlet invokes execute and render methods on a
LifeCycle instance. LifeCycle collaborates with different
Phases in order to execute a JSF request. JSF
implementation follows the State pattern here.
• JSF implementation creates separate classes of each
state (or phase) and invokes steps. A phase is an
abstract class that defines the common interface for
every step. In the JSF framework, six phases, or steps,
are defined: RestoreViewPhase, ApplyRequestValues,
ProcessValidationsPhase, UpdateModelValuesPhase,
InvokeApplicationPhase, and RenderResponsePhase.

[email protected]
 State Pattern
• As in the State pattern, LifeCycle passes a FacesContext object to the
phases. Each phase or state changes the contextual information passed to
it and then sets the flag in the FacesContext itself to indicate the next
possible step. JSF implementation alters its behavior with each step.

• Each phase can be responsible for the next phase. FacesContext has two
flags -- renderResponse

• After execution of each step, LifeCycle checks whether either of these flags
was set by the previous phase. If a responseComplete is set, LifeCycle
abandons the execution of the request altogether. If a renderResponse flag
is set after some phase,

• JSF implementation skips remaining phases and goes directly to the render
response phase. If neither flag is set, LifeCycle executes the next step in the
sequence.

[email protected]
 Composite Pattern
• The Composite pattern allows clients to deal with composite and
primitive objects uniformly. A composite object is a container for
primitive objects.

• In the first phase (Restore View phase) and the last phase (Render
Response phase), the UI View is constructed using JSF UI
components.

• UIComponentBase represents an abstract Component class in the

Composite pattern. UIViewRoot is the Composite class, and
UIOutput, for example, is the leaf (or primitive).

• The UIComponentBase class defines common methods for leaf

and composite objects, such as encoding and decoding values and
child management functions. Child management functions, such as
getChildren, return an empty list for leaf nodes and children for
composite nodes.
[email protected]
 Decorator Pattern
• The intent of the Decorator pattern is to extend the
behavior of an object dynamically without subclassing.
The JSF framework has many extension points, or
pluggability mechanisms.

• JSF implementation can replace default

PropertyResolver, VariableResolver, ActionListener,
NavigationHandler, ViewHandler, or StateManager by
using the Decorator pattern.

• Typically custom implementation receives the reference

to the default implementation passed through its
constructor. Custom implementation overrides only a
subset of the functionality and delegates the rest of the
functions to the default implementation.
[email protected]
 Strategy Pattern
• The purpose of the Strategy pattern is to encapsulate a
concept that varies. The JSF framework employs the
Strategy pattern for rendering UI components using the
delegated implementation model.
• JSF technology supports two kinds of rendering models.
In a direct implementation model,
• UI components decode the values from the incoming
request themselves and encode the values to be
displayed.
• Delegated implementation model, decoding and
encoding operations are delegated to the separate
renderer associated with the component.

[email protected]
 Strategy Pattern
• The delegated implementation model is more flexible
than direct implementation and leverages the Strategy
design pattern. In the Strategy pattern, you encapsulate
an algorithm that varies into a separate object so the
algorithm can be varied dynamically.

• JSF implementation might register additional renderers

with the existing renderkit instance, and, at application
startup time, JSF implementation reads the configuration
file and associates those renderers to the UI
components.

[email protected]
 Template Pattern
• The Template Method pattern's intention is to
defer variant steps to the subclasses while the
parent class defines invariant steps of the
algorithm.
• The JSF framework offers functionality provided
by the Template Method pattern through
PhaseListeners.
• Template Method (or "hook") is implemented so
Web authors can provide implementation for the
optional steps between phases while main
phases remain the same as defined by the JSF
framework.
[email protected]
 Template Pattern
• The JSF framework provides PhaseListeners
that are conceptually similar to variant steps of
the Template Method pattern.
• The JSF framework has six predefined phases,
and between each phase, a Web author can
implement PhaseListeners to provide hooks
similar to the Template Method hooks.
• In fact, this is much more extensible than the
Template Method pattern.
• You can provide hooks after each phase by
registering a PhaseListener that has PhaseId of
ANY_PHASE value.
[email protected]
 Template Pattern
• If the PhaseId is ANY_PHASE, the JSF
implementation calls the PhaseListener before
and after every phase.

• The implementation is slightly different in the

JSF framework because one can have no
PhaseListeners at all, but in the Template
Method pattern, subclasses generally redefine
variant steps that are left abstract in the parent
class

[email protected]
 Observer Pattern
• The intent of the Observer pattern is to notify all dependent objects
(or observers) automatically when the state in the subject changes.

• The JSF framework implements the Observer pattern in UI

components. JSF technology has two kinds of built-in events:
ActionEvent and ValueChangedEvent. ActionEvent is useful in
determining the activation of user interface components such as
buttons.

• When a user clicks on the button, the JSF implementation notifies

one or more action listeners added to the button. The button is
activated or the state of the button (subject) changes.

• All listeners (or observers) are notified of the changes of state in

subject that are added to the button. Similarly, when the value in the
input UI component changes, the JSF implementation notifies
ValueChangeListeners.

[email protected]
 EditableValueHolder
• ValueHolder is an interface that may be implemented by any
concrete UIComponent that wishes to support a local value, as well
as access data in the model tier via a value binding expression, and
support conversion between String and the model tier data's native
data type.

• EditableValueHolder is an extension of ValueHolder that describes

additional features supported by editable components, including
ValueChangeEvents and Validators.

[email protected]