Java Server Faces

Fahad R. Golra
ECE Paris Ecole d'Ingnieurs - FRANCE

Lecture 8 - Java Server Faces

(JSF)
Introduction to JSF
JSF Architecture
JSF Lifecycle
JSF Development Steps

JEE - Java Server Faces (JSF)

3 Layers of Information System

Client

JSF

Servlets

EJB

presentation
layer

application logic
layer

resource management
layer

JPA

Database
3

JEE - Java Server Faces (JSF)

information system

JSP

Java Server Faces

JavaServer Faces technology is a server-side user

interface component framework for Java technologybased web applications.

JEE - Java Server Faces (JSF)

Components of JSF

An API for

representing UI components and managing their state

handling events
server-side validation
data conversion
defining page navigation
supporting internationalisation and accessibility

Two JavaServer Pages (JSP) custom tag libraries for

expressing UI components within a JSP page and for
wiring components to server-side objects

JEE - Java Server Faces (JSF)

Why JSF ?

Drop components onto a page by adding component

tags
Wire component-generated events to server-side
application code
Bind UI components on a page to server-side data
Construct a UI with reusable and extensible
components
Save and restore UI state beyond the life of server
requests

JEE - Java Server Faces (JSF)

Request Scope

Request Scope

request
client

response

Request Scope

request
response
client 2
7

JEE - Java Server Faces (JSF)

Request Scope

per request

response

Server

per request

request

Session Scope

request

Server

client

Session Scope

per client

request

Session Scope

per client

response

response

request
response
client 2
8

JEE - Java Server Faces (JSF)

Application Scope

request

Server

request
client

response
Application Scope

request
response
client 2
9

JEE - Java Server Faces (JSF)

per application

response

JSF Architecture

10

JEE - Java Server Faces (JSF)

JSF User Interface

The UI for the web application manages the objects referenced by the
JSP page.

These objects include

The UI component objects that map to the tags on the JSP page
Any event listeners, validators, and converters that are registered on the
components
The JavaBeans components that encapsulate the data and applicationspecific functionality of the components
11

JEE - Java Server Faces (JSF)

JSF Lifecycle

Client Browser
client
Restore Value
Re-constitute component
tree

Render Response

12

Apply Request
Values

Process Events,
Validators

Invoke Application
Logic

Update Model
Values

JEE - Java Server Faces (JSF)

Restore View Phase

JSF implementation
builds the view of the page
wires event handlers and validators to components in the
view
saves the view in the FacesContext instance

Initial Request - creates an empty view, advances to

the render response phase
Subsequent Request - restores the (already existing)
view by using the state information saved on the
client or the server
13

JEE - Java Server Faces (JSF)

Apply Request Values Phase

Each component in the tree extracts its new value from the
request parameters by using its decode method
Implementation skips to the render response phase if
renderResponse is called
If events have been queued, the they are broadcasted to
interested listeners
validation, conversion, and events associated with
components having immediate attributes will be processed
during this phase

14

JEE - Java Server Faces (JSF)

Process Event, Validators Phase

JavaServer Faces implementation processes all

validators registered on the components in the tree
If validation fails, error message is added to
FacesContext
Events from previous phase and this phase are used to render
errors by advancing to render response phase

Implementation skips to the render response phase if

renderResponse is called
If events have been queued, the they are broadcasted to
interested listeners

15

JEE - Java Server Faces (JSF)

Update Model Values Phase

If data is valid, the implementation can traverse the

component tree and set the corresponding server-side
object properties to the components local values.
Implementation will update the bean properties
pointed at by an input components value attribute.
Implementation skips to the render response phase to
display any error messages
If events have been queued, the they are broadcasted to
interested listeners

16

JEE - Java Server Faces (JSF)

Invoke Application Logic Phase

JSF implementation handles any application-level

events, such as submitting a form or linking to
another page
If the view being processed was reconstructed from
state information from a previous request and if a
component has fired an event, these events are
broadcast to interested listeners.

17

JEE - Java Server Faces (JSF)

Render Response Phase

JSF implementation delegates authority for rendering the

page to the JSP container if the application is using JSP
pages.
For initial request, the components represented on the page
will be added to the component tree
components dont need to added again for subsequent
requests

Components will be rendered as the JSP container

traverses the tags in the page.
queued error messages are displayed, if any
Once rendered, the state of the response is saved so that
subsequent requests can access it
18

JEE - Java Server Faces (JSF)

UI Components

UIComponent/UIComponentBase
Base class for all user interface components
Standard UIComponent Subclasses
UICommand, UIForm, UIOutput
UIGraphic, UIInput, UIPanel, UIParameter
UISelectBoolean, UISelectMany, UISelectOne
Example
<h:inputText id=fNameInput"
value="#{UserRegistrationBean.firstName}"/>

19

JEE - Java Server Faces (JSF)

JSF Validators

ValidatorsPerform correctness checks on UIInput

values
Register one or more per component
Enqueue one or more messages on errors
Standard implementations for common cases
Example
<h:input_text valueRef=testingBean.today
<f:validator_length minimum=6 maximum='10 />

20

JEE - Java Server Faces (JSF)

JSF Converters

ConvertersPlug-in for conversions:

Output: Object to String
Input: String to Object
Standard implementations for common cases
Example
<h:input_text valueRef=testingBean.today
convertor=DateTime/>

21

JEE - Java Server Faces (JSF)

Navigation

Application developer defines the navigation model of

the web application
in Application configuration file (Facesconfig.xml)
Navigation rules
Determine where (page) to go.
Precise navigation case

22

JEE - Java Server Faces (JSF)

JSF Development Steps

1. Build Model from Java Beans

Lifetime Configured by developer and managed by JSF
Request, Session, or Application Scope
Setters and getters accessed through JSF pages
2. Add model objects (managed bean) declarations to
Application Configuration File faces-config.xml
3. Use UI Components to build JSF pages
Include JSF Tags, Validation and Event Listeners
4. Define Page Navigation rules in faces.config.xml
5. Configure web.xml
23

JEE - Java Server Faces (JSF)

Step 1 - Build Model

The model (M) in MVC

A regular JavaBeans with getters / setters
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
JSF keeps the bean's data in sync with the UI

24

JEE - Java Server Faces (JSF)

Step 2 - Declare Model Objects

In 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>
25

JEE - Java Server Faces (JSF)

Step 3 - Create JSF Pages

Must include JSF tag library

HTML and core tags
All JSF tags must enclosed between a set of view 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

26

JEE - Java Server Faces (JSF)

Step 3 - Create JSF Pages

<f:view>
<f:form formName=logonForm>
<h:panel_grid columns=2>
<h:output_text value=Username:/>
<h:input_text id=username length=16
valueRef=logonBean.username/>
<h:output_text value=Password:/>
<h:input_secret id=password length=16
valueRef=logonBean.password/>
<h:command_button type=submit label=Log On
actionRef=logonBean.logon/>
<h:command_button type=reset label=Reset/>
</h:panel_grid>
</f:form>
</f:view>
27

Step 4 - Define Navigation

<navigation-rule>
<from-tree-id> /login.jsp </from-tree-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-tree-id>/menu.jsp</to-tree-id>
</navigation-case>
<navigation-case>
<from-outcome>failed</from-outcome>
<to-tree-id>/error.jsp</to-tree-id>
</navigation-case>
</navigation-rule>
28

JEE - Java Server Faces (JSF)

Step 5 - Configure Web.xml

<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>

29

JEE - Java Server Faces (JSF)

JSF vs. JSP for UI

30

JSF

JSP

Components

Rich UI-data-bound
components with events
provided
Custom components

Standard tags (JSTL) that are

non-UI and very basic
Custom components through
tag libraries

Device
independence

Reader kits that provide

device independence

None

Error handling
and validation

Validation framework
Many predefined validators

None

Scripting

Scripts can be attached to

events
All components accessible
from scripts

Embedded Java in the page

Page flow

Simple navigation file (facesconfig.xml)

None

31

JEE - Java Server Faces (JSF)