Web Application Framework —

JavaServer Faces
TM

Doris Chen Ph.D.

Staff Engineer/
Technology Evangelist
Sun Microsystems, Inc.
 Speaker’s Qualifications
● Dr. Doris Chen
- Technology Evangelist at Sun Microsystems
- Develops and delivers Code Camps for
J2EE, Java performance tuning, J2ME and web
services technologies for Sun Microsystems
- Speaks around the world concerning
SunTM technologies
 Presentation Agenda
● Overview
● JavaServer Faces
TM

● Architecture Overview
● Key Concepts
● Development Steps
● Car Demo

● Summary and Resources

 Web Tier Java™ Technology
● Web applications are a very popular entry point
for Java™ 2 Platform, Enterprise
Edition (J2EE™) developers
- Servlets
- Early JSP™
- Struts and MVC
- Sun™ One Application Framework (JATO)
- JSTL specification 1.0, JSP™ specification 2.0
- JavaServer™ Faces (JSF) specification 1.0
How They Fit Together

JSF Struts
JSTL
S1AF
JSP TM

java bean, expression

lang.,custom tag lib

Servlet
session tracking, filtering, listener
 Model View Controller
• Separate control
• From model data
Request Servlet
• From presentation of view
Controller

Forward Business
Event Event
Response

JSP Bean
View Model
Data

Client Web EJB Tier

MVC Pattern
 JSF Background
● Building high-quality web application user
interfaces is hard
- HTTP request/response model
- HTML dialect(s) and browser capabilities
- Need to support multiple client device types
● Opportunity to attract a new developer
community to the Java Platform
- Corporate Developers
- IT Developers
 Presentation Agenda
● Overview
● JavaServer Faces
TM

● Architecture Overview
● Key Concepts
● Development Steps
● Car Demo

● Summary and Resources

 What Is JavaServer TM

Faces Technology?

A server-side user interface

component framework for JavaTM
technology-based web applications.
 Relationship to Other JSRs
● JSF is based on:
- Servlet 2.3 (JSR-53)
- JSP 1.2 (JSR-53)
● JSF must be synergistic with:
- JSTL 1.0 (JSR-52)
- Portals (JSR-168)
● JSF is not part of J2EE 1.4
- May be considered for 1.5
 JSF Architecture
Server
request UI
Client (events)

Response

(markup)
 JavaServer Faces
● Emerging Java technology (JSR 127)
– Designed to provide richer UI
– Server-side object model for client-side UI
– Server-side handling of simple client-side events
Model
Page Form Object

c1 A c1 A A
c2 B c2 B B
c3 C c3 C C

Client Server
Relationship to Existing APIs

JSF App
JSF App
JSF Tags
JSP
(1.2 or later) JSF API

Servlets (2.3 or later)

 Roles and JavaServer Faces TM

Developer Implementer

Page Tool
Author Provider

Application Component JSF

Developer Writer Implementer
 Presentation Agenda
● Overview
● JavaServer Faces
TM

● Architecture Overview
● Key Concepts
● Development Steps
● Car Demo

● Summary and Resources

 Important Basic Capabilities
● Extensible UI component model
● Flexible rendering model
● Event handling model
● Validation framework
● Basic page navigation support
● Internationalization
● Accessibility
 Components
● UIComponent/UIComponentBase
– JavaBean base class with standard behavior
TM

● Standard UIComponent Subclasses

– UICommand, UIForm, UIGraphic, UIInput
– UIOutput, UIPanel, UIParameter
– UISelectBoolean, UISelectMany, UISelectOne
● Value Reference Expressions
– Symbolic link to property of a JavaBean
– Example: “customer.name”
– Subset of JSP 2.0/JSTL expression language
TM
 Rendering Model
● Renderers—Adapt components to a
specific markup language
– Encoding—Create markup to represent value
– Decoding—Retrieve request parameters and create new value
● RenderKits—
Library of Renderers
– Extensible at runtime
– For JSP pages, represented
TM

as a custom tag library

– Basic HTML RenderKit
part of the standard
 Events and Listeners
● Follows JavaBeans Specification design and
TM

naming patterns
● Strongly typed events
● Strongly typed listener registration
● Standard events and listeners
– ActionEvent— UICommand component activated by
the user
– ValueChangedEvent— UIInput component whose
value was just changed
 Converters and Validators
● Converters—Plug-in for conversions:
– Output: Object to String
– Input: String to Object
– Standard implementations for common cases
● Validators—Perform correctness checks on
UIInput values
– Register one or more per component
– Enqueue one or more messages on errors
– Standard implementations for common cases
 Faces-config.xml:
Validator
<!-- Validator -->
and Converter
<validator>
<description>FormatValidator Description</description>
<validator-id>FormatValidator</validator-id>
<validator-class>cardemo.FormatValidator</validator-class>
<attribute>
<description>List of format patterns separated by '|'</description>
<attribute-name>formatPatterns</attribute-name>
<attribute-class>java.lang.String</attribute-class>
</attribute>
</validator>

<!-- converter -->

<converter>
<description>CreditCard Converter</description>
<converter-id>creditcard</converter-id>
<converter-class>cardemo.CreditCardConverter</converter-class>
</converter>
 Navigation Model
● Navigation decisions are externalized to a
pluggable NavigationHandler
● Default NavigationHandler bases
decision on:
– Which component tree (i.e., page) is currently
being processed?
– Which application Action was invoked?
– What outcome was returned by the Action?
● Navigation rules configured in a faces-config.xml
document, located /web-inf
 JSF Lifecycle
● A JSF page is represented by a tree of UI
components, called a view
● When a client makes a request for the page,
the lifecycle starts
● During the lifecycle, JSF implementation must
build the view while considering state saved
from the previous postback
● When the client performs a postback of the
page, JSF implementation must perform
lifecycle steps
– validation
– conversion
 Request Processing Lifecycle
Response Response
Complete Complete

Faces
Request Reconstitute Apply
Process Process Process
Component Request
Events Validations Events
Tree Values

Render Response
Response Response
Complete Complete

Faces
Response Update
Render Process Invoke Process
Model
Responder Events Application Events
Values

Conversion Errors /
Render Response
Validation / Conversion
Errors / Render Response
 Presentation Agenda
● Overview
● JavaServer Faces
TM

● Architecture Overview
● Key Concepts
● Development Steps
● Car Demo

● Summary and Resources

 Development Steps
● Create development directory
structure
● Write web.xml
● Write ant build script
● JSF-specific steps
● Build, deploy, and test the application
 Development Directory
Structure
● Same development directory structure for any
typical Web application
- We will use the source/build directory
structure of Java WSDP Web applications
● Ant build script should be written accordingly
- Just use the ant build.xml script that comes
with Java WSDP
 What’s in Faces Application
● It’s a WAR:
one_or_more_images.jpg
one_or_more_jsf_files.jsp
WEB-INF/web.xml
WEB-INF/faces-config.xml
WEB-INF/classes/ApplicationClass.class
WEB-INF/lib/more.jar
(if not running in Java WSDP 1.3)
WEB-INF/lib/jsf-api.jar
WEB-INF/lib/jsf-ri.jar
WEB-INF/lib/jstl.jar
WEB-INF/lib/jsf-el.jar
WEB-INF/lib/standard.jar
WEB-INF/lib/commons-beanutils.jar
WEB-INF/lib/commons-digester.jar
WEB-INF/lib/commons-collections.jar
WEB-INF/lib/commons-logging.jar
 Write web.xml
● Same structure as any other Web application
– FacesServlet is like any other servlet
– Servlet definition and mapping of FacesServlet
● There are several JSF specific <context-
param> elements
Example: web.xml in JSF beta
<context-param>
<param-name>javax.faces.application.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>

<!-- Faces Servlet Mapping -->

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
Java Web Services
Developer’s Pack 1.3
JSF-Specific Development Steps
1.Develop model objects which hold the
data
2.Add managed bean declarations to
Application Configuration File faces-
config.xml
3.Create Pages using UI component
and core tags
4.Define Page Navigation in faces-
config.xml
 1. Develop Model Objects:
Managed Bean
● The model (M) in MVC
● A regular JavaBeans with read/
write properties
● May contain application methods and
event handlers
● Use to hold data from a UI (page)
● Creation and lifetime is managed
by JSF runtime
– Application, session, request, none
● JSF keeps the bean’s data in sync with the
UI
 LoginFormBean.java
public class LoginFormBean.java {
// member declaration
public LoginFormBean() { }

public void setUserName(String n) {

userName = n;
}
public String getUserName() {
return (userName);
}
public void setPassword(String p) {
password = p;
}
public String getPassword() {
return (password);
}
...
2. Managed Bean Declaration
Faces-config.xml:
<managed-bean>
<managed-bean-name>
LoginFormBean
</managed-bean-name>
<managed-bean-class>

myapp.LoginFormBean
</managed-bean-class>
<managed-bean-scope>
request
</managed-bean-scope>
</managed-bean>
 Managed Bean Creation Facility
● Value reference expressions that included
“loginFormBean”
● The server will attempt to find a bean under this
name in some scope
● If there is no such bean, optionally:
– Instantiate a bean of the specified type
– Configure scalar/array/list/map properties
– Store bean instance in specified scope
● Creation rules configured in a faces-config.xml
document
 Binding UI to Managed Bean
login.jsp
<h:input_text id=”userName”
valueRef=”LoginFormBean.userName”/>

faces-config.xml
<managed-bean> LoginFormBean.java
<managed-bean-name> public class LoginFormBean
LoginFormBean ...
</managed-bean-name> public void setUserName(...) {
<managed-bean-class> public String getUserName(...) {

myapp.LoginFormBean
</managed-bean-class>
 3. Create JSF Pages
● Must include JSF tag library
– HTML and core tags
● All JSF tags must enclosed between a set of
use_faces tag
● Use JSF form and form component tags
– <h:input_text> not <input type=”text”>
– <h:command_button> not <input type=”submit”>
● May include validators and event listeners on any
form components
 Two Tag Libraries
● html_basic
- Defines tags for representing common HTML user
interface components
● jsf_core
- Defines other JSF related tags
- Independent of any rendering technology
● 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" %>
 Sample JSF Page TM

<f:use_faces>
<f:form formName=”logonForm”>
<h:panel_grid columns=”2”>
<h:output_text value=”Username:”/>
<h:input_text id=”username” length=”16”
valueRef=”loginFormBean.userName”/>
<h:output_text value=”Password:”/>
<h:input_secret id=”password” length=”16”
valueRef=”loginFormBean.passWord”/>
<h:command_button type=”submit”
label=”Log On”
action=”success”/>
<h:command_button type=”reset”
label=”Reset”/>
</h:panel_grid>
</f:form>
</f:use_faces>
 Develop Application Interface
● Page author references the business logic
method to be executed:
<h:command_button ... type=”submit”
actionRef=”loginFormBean.login”/>
● Application provides a business object
bean accessible via a key
(“loginFormBean”)
● Business object provides one or more
accessible actions (“login”)
● Actions return outcome used to navigate to
the next page appropriately
 Login method
Public Action login() {

// get user name and password to verify

String result = validate(getUserName(), getPassword())
?“success”: “error”;

return (new Action() {

public String invoke() {
e s s menu.jsp
return (result);
succ
} login.jsp
}); new
user

err
or
new_usr.jsp

error.jsp
4. Define Page Navigations
Rules: Faces-config.xml
<navigation-rule>
<from-view-id>/login.jsp</from-tree-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/menu.jsp</to-tree-id>
</navigation-case>
</navigation-rule>

<navigation-rule>
<from-view-id>/menu.jsp</from-tree-id>
<navigation-case>
<from-outcome>selectItems</from-outcome>
<to-view-id>/itemList.jsp</to-tree-id>
</navigation-case>
</navigation-rule>
 JSF and Development Tools
● All the major tool vendors are part of the
expert group
– Expect to see support in these tools
● Java Web Services Developer Pack 1.3
● Sun Java System Application Service (Sun
TM

Java System Application Server 8.0)

● Sun Java Studio Creator (formerly Project
Rave)
● NetBeans / Sun Java Studio
 Current Status
● JavaServer Faces Reference Implementation, 1.0
Beta
- Http://java.sun.com/j2ee/javaserverfaces/downlo
ad.html
- Integrated in JavaTM Web Services Developer Pack
(Version 1.3)
● Http://java.sun.com/webservices/downloads/webservices
pack.html
● The JavaServer Faces Specification, 1.0 Proposed
Final Draft in Dec, 2003
 Presentation Agenda
● Overview
● JavaServer Faces
TM

● Architecture Overview
● Key Concepts
● Development Steps
● Car Demo

● Summary and Resources

 Car Demo Page Flow
More.jsp

Configure car Buy

car

Finish
Storefront.jsp Customer.jsp Thanks.jsp

Change
options Give personal
information

Buy.jsp
Combining SVG and JavaServer™
Faces Technologies
● Scalable Vector Graphics (SVG)
is an industry standard for rich, interactive, 2D
graphics
● JavaServer™ Faces technology
is an extensible, markup independent server-side
user interface framework that works with SVG
● There is an exciting synergy when
you use the two technologies together
 How to Work Together?
● SVG and JavaServer™ Faces technologies are
great complements:
– SVG is a markup language for interactive graphics
which can be generated server-side
– JavaServer™ Faces technology is a
server-side component framework that can
generate any user interface markup
● To combine them, you would:
– Build a RenderKit that emits SVG markup instead of
HTML or WML markup
Car Demo: Select a Locale
Car Demo
Car Demo: JSF&SVG
Car Demo
Car Demo: JSF & HTML
Car Demo: JSF & SVG
Car Demo: JSF & SVG
Car Demo
Car Demo: Validation
Car Demo
 Presentation Agenda
● Overview
● Frameworks
– Struts
– JavaServer Faces
TM

● Summary and Resources

Summary

● JavaServer Faces is the standard

TM

Java API for web-based user interface

TM

components
● JavaServer Faces is designed to
TM

integrate well into development tools

 Resources
● JavaServer Faces Specification, Tutorial,

are available at:

– http://java.sun.com/j2ee/javaserverfaces/
- Http://java.sun.com/webservices/docs/1.3/tutori
al/doc/index.html
● Online Forum (Free Registration
Required):
– http://forums.java.sun.com/forum.jsp?forum=427
Web Application Framework —
JavaServer Faces
TM

Doris Chen Ph.D.

[email protected]