Java Server Faces

Web applications
UNIT- V
Internet Programming
 JavaServer Faces (JSF)
• is a “server side user interface component framework for Java™ technology-based web
applications”
• is a specification and reference implementation for a web application development
framework
• Components
• Events
• Validators
• Back-end-data integration
• is designed to be leveraged by tools
• NetBeans, RAD (Rational Application Developer), Eclipse, JDeveloper, etc.
• is a Request-driven MVC
• uses component-based approach
• uses JSP for its display technology, but is not limited to it
 Why JSF?
• MVC for web applications
• Easy to use
• Extensible Component and Rendering architecture
• Support for client device independence
• Standard
• Huge vendor and industry support
• Built-in UI component model (unlike JSP and Servlet)
• Offers finer-grained separation of behavior and presentation than JSP
• Component-specific event handling
• UI elements as stateful objects on the server
• UI-component and Web-tier concepts without limiting you to a particular scripting
technology or markup language
• Can work with any presentation technology including JSP
 JSF Includes

• Set of APIs
• Two JSP custom tag libraries for expressing UI within JSP
• Server-side event model
• State management
• Managed beans
• Unified Expression Language
JSF is a UI Framework for Java Web
Applications
JSF Architecture
How the JSF Specification Fits In
(prior to Facelets)
 JSF View

• A JSF page is represented by a tree of UI components, called a view

• Almost always the view is described with JSP pages (but not mandatory)
• When a client makes a request for the page, if it is caught by the Faces
Servlet and the JSF request lifecycle starts
• During the lifecycle, JSF implementation must build the view
considering the state saved from the previous postback
 Lifecycle Phases

• Request lifecycle consists of 6 phases:

1. Restore View Phase
2. Apply Request Values Phase
3. Process Validations Phase
4. Update Model Values Phase
5. Invoke Application Phase
6. Render Response Phase
Request Lifecycle Diagram
 Facelets
• Facelets is a powerful but lightweight page declaration language that is used to build JavaServer
Faces views using HTML style templates and to build component trees.
• Facelets features include the following:
• Use of XHTML for creating web pages
• Support for Facelets tag libraries in addition to JavaServer Faces and JSTL tag libraries
• Support for the Expression Language (EL)
• Templating for components and pages
• Advantages of Facelets for large-scale development projects include the following:
• Support for code reuse through templating and composite components
• Functional extensibility of components and other server-side objects through customization
• Faster compilation time
• Compile-time EL validation
• High-performance rendering
• In short, the use of Facelets reduces the time and effort that needs to be spent on development
and deployment.
Criteria for choosing Struts or JavaServer Faces
JSF JSP JSP and Struts

Components Rich UI-data-bound components Standard tags (JSTL) that are Struts-specific tag library
with events provided non-UI and very basic Only very basic, form-bean-bound
Custom components Custom components through tag components provided
libraries

Device independence Reader kits that provide device None None

independence

Error handling and validation Validation framework None Validation framework driven by an
Many predefined validators XML file (validation.xml)

Scripting Scripts can be attached to events Embedded Java™ in the page Scripts written in Java Action
All components accessible from classes
scripts Form data but not components
accessible

Page flow Simple navigation file (faces- None Sophisticated, flexible framework
config.xml) XML file based

Session and object management Automatic Manual Manual

 JSF Hello World Application
• To make the simplest JSF application you should perform the following steps:
• Create new Web project
• If your application container does not support JSF (for example Tomcat)
you should add the JSF API and Implementation in your lib folder
• JSF 1.2 also requires JSTL 1.2 in your libraries
• For my-faces following jars are also required:
• commons-beanutils-1.7.0.jar, commons-codec-1.3.jar, commons-
collections-3.2.jar, commons-digester-1.8.jar, commons-discovery-
0.4.jar, commons-logging-1.1.1.jar
 WEB-INF/lib contents

• This is the structure of our

hello JSF application

JARs required by
MyFaces

JSTL 1.2

MyFaces JSF API and

Implementation jars
 web.xml
• In the web.xml file we define
• Welcome file – index.html
• Define Faces Servlet and its mapping

<welcome-file-list> If non-negative, the Web

<welcome-file>index.html</welcome-file> container will load this
</welcome-file-list> servlet on deployment
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet> Faces Servlet is
<servlet-mapping> mapped to all
<servlet-name>Faces Servlet</servlet-name> requests that ends
<url-pattern>*.jsf</url-pattern> with .jsf
</servlet-mapping>
 index.html and hello.jsp
• index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Welcome to JSF Hello World Demo</title></head>
<body>
<a href="hello.jsf">Go to Hello JSF Page</a>
</body>
</html>

• When Faces Servlet sees *.jsf it will look for *.jsp to create the view
• In hello.jsp all content that is JSF specific should be in enclosed in
<f:view> tag
• We also need to specify the needed JSP tag libraries
 hello.jsp
• Here we do 3 things:
• Define "JSF core" and "JSF html" tag libraries
• JSP view (f:view tag)
• Use outputText component to show message
<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
version="2.1">

...
<f:view>
<h:outputText
value="#{'Hello World! I am a h:outputText message'}" />
</f:view>
...
</jsp:root>
 Application Configuration File
(faces-config.xml)
• faces-config.xml defines
• Page navigation rules
• Configures managed beans
• Other custom objects, such as custom components
• It is located in the WEB-INF folder of the project
• Basic structure:
<?xml version="1.0"?>
<faces-config 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-facesconfig_1_2.xsd"
version="1.2">
...
</faces-config>
 JSF Component Model
• A set of UIComponent classes for specifying the state and
behaviour of UI components
• A rendering model that defines how to render the components
in different ways
• One UI component may have several presentations
• Example: UICommand – button and hyperlink
• A server-side event-listener model that defines how to handle UI component
events
• A conversion model that defines how to plug in data converters onto a
component
• A validation model that defines how to register validators onto a component
 JSF UI Components

• Configurable, reusable elements that compose the user interfaces of JSF

applications
• UI components can be:
• Simple, like a button or text box
• Compound, like a table, which can be composed of multiple other components
• Accessible via JSF tags in JSP page
 UI Component Classes
• The JSF implementation provides a set of UI component classes
• Developers can extend the UI component classes to create custom UI components
• Third party component libraries are available: RichFaces, ICEfaces, etc.
• All JSF UI component classes extend UIComponentBase
• UIComponentBase defines the default state and behaviour of an UIComponent
• UI component classes specify all of the UI component functionality
• Retrieving values from input form (decoding)
• Holding component state
• Maintaining a reference to model objects
• Driving event-handling
• Rendering – creating markup (encoding)
• A JSF UI component is typically a collection of classes and resources:
• UIComponent Class – the core logic of the component, e.g. HtmlCommandLink
• Renderer Class, e.g. HtmlLinkRenderer
• UI Component Tag Class, e. g. HtmlCommandLinkTag
• Tag Library Descriptor File (*.tld), e.g. html-basic.tld
• Other classes: converters, validators, action listeners, etc.
 Component Rendering Model

• Usually the components do not specify how they are rendered

• Each component can have multiple renderers which render it to one or more
clients
• Render Kit – defines how components are rendered for a particular client
• The JSF implementation includes a standard HTML Render Kit for rendering
its components to an HTML client
 Commonly Used Tags – JSF Core Library
• <f:view> – root element for all JSF pages
• <f:converter> – creates an instance of the specified converter and binds it
to its parent component
• <f:validator> – creates an instance of the specified validator and binds it
to its parent component (UIInput component)
• <f:actionListener> – creates an instance of the action listener and binds
it to its parent component
• <f:param> – creates name-value pair for its parent component
• <f:loadBundle> – loads a specified bundle and stores it in the request scope
• <f:subview> – acts as a naming container so that the components inside it
can be made unique
• Use it to import another JSF page
 Commonly Used Tags – JSF HTML Library
• <h:form> – used as a container for elements which send data (HTML form)
• <h:inputText>, <h:inputSecret>, <h:inputHidden> – used to input text,
passwords and hidden values
• <h:outputText>, <h:outputLabel> – used to output text
• <h:commandButton>, <h:commandLink> – renders a button or hyperlink
• <h:graphicImage> – renders an image
• <h:dataTable> – creates HTML table
• <h:column> – used as child element of <h:dataTable>
• <h:selectBooleanCheckBox> – renders as checkbox
• <h:message> – renders the first FacesMessage assigned to the
component defined in the for attribute
• <h:selectManyCheckBox> - renders as list of checkboxes
• Elements stored in <f:selectItem> / <f:selectItems>