Java Server Faces

(JSF)
 Java Server Faces (JSF)

• JSF stands for Java Server Faces.

• It is a server side framework for web
development.
• JSF is MVC web application framework which
simplifies the UI construction by reusable UI
component.
• The JSF provides components (inputText,
commandButton etc) and helps to manage their
states.
• JSF provides an event driven programming model.
 JSF Features

• Component based framework.

• Implement facelets technology.
• Integration with expression language.
• Support HTML5
• Ease and Rapid web development.
• Support internationalization.
• Bean Annotations.
• Default Exception Handling.
• Templating.
• Inbuilt AJAX support.
 JSF Component Model

• A UI component represents a stateful object on the server which

provides specific functionality for interacting with an end user.
• Each JSF component has tag handler class associated with it.
• When JSF implementation reads the JSF page, tag handlers
corresponding to UI components execute and build a component
tree.
• For example a JSF page contains h:form, h:inputText and
h:commandButton tags then component tree will be like shown
below:
 JSF Architecture
JSF is developed based on the Model View Controller(MVC) pattern.
The Model View Controller separates the business logic from
presentation.
The JSF application contains
• UI components represented as stateful objects on the server
• Server-side helper classes
• Validators, event handlers, and navigation handlers
• Application configuration resource file for configuring application
resources
• JavaBeans components as models containing application-specific
functionality and data
• A custom tag library for representing event handlers and
validators
• A custom tag library for rendering UI components
JSF Architecture
 JSF Life Cycle

• JSF framework automatically manage life cycle.

• It also allow you to manage life cycle manually.
• Same as others JSF life cycle also start with client
request and end with server response.
• JSF lifecycle divide into two main phases:
– Execute Phase
– Render Phase
 JSF Life Cycle (Execute phase)

• When first request is make, application view is

built of restored.
• For other request other subsequent action is
performed.
• Execute phase is further divide into six distinct sub
phases given below:
– Restore View
– Apply Request Values
– Process Validations
– Update Model Values
– Invoke Application
JSF Life Cycle
 JSF Life Cycle

• Restore View:
– The Restore View is the first phase of JSF life cycle.
– When a request comes, it create a component tree and
save it into FacesContext instance. If it is already
created then, restore view retrieves the component
tree for the requested page from FacesContext
instance.
– It also connect handler and validators to the
components
• Note: If there is no query data then render
response phase will execute directly and
intermediate phase will not execute.
 JSF Life Cycle

• Apply Request Values:

– In this phase, component in the component tree will
retrieve their values from request and store them
locally.

• Process Validations:
– In this phase, all convertors and validators are executed
on local values and if validation passes then, all other
phases executes normally otherwise JSF
implementation adds an error message to the
FacesContext instance and render response phase
executes directly.
 JSF Life Cycle

• Update Model Values:

– In this phase, bean properties are updated using
corresponding component local values.
• Invoke Application:
– In this phase, action with the business logic is executed
and returns a string which is passed to the navigation
handler for navigation.
• Render Response:
– The Render Response is the last phase of the JSF life
cycle. In the phase, response is send to the browser.
 JSF Life Cycle (Rander)

• In this phase, the requested view is rendered as a

response to the client browser. View rendering is a
process in which output is generated as HTML or
XHTML. So, user can see it at the browser
• The following steps are taken during the render
process.
– Application is compiled.
– Application executes after compilation and a new
component tree is constructed for the application and
placed in a FacesContext.
Based on the component tree. A new view is built.
 JSF Life Cycle (Rander)

• Based on the component tree. A new view is built.

• The view is rendered to the requesting client as a
response.
• The component tree is destroyed automatically.
• On subsequent requests, the component tree is
rebuilt, and the saved state is applied.
 JSF Beans Scope

• Bean Scopes:
– When we define a bean, we have to define its scope
also in which it will be placed. JSF implementation
provide us several scope for a bean. Request scope is
the default scope.
• Commonly used bean scopes:
– Request scope.
– View scope.
– Session scope.
– Application scope.
 JSF Beans Scope

• Request scope:
– In request scope, bean created when a request involving this
bean comes and destroyed after completing response.
• View scope:
– In view scope, bean created when a request involving this bean
comes and destroyed when view changed.
• Session Scope:
– In session scope bean created when first request involving this
bean comes and destroyed when session is terminated.
• Application scope:
– In application scope, bean created when first request involving
this bean comes and remains lives for whole duration of web
application. An application scope managed bean is shared in all
requests and sessions.
 JSF Configuration Files

• A JSF application need the following two

configuration files:
– web.xml
– faces-config.xml

• Note: Put the configuration files under WEB-INF

folder.
JSF Configuration Files (web.xml)
 JSF Configuration Files

• The faces-config.xml file contains the JSF

application configuration.

• It can be used to configure the following:

– Used to configure managed beans.
– Used to configure convertors.
– Used to configure validators.
– Used to configure navigation.
JSF Configuration Files
 JSF Managed and Backing Beans

• JSF managed bean:

– A managed bean is a normal java bean class which
contains data and business logic.
– A managed bean is managed by JSF framework and act
as a model for JSF application.
– Before using a managed bean we have to configure it
either in faces-config.xml file or using annotation.

• JSF backing bean:

– JSF backing bean is a managed bean which contains
some or all values of a web form. It is normally for
business logic.
 JSF Managed and Baking Beans

• Configure Managed Bean using faces-config.xml:

• Note: We can create a different xml file for managed bean entries
and put the entry of this xml file in web.xml under
javax.faces.CONFIG_FILES initialize parameter.

• Configure Managed Bean using annotation: @ManagedBean

annotation is used to mark a bean to be managed bean. Name
attribute specify the managed bean name and if not specified then
class name is taken as default managed bean name.
 JSF – HelloWorld Example Using Managed Beans

• Create a managed bean class “HelloWorld.java” which is used for

interacting with User Interface and business logic.
• HelloWorld.java contains the getter method of message property.
• Register the managed bean class into faces-config.xml or use
annotations and provide the details like name and scope etc.
• Insert the JSF controller servlet FacesServlet entry into web.xml.
Create a JSF page “helloworld.xhtml”.
• When “helloworld.xhtml” renders it use managed bean class name
defined in faces-config.xml or annotation file to access its property.
• The managedBeanName.mangedBeanProperty expression calls the getter
method of the mangedBeanProperty. So, in our example
helloWorld.message calls the getter of message property in
HelloWorld.java.
 JSF – HelloWorld Example

package com.mypack;  
/**
* Managed bean.
* @author Anonymous
*/
public class HelloWorld {
public String getMessage() {
return "JSF hello world example.";
}
}
 JSF – HelloWorld Example (faces-config.xml)

<?xml version="1.0" encoding="windows-1252"?>

<faces-config version="2.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">    
<managed-bean>
<managed-bean-name> helloWorld </managed-bean-name>
<managed-bean-class> com.mypack.HelloWorld </managed-bean-
class>
<managed-bean-scope>
session
</managed-bean-scope>
</managed-bean>
</faces-config>
 JSF – HelloWorld Example (web.xml)

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  
<servlet> <servlet-name> Faces </servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>faces</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>  
</web-app>
 JSF – HelloWorld Example
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head> <title>JSF hello world example.</title>
</h:head>
<h:body>
<h3> <h:outputText value="$
 JSF – HelloWorld Example Using Annotations

• Create a managed bean class “HelloWorld.java” which is used for

interacting with User Interface and business logic.
• HelloWorld.java contains the getter method of message property.
• The @ManagedBean annotation property specify the managed bean
name.
• The @SessionScoped annotation specify the scope of the managed
bean. Insert the JSF controller servlet “FacesServlet” entry into
web.xml.
• Create a jsf page “helloworld.xhtml”.
• The managedBeanName.mangedBeanProperty expression calls the
getter method of the mangedBeanProperty so in our example
helloWorld.message calls the getter of message property in
HelloWorld.java.
 JSF – HelloWorld Example

package com.mypack;  
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;  
/**
* Managed bean.
* @author Anonymous
*/
@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld {
public String getMessage() {
return "JSF hello world example using annotation.";
}
}
JSF – HelloWorld Example
JSF – HelloWorld Example
JSF – HelloWorld Example