Java Server Faces:

Framework for Client Interfaces

Simon Ritter
Technology Evangelist
Sun Microsystems
JSF Core Concepts
Bean Management
• server side, UI component
framework for building web
applications. Application Controller
• Components
• Event Handling Navigation Handler
• Converters / Validators
• Controller Navigation Model Component Framework
• Rendering
• Managed Beans Render Kits
What is a UI Component?
• A well defined, familiar idiom for UI design
• Configurable, reusable elements that compose the user
interfaces of JSF applications
• Can be simple, like a button, or compound, like a table,
which can be composed of multiple components
• Accessible via JSF custom tags in JSP page
Standard JSF Components
Open Source Components
Custom Components
JSF Advantages
• Extensive tool support
> Enables RAD-style approach to Java web development
> Sun NetBeans Visual Web Pack, Oracle JDeveloper, IBM
websphere jsf, BEA Workshop for JSF, Exadel, Borland,
JetBrains, Genuietc, others
• Facilitates third-party UI component market:
> ADF Oracle, MyFaces, RichFaces, Crystal, Apache Trinidad
> AJAX enabled: Tomahawk, Tobago, Trinidad, ICEfaces,
RCFaces, Netadvantage, WebGalileoFaces, QuipuKit,
BluePrints, Exadel, Backbase, Simplica, Ajax4jsf, Dynafaces
• Frameworks:
> Apache MyFaces, Seam (Jboss), Apache Shale (new
Struts), Spring Web Flow , java.net Facelets
JSF Architecture Renderer

UI Component Expr. Language

Managed bean
JSF Page

Java EE Services

J2EE Persistence Layer / JDBC

Java EE Persistence

RDBMS
JSF Architecture
JSF Component, Event Driven Framework
● Maps closely to web application workflow
> Pages composed of components
> JavaBeans concepts leveraged for Data Integration

View Root Backing Bean

Form id=guess getUserNumber()

setUserNumber(..)
UIIput id=guessNum guess()

UICommand id=submit

Business
Service
Next view XML File guess()
JSF Integration With Java EE
Registration Application

Managed Bean Entity

Passenger
DB

ManagedBean ReservationBean
JSF Components
Session Bean

JSF Context
Components
• An event and listener model defines how to handle
component events
• Typically bound to model tier data
> Managed Bean
• A Conversion model: for converting input strings to
model data types.
• A Validation model for checking the correctness of
inputs
• A rendering model that defines how to render the
components in different ways
 Components
● What a component is depends on who you are
> To a page author – JSP custom tag(s)
> To a component writer :
•maintains component state,
•processes input
Component
Class
Custom
Tag

Renderer

renders a user interface

Managed Bean
• Model object holds data from UI
> Is a JavaBean. Coded by application developer
> JSF keeps the bean’s data in sync with the UI
• May contain
> action methods , event handlers, validator methods
• Faces tries to find this bean in any scope:
> Request, Session, Application
• If not found, optionally:
> Instantiate a bean of a specified class
> Store bean instance in a specified scope
Lifecycle
• A faces request occurs
> when a JSF form is submitted
> when a user clicks a link
• All faces requests are handled by a FacesServlet
(the controller servlet)
Events
• JSF supports three kinds of events
> Value Change Event – generated by UIInput component
> Action Event – generated by UICommand component
> Phase Event – fired by JSF life cycle for phase changes
Converters
• Example Standard Converter Tag:
<h:outputText value="#{bean.shipDate}">
<f:convertDateTime dateStyle="full" />
</h:outputText>

• Custom Classes
> <h:inputText converter=”myOwnConverter”/>
Process Validation Phase
• processes all input validations registered on the
components in the tree
> Ensure values entered by the user are in the
correct format
• In case of validation errors
> Error messages are queued in FacesContext
> Lifecycle advances directly to the Render Response
phase
Validators
• Built in (to component) validation: Length,
longrange, doublerange
<h:inputText ... >
<f:validateLongRange minimum="1"/>
• Custom Classes
<h:inputText ... >
<f:validator validatorId="customValidator" />
• Method Binding
<h:inputText
validator="#{checkoutFormBean.validateEmail}"/>
Events
• JSF supports three kinds of events
> Value change event
> Action events
> Phase events
Navigation
• Navigation rules configured in faces-config.xml
document
• Faces NavigationHandler determines next view:
> Which view is currently being processed?
> Which application Action was invoked?
> What outcome was returned by the Action?
• Determines name of the view to be displayed next:
> Most common use case – “view” == JSP page
 Renderer
• Defines the way to render the component to the output
type defined by the RenderKit

Component
Class
Custom
Tag

Renderer
Example AJAX enabled JSF
• BluePrints JSF AJAX Auto Complete Component
Anatomy of an AJAX enabled JSF
Component
Ajax JSF Component Renderer
• On first page display
> AutoCompleteTextField component Renderer creates a
reference to the external JavaScript code
> Returns the component.js file containing the client-side
JavaScript to handle the form AJAX interactions

Component
Java Class
JSP Custom
Tag

Renderer
jMaki
• ‘j’ is for JavaScript
• Maki means 'to wrap' in Japanese
• jMaki == Wrappers for JavaScript widgets
Why jMaki?
• Project jMaki makes it easier to use popular AJAX
frameworks within the Java EE Platform
• provides a base set of wrappers around widgets
from popular frameworks (such as Dojo, Prototype
and Yahoo Widgets)
> Supports
> JavaServer Pages
> JavaServer Faces
> Embedded JavaScript (Phobos)
> PHP 5.x
• easily extensible
Why jMaki
• Leverages widgets from existing AJAX toolkits and
frameworks:
> Dojo, Scriptaculus, Yahoo UI Widgets and DHTML
Goodies
• Provides common programming model to these
various widgets
• Provides Java Language view of JavaScript-based
widgets
> Java developers use either a JSP tag or a JavaServer
Faces component JSP tag for JavaScript widgets
What Makes Up a jMaki Widget?
HTML template
Defines the
page layout
JavaScript file
Defines
behavior
CSS file
Defines style
Pro's And Con's
• Pro's
> Provides unified programming model for using widgets
over various AJAX toolkits and frameworks
> Allows Java developers to use familiar Java EE
programming model (JSP or Faces tags) for using
JavaScript widgets
> There is already a NetBeans Plug-in
• Con's
> Event model is still not fully baked yet
• When to use
> When you want to use widgets from different sources yet
want to use uniform programming model
JavaServer Faces 1.2 New Features
• Alignment with JSP technology
> Tree Creation and Content Interweaving problems
resolved
> Unified Expression Language
> JSTL's <c:forEach> can now apply values to nested
components correctly
• Improved state-saving behavior for multiple frames
 New in JSF 1.2
• Can override default error messages with custom
messages
> requiredMessage, converterMessage, or validatorMessage
attributes of your input component.
• Can reference a message contained in a resource
bundle New label Attrib
<h:inputText value="#{customer.userID}" label=”User Id”
requiredMessage="#{customMessages.userIdRequired}" >

User Id : "must be entered”

New label Attrib New Custom message
New in JSF 1.2
• more efficient way of loading resource bundles put in
config file:
<resource-bundle>
<var>customMessages</var>
<base-name>resources.CustomMessages</base-name>
</resource-bundle>
• to reference localized data put in JSP
<h:outputText value="#{customMessages.myText}" />
Current Status
• JavaServer Faces 1.2 is part of Java EE 5
> http://java.sun.com/javaee/
> https://glassfish.dev.java.net/
• JSF 1.2 provides specific Ajax support
• JSF 2.0 will incorporate features from:
> DynaFaces
> Single, integrated API for Ajax component developers
> Will include JavaScript bindings
> Apache Shale
> JBoss Seam
> Facelets
Summary
• JSF is a UI Component Framework for the Web
> Enables RAD development
• Use NetBeans Visual Web Pack for easy
development of JavaServer Faces Application
• JavaServer Faces is part of JavaEE 5
For More Information
• http://java.sun.com/J2EE/javaserverfaces/
• http://www.jsfcentral.com/
• http://shale.apache.org/
> New Struts
• http://www.netbeans.org/products/visualweb/
Java Server Faces:
Framework for Client Interfaces
Simon Ritter
[email protected]