10/9/2012

1

Java Server Faces (JSF)

2

� What is JSF?

� JSF Architecture.

� How does JSF work?

10/9/2012

2

3

What is Java Server Faces?

� JSF is a new web application framework that accomplishes the MVC paradigm

� Provides set of reusable custom components.

� Provides set of tags to access those components.

4

JSF Architecture

� JSF follows MVC framework

� Model: objects and properties of application

� View: Renderers take care of view.

� Controller: FacesServlet/ JSF infrastructure defines the flow of the application.

10/9/2012

3

5

How JSF works

� A form is displayed�Form uses <f:view> and <h:form>

� The form is submitted to itself.

� The bean is instantiated. Listed in the managed-bean section of faces-config.xml

� The action controller method is invoked.

� The action method returns a condition.

� The result page is displayed.

6

Login page

10/9/2012

4

7

Welcome page

8

Example files

index.xhtml,welcomexhtml – define the login and welcome screens.

UserBean.java – manages user data

faces-config.xml – configuration file for the application.

web.xml – deployment descriptor.

10/9/2012

5

9

JSF Example(index.xhtml)

<f:view>

…

<h:form>

<h3><h:outputText value="#{Message.inputname_header}"/></h3>

<table>

<tr>

<td>Name:</td>

<h:inputText value="#{user.name}“ required=“true”>

<f:validateLength minimum="2" maximum="20"/>

…

<td>Password:</td>

<h:inputSecret value="#{user.password}"/>

…

<h:commandButton value="Login" action="login"/>

</h:form>

</f:view>

10

index.xhtml

� core and html JSF tags

� Core tags are used to perform core actions and display nothing to the user. Html tags are used to render html elements(text, form elements etc) to the user.

� All JSF components must be nested inside <f:view> core tag.<f:view>

<h:form>

<h3><h:outputText value="#{Message.inputname_header}"/></h3>

<h:inputText value="#{user.name}“ required=“true”/>

<f:validateLength minimum="2" maximum="20"/>

<h:inputSecret value="#{user.password}"/>

<h:commandButton value="Login" action="login"/>

</h:form>

</f:view>

10/9/2012

6

11

Example (Cntd.)

� Any attribute value that starts with # and is wrapped in {} is dynamically substituted in

#{Message.inputname_header}

� <h:form> represents form element

� Form action is defined in the <h:commandButton> element.<h:commandButton value="Login" action="login"/>

� <h:inputText> for name field renders a textbox. Required attribute tells the value must be provided by the user. Thus validating the field.

<h:inputText value="#{user.userName}" required="true">

� Nested core tag provides range validation.<f:validateLength minimum="2" maximum="20"/>

Use Your Favorite XHTML Tool:

10/9/2012

7

13

UserBean.java

@ManagedBean(name=“user”)

@SessionScoped

public class UserBean {

public String getName() { . . . }

public void setName(String newValue) {. . . }

public String getPassword() { . . . }

public void setPassword(String newValue) { . . . }

. . .

}

14

Configuration file (faces-config.xml)

<?xml version="1.0"?>

<!DOCTYPE faces-config PUBLIC"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN""http://java.sun.com/dtd/web-facesconfig_1_0.dtd">

<faces-config><navigation-rule>

<from-view-id>/index.xhtml</from-view-id><navigation-case><from-outcome>login</from-outcome><to-view-id>/welcome.xhtml</to-view-id></ navigation-case>

</navigation-rule>

<managed-bean><managed-bean-name>user</managed-bean-name><managed-bean-class>com.corejsf.UserBean</managed-bean-class><managed-bean-scope>session</managed-bean-scope>

</managed-bean></faces-config>

10/9/2012

8

15

Configuration File(Cntd.)

� faces-config.xml defines how one page will navigate to next. Also specifies managed beans.

<navigation-rule>

<from-view-id>/indexxhtml</from-view-id>

<navigation-case>

<from-outcome>login</from-outcome>

<to-view-id>/welcomexhtml</to-view-id>

</navigation-case>

</navigation-rule

� <from-view-id> page you are currently on.

� <to-view-id> next page to display.

� <from-outcome> value matches the action attribute of the command button of index.xhtml

<h:commandButton value="Login" action="login"/>

16

Configuration file (Cntd.)

� Managed bean is the model of the framework.

� <managed-bean-name> is the name the views use to reference the bean.<managed-bean-name>user</managed-bean-name>

<h:inputText value="#{user.name}“ required=“true”/>

� <managed-bean-class> is the fully classified name for

the bean.<managed-bean-class> com.corejsf.UserBean </managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

10/9/2012

9

17

Web.xml (Deployment Descriptor)

<context-param>

<param-name>

javax.faces.CONFIG_FILES</param-name>

<param-value>

/WEB-INF/faces-config.xml

</param-value>

<description>

</description>

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

18

Web.xml (Cntd.)

� Javax.faces.CONFIG_FILES parameter tells where the JSF configuration file exists.

<param-name>

javax.faces.CONFIG_FILES

</param-name>

<param-value>

/WEB-INF/examples-config.xml

</param-value>

� Javax.faces.STATE_SAVING_METHOD specifies where the state must be saved: client or server.

<param-name>

javax.faces.STATE_SAVING_METHOD

</param-name>

<param-value>server</param-value>

� The servlet-mapping and servlet blocks specify that any URL that ends in a .jsf extension should be redirected through a servlet called javax.faces.webapp.FacesServlet.

10/9/2012

10

Demo with NetBeans

JSF Request Processing Lifecycle

RestoreComponent

Tree

Apply RequestValue

Process Events

ProcessValidations

Render Response

Invoke Application

Update ModelValues

Request

Response

Render Response

Conversion Errors

Process Events

Response Complete Response Complete

Process Events

Process Events

Response Complete Response Complete

Validation orConversion Errors

10/9/2012

11

JSF - Request Processing Lifecycle

� Restore component tree� The controller examines the request and extracts the view ID, which is

determined by the name of the JSP page. If the view doesn't already exist, the JSF controller creates it. If the view already exists, the JSF controller uses it. The view contains all the GUI components.

� Apply Request Values� The purpose of the apply request values phase is for each component

to retrieve its current state. Component values are typically retrieved from the request parameters.

� Process Validations� At this stage, each component will have its values validated against the

application's validation rules.

� Update Model� updates the actual values of the server-side model -- namely, by

updating the properties of your backing beans.

JSF - Request Processing Lifecycle

� Invoke Application� The JSF controller invokes the application to handle

Form submissions. The component values will have been converted, validated, and applied to the model objects, so you can now use them to execute the application's business logic.

� Render Response� you display the view with all of its components in their

current state.

� Render the page and send it back to client

10/9/2012

12

JSF Component

UIComponent

ChildUIComponent

IdLocal ValueAttribute Map

EventHandling

Validatorshas

has

has

has

Render

has

Converters

has

Model

binds

JSF Standard UI Components

� UIInput

� UIOutput

� UISelectBoolean

� UISelectItem

� UISelectMany

� UISelectOne

� UISelectMany

� UIGraphic

� UICommand

� UIForm

� UIColumn

� UIData

� UIPanel

10/9/2012

13

JSF HTML Tag Library

<f:view><h:form id=”logonForm”>

<h:panelGrid columns=”2”><h:outputLabel for=”username”>

<h:outputLext value=”Username:”/></h:outputLabel><h:inputText id=”username” value=”#{logonBean.username}”/><h:outputLabel for=”password”>

<h:outputText value=”Password:”/></h:outputLabel><h:inputSecret id=”password” value=”#{logonBean.password}”/><h:commandButton id=”submitButton” type=”SUBMIT” action=”#{logonBean.logon}”/>

<h:commandButton id=”resetButton” type=”RESET”/></h:panelGrid>

</h:form></f:view>

JSF HTML Tag Library

<table>

<tr><td>Food Selection:</td></tr>

<tr><td>

<h:selectManyCheckBox value=“#{order.foodSelections}”>

<f:selectItem itemValue=“z” itemLabel=“Pizza” />

<f:selectItem itemValue=“fc” itemLabel=“Fried Chicken” />

<f:selectItem itemValue=“h” itemLabel=“Hamburger” />

</h:selectManyCheckBox>

</td>

</table>

10/9/2012

14

JSF Rendering Model

Component

Decoding

Encoding

Two Rendering Models (direct or delegated)

Direct

Delegated

Renderer

Pluggable look and feel

JSF Rendering Model

� Render kit consists of a set of renders

� JSF reference implement must provide a render kit for all the standard UI components to generate HTML 4.01

� Custom render kit can be provided to render UI components into a specific markup language

10/9/2012

15

JSF – Managed Bean

� Use to separate presentation from business logic

� Based on JavaBeans

� Use the declarative model

� Entry point into the model and event handlers

JSF – Value Binding

� Bind component value and attribute to model objects

Literal:

<h:outputText rendered=”true” value=”$1000.00”/>

Value Binding:

<h:outputText rendered=”#{user.manager}” value=”#{employee.salary}”/>

10/9/2012

16

JSF – Value Binding

� Value binding expression�Bean properties

�List

�Array

�Map

�Predefine objects- header, header values, request parameters, cookie, request/session/application scope attributes, initial parameters

JSF – Value Binding Expression

<h:outputText value=“#{user.name}” />

<h:outputText value=“Hello There #{user.name}” />

#{!user.manager} – operator (+, -, *, /, % …)

Faces-config.xml<managed-bean>

<managed-bean-name>user</managed-bean-name><managed-bean-class>org.User</managed-bean-class><managed-bean-scope>session</managed-bean-scope>

</managed-bean>

Support bean property initialization for primitive data type as well as List and Map.

Binding expression can be used at the bean configuration as well

10/9/2012

17

JSF – Predefined Objects

Variable Meaning

header A Map of HTTP headers, only the first value of for each name

headerValues A Map of HTTP headers, String[] of all values for each name

param A Map of HTTP request parameters, first value of for each name

paramValues A Map of HTTP headers, String[] of all values for each name

cookie A Map of cookie name and values

initParam A Map of initialization parameters

requestScope A Map of all request scope attributes

sessionScope A Map of all session scope attributes

applicationScope A Map of all request scope attributes

facesContext FacesContext instance of this request

view The UIViewRoot instance of this request

JSF – Method Binding

� Binding an event handler to a method<h:commandButton action=“#{user.login}” />

� Four component attributes:

�Action

�Action listener

�Value change listener

�Validator

10/9/2012

18

JSF Events

� Events are fired by each UI component

� Event handlers are registered with each component

JSF Events – Value Change Event

Value Changed Listener:<h:inputText id=”maxUsers”

valueChangeListener=“#{user.checkMaxUser}” />

public void checkMaxUser(ValueChangeEvent evt) {

evt.getNewValue(); // new value

evt.getOldValue(); // old value

}

10/9/2012

19

JSF Events – Action Event

Action Listener:<h:commandButton value="Login“

actionListener=“#{customer.loginActionListener}” action=“#{customer.login}” />

public void loginActionListener(ActionEvent e) {

}

public String login() {return “OK”;// return “FAI”;

}

JSF Events – actionListener vs. Action

� actionListener

� Implement UI logic

� Have access to event source

� Do not participate in navigation handling

� Action

� Implement business logic

� Don’t have access to action source

� Returned outcome affects the navigation handling

10/9/2012

20

JSF – Multiple Event Handlers

<h:selectOneMenu value=“#{customer.country}”

<f:valueChangeListener type=“com.comp.CntrListener”

<f:valueChangeListener type=“com.comp.CCListener”

</h:selectionOneMenu>

<h:commandButton action=“#{search.doSearch()}”>

<f:actionListener type=“com.comp.AAciontListener” />

<f:actionListener type=“com.comp.BActionListener” />

</h:commandButton>

JSF Validators

� For validating user input

� 0 or more validators can be registered with a UIInput component

� Validators are invoked during the Process Validations request processing phase

� Standard validators and custom validator

10/9/2012

21

JSF – Two Step Approach

Apply RequestValue

Request

Submitted Value

Validation

Local Value

Y

N

Conversion

N

Model Value

JSF Validators

� DoubleRangeValidator

� Any numeric type, between specified maximum and minimum values

� LongRangeValidator

� Any numeric type convertible to long, between specified maximum and minimum values

� LengthValidator

� String type, between specified maximum and minimum values

10/9/2012

22

JSF Validators

Required Validation Example:<h:inputText value=“#{user.id}” required=“true” />

Length Validation Example:<h:inputText value=“#{user.password}” >

<f:validateLength minimum=“6” /><f:validator validatorId=“passwordValidator” />

</h:inputText>

JSF Converters

� Type conversion between server-side objects and their representation in markup language

� Standard converter implementations

�DateTime

�Number

10/9/2012

23

JSF Converters

Number converter example:

<h:inputText value=“#{rent.amt}” converter=“Number”>

<f:attribute name=“numberStyle” value=“currency” />

</h:inputText>

Date convert example:

<h:inputText value=“#{rent.dueDate}” converter=“DateFormat”>

<f:attribute name=“formatPattern” value=“MM/DD” />

</h:inputText>

JSF Navigation

� JSF provides a default navigational handler

� Behavior is configured in configuration file (faces-config.xml)

NavigationNavigation

Rule

Navigation Case

From View Id1 Contains *

1 Contains *

has

10/9/2012

24

JSF Navigation - Example

<navigation-rule><description>LOGIN PAGE NAVIGATION HANDLING</description><from-view-id> /login.jsp </from-view-id>

<navigation-case><description>Handle case where login succeeded.</description><display-name>Successful Login</display-name><from-action>#{userBean.login}</from-action><from-outcome>success</from-outcome><to-view-id>/home.jsp</to-view-id>

</navigation-case>

<navigation-case><description>User registration for a new user succeeded.</description><display-name>Successful New User Registration</display-name><from-action>#{userBean.register}</from-action><from-outcome>success</from-outcome><to-view-id>/welcome.jsp</to-view-id>

</navigation-case>

</navigation-rule>

JSF – Error Handling

� javax.faces.application.FacesMessage

� Information, Warning, Error, Fatal

� Contain summary and detail

� <h:messages> - to display all messages

� <h:message> - to display a single message for a particular component

� javax.faces.context.FacesContext.addMessage(String clientId, FacesMessage)

10/9/2012

25

TEMPLATING: Facelets

� In web application, most pages are follow a similar web interface layout and styling, for example, same header and footer. In JSF 2.0, you can use Facelets tags to provide a standard web interface layout easily

JSF Templates and Template Clients

10/9/2012

26

Template Layout

commonLayout.xhtml

commonHeader.xhtml

10/9/2012

27

Template Client

JSF - HTML & CSS Integration

� HTML Integration� Pass-through attributes<h:inputText size=“5” onblur=“checkValue();” />

� Stylesheets Integration� Most HTML tags have one or more attributes (style,

styleClass) for passing style information<h:outputText styleClass=“header” value=“#{bundle.welcome}” />

� For data table<h:dataTable rowClasses=“odd, even”,

columnClasses=“columnOne, columnTwo” ..

10/9/2012

28

h:inputText

h:inputTextArea

10/9/2012

29

h:inputSecret

h:inputHidden

10/9/2012

30

h:commandButton

h:form

10/9/2012

31

h:graphicImage

h:selectBooleanCheckbox

10/9/2012

32

h:selectOneRadio

h:selectOneMenu

10/9/2012

33

h:selectOneListbox

h:selectManyCheckbox

10/9/2012

34

h:selectManyMenu

selectManyListbox

10/9/2012

35

messages

outputScript

10/9/2012

36

h:outputStylesheet

h:panelGrid

10/9/2012

37

h:dataTable

Add Row to dataTable

10/9/2012

38

Delete Row from dataTable

Edit Row in dataTable

10/9/2012

39

h:message

References

� http://www.mkyong.com/tutorials/jsf-2-0-tutorials/