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

info

rmat

ion

syst

em

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

Serverrequestresponse Request Scope

requestresponse Request Scope

client 2

requestresponse Request Scope

per r

eque

stpe

r req

uest

Session Scope


client

Serverrequestresponse

Session Scoperequestresponse

client 2

requestresponse Session Scope

per c

lient

per c

lient

Application Scope


client

Serverrequestresponse

Application Scope

requestresponse

client 2

requestresponse

per a

pplic

atio

n

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)

Software