Lecture 10 - Java Server Faces (JSF)

Java Server Faces
Fahad R. Golra
ECE Paris Ecole d'Ingénieurs - FRANCE

Lecture 8 - Java Server Faces
(JSF)
• Introduction to JSF
• JSF Architecture
• JSF Lifecycle
• JSF Development Steps
2 JEE - Java Server Faces (JSF)

3 Layers of Information System
presentation
layer
application logic
layer
resource management
layer
Client
informationsystem
EJB
JSP JSF
Servlets
JPA
Database

Java Server Faces
• JavaServer Faces technology is a server-side user
interface component framework for Java technology-
based web applications.

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

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

Request Scope
client
Serverrequest
response Request Scope
request
client 2
request
perrequestperrequest

Session Scope
client
Serverrequest
response
Session Scope
request
response
client 2
request
response
Session Scope
perclientperclient

Application Scope
client
Serverrequest
response
Application Scope
request
response
client 2
request
response
perapplication

JSF Architecture

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 application-
specific functionality of the components

JSF Lifecycle
Client Browser
client
Restore Value
Re-constitute component
tree
Apply Request
Values
Process Events,
Validators
Render Response
Invoke Application
Logic
Update Model
Values

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

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

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

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 component’s value attribute.
• Implementation skips to the render response phase to
display any error messages

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.

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 don’t 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

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}"/>

JSF Validators
• 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
• Example
<h:input_text valueRef=”testingBean.today”
<f:validator_length minimum=”6” maximum='10” />

JSF Converters
• Converters—Plug-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”/>

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

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

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

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>

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

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>

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>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

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 (faces-
config.xml)
• None

Lecture 10 - Java Server Faces (JSF)

More Related Content

What's hot

Similar to Lecture 10 - Java Server Faces (JSF)

More from Fahad Golra

Recently uploaded

Lecture 10 - Java Server Faces (JSF)