JavaServer Faces (JSF)

Like Swing and AWT, JSF is a development framework that provides a set of standard, reusable GUI components.

JavaServer Faces technology provides an easy and user-friendly process for creating web applications.

JSF provides a component model, page templating, Ajax support, client device independence, and world-class IDE integration from every available Java IDE.

JSF is a Java EE standard web framework that hides complexity to maximize developer productivity.

Java Server Faces and Facelets pages are appropriate for generating text-based markup, such as XHTML, and are generally used for presentation–oriented web applications.

JavaServer Faces technology consists of the following:

• An API for representing components and managing their state; handling events, server-side validation, and data conversion; defining page navigation; supporting internationalization and accessibility; and providing extensibility for all these features
• Tag libraries for adding components to web pages and for connecting components to server-side objects

• Built in templating with Facelets
• Full support for Ajax, as easy as adding one tag
• Easy component creation, as easy as building a Facelets page
• OO component model maximizes maintainability
• Great support for building internationalized and accessible applications
• Highly secure, with built in protection from cross site scripting, CSRF, and other kinds of attacks

You can complete the following tasks.

• Create a web page.
• Drop components onto a web page by adding component tags.
• Bind components on a page to server-side data.
• Wire component-generated events to server-side application code.
• Save and restore application state beyond the life of server requests.
• Reuse and extend components through customization.

• Event-driven development (via listeners as in traditional GUI development)
• Pages that represent Model-View-Controller (MVC)-style views
• An event-publishing model
• A lightweight inversion-of-control (IoC) container
• Components for just about every other common GUI feature, including (but not limited to):
  • Pluggable rendering
  • Server-side validation
  • Data conversion
  • Page-navigation management

The user interface of a JSF application consists of JavaServer Pages (JSP) pages. Each JSP page contains JSF components that represent the GUI functionality. You use JSF custom tag libraries inside JSP pages

• to render the UI components,
• to register event handlers,
• to associate components with validators,
• to associate components with data converters,
• and more.

The JSF tags reference components in order to be displayed.

The components have a different life cycle from the JSP page. The tag looks up the component in its current state. If the component already exists, the custom tag doesn't modify its state. The component model allows your controller code to change a component's state (for example, disable a text field), and when that view is displayed, the current state of your component tree is displayed.

JavaServer Faces technology APIs are layered directly on top of the Servlet API.

JSP technology is considered to be a deprecated presentation technology for JavaServer Faces.

In the Model 2 architecture (a watered-down version of MVC for Web applications), the controller is represented by servlets (or Actions), and display is delegated to JSP pages. JSF makes it easier to move presentation and business logic out of the controller and move business logic out of your JSP pages.

In JSF's MVC implementation, mapping managed beans mediate between view and model. Normally, you delegate the business logic to the application model but simply, you can have two category of Managed beans:

• controllers which are Managed bean tied to JSF. They keeps the JSF peanut butter out of the POJO chocolate (the model object).
• model objects which are Managed beans not tied to JSF.

The controller class is JSF aware whereas the model class is not.

Unlike JSP technology, JSF's view implementation is a stateful component model. The JSF view is composed of two pieces:

• the view root. The view root is a collection of UI components that maintain the UI's state.
• and JSP pages.

Like Swing and AWT, JSF components use the Composite design pattern to manage a tree of components (a container contains components; a container is a component).

The functionality provided by a JavaServer Faces application is similar to that of any other Java web application.

A JSF 2.0 application that implements CRUD functionality typically contains the following artifacts.

• JPA entity beans: entity classes generated from a persistence provider, which correspond to data maintained in the data source
• stateless EJB session beans DAO: for creation, retrieval, modification and removal of entity instances. EJBs contain the business logic for the application, and interface the JSF managed beans with the entity beans.
• JSF session-scoped, managed beans: controller classes that are coupled with Facelets pages to handle requests. They generally contain code to invoke methods in the EJB session beans.
• Facelets pages: define views that are used to display data and enable users to input data.

A typical JavaServer Faces application includes the following parts:

• managed beans. JavaBeans for managing application state and behavior
• A set of web pages in which components are laid out
• A set of tags to add components to the web page
• A web deployment descriptor (web.xml file)
• Optionally, one or more application configuration resource files, such as a faces-config.xml file, which can be used to define page navigation rules and configure beans and other custom objects, such as custom components
• Optionally, a set of custom objects, which can include custom components, validators, converters, or listeners
• A set of custom tags for representing custom objects on the page

A web page, myfacelet.xhtml, is built using JavaServer Faces component tags. Component tags are used to add components to the view, which is the server-side representation of the page.

In addition to components, the web page can also reference objects, such as the following:

• The JavaBeans components that capture the data and process the application-specific functionality of the components
• Any event listeners, validators, and converters that are registered on the components

On request from the client, the view is rendered as a response. Rendering is the process whereby, based on the server-side view, the web container generates output, such as HTML or XHTML, that can be read by the client, such as a browser.

In response to a client request, a web page is rendered by the web container that implements JavaServer Faces technology.

The web page, myfacelet.xhtml, is built using JavaServer Faces component tags. Component tags are used to add components to the view (represented by myUI in the diagram), which is the server-side representation of the page.

In addition to components, the web page can also reference objects, such as the following:

• Any event listeners, validators, and converters that are registered on the components
• The JavaBeans components that capture the data and process the application-specific functionality of the components

On request from the client, the view is rendered as a response.

The process of creating web pages for a JavaServer Faces application includes adding components to the page and wiring them to managed beans, validators, listeners, converters, and other server-side objects that are associated with the page.

Developing a simple JavaServer Faces application typically requires the following tasks:

• Developing managed beans
• Creating web pages using component tags
• Defining page navigation
• Mapping the FacesServlet instance
• Adding managed bean declarations

In a typical JavaServer Faces application, each page of the application connects to a managed beans. The managed bean defines the methods and properties that are associated with the components.

package hello;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class Hello {

    final String world = "Hello World!";

    public String getworld() {
        return world;
    }
}

The @ManagedBean annotation registers the managed bean as a resource for JSF.

In JavaServer Faces (JSF) 2.0, facelets is the default view declaration language (VDL) instead of JavaServer Pages (JSP).

To create a page or view, you add components to the pages, wire the components to managed bean values and properties, and register converters, validators, or listeners on the components.

A typical JavaServer Faces Facelets is created in XHTML and includes the following elements:

• A set of namespace declarations that declare the JavaServer Faces tag libraries
• Optionally, the HTML head (h:head) and body (h:body) tags
• Optionally, a form tag (h:form) that represents the user input components

The example below, beanhello.xhtml, is a simple XHTML page.

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelets Hello World</title>
    </h:head>
    <h:body>
        #{hello.world}
    </h:body>
</html>

where the first section of the web page declares the content type for the page, which is XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To add the JavaServer Faces components to your web page, you need to provide the page access to the two standard tag libraries: the JavaServer Faces HTML render kit tag library and the JavaServer Faces core tag library. The next section specifies the language of the XHTML page, then declares the XML namespace for the tag libraries that are used in the web page:

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

The XML namespace URI (xmlns) identifies the tag library location, and the prefix value is used to distinguish the tags belonging to that specific tag library.

The web page connects to the managed beans through the Expression Language (EL) value expression #{hello.world}, which retrieves the value of the world property from the managed bean Hello.

Tags:

• The <f:view> tag informs the container that you're using JSF to manage the components inside it.
• The <h:form> tag tells JSF that you want an HTML form.
• With the HTML tag (spans, divs, tables), the page can be layed out.

Configuring a JavaServer Faces application involves:

• mapping the Faces Servlet in the web deployment descriptor file, such as a web.xml file,
• and adding managed bean declarations, navigation rules, and resource bundle declarations to the application configuration resource file, faces-config.xml.

To use the Faces Servlet, you first need to:

• declare it
• and to map it

in your web.xml file.

<servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
</servlet>

The control is given to the JSF servlet to handle requests instead of specifying your own servlet. All requests to JSP files that use an <f:view> tag must go through this servlet.

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

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

The Faces Servlet container must send all requests that:

• start with /faces/
• end with *.jsf
• use an <f:view> tag

to the Faces Servlet for processing.

This is similar to most web.xml descriptors, except that you're giving control to the JSF servlet to handle requests instead of specifying your own servlet. must go through this servlet.

A typical mapping of FacesServlet is as follows:

<?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">
	<context-param>
		<param-name>javax.faces.PROJECT_STAGE</param-name>
		<param-value>Development</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>
	<session-config>
		<session-timeout>30</session-timeout>
	</session-config>
	<welcome-file-list>
		<welcome-file>faces/myWelcomePage.xhtml</welcome-file>
	</welcome-file-list>
</web-app>  

where:

• the context parameter PROJECT_STAGE identifies the status of a JavaServer Faces application in the software lifecycle. The stage of an application can affect the behavior of the application. For example, if the project stage is defined as Development, debugging information is automatically generated for the user. If not defined by the user, the default project stage is Production.

<wrap tips>Mapping the FacesServlet is automatically done for you if you are using an IDE such as Eclipse (OEPE), Jdeveloper, NetBeans.</note>

Specify the faces-config.xml file in the web.xml file and Declare the bean in the faces-config.xml file.

The default faces-config.xml is the one which is in the Web application's WEB-INF directory.

In faces-config.xml, the <managed-bean> element is used to declare a bean that JSF can bind to.

<?xml version="1.0" encoding="UTF-8"?>
<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">
  <managed-bean>
    <managed-bean-name>myModelBeanName</managed-bean-name>
    <managed-bean-class>com.gerardnico.myapplication.model.MyModelBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
    <managed-bean>
    <managed-bean-name>myControllerBeanName</managed-bean-name>
    <managed-bean-class>com.gerardnico.myapplication.controller.MyControllerBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
</faces-config>

where:

• The <managed-bean-name> tag defines a unique name
• The <managed-bean-class> define the class. The class must have a no-argument constructor.
• The <managed-bean-scope> specifies the scope of the bean. The Scope:
  • request: means to maintain the state for the time of a request
  • session: means to maintain the state for the time of a session (between page views)
  • none: means that the bean will be created but not put into a scope.

• Creating a Simple JavaServer Faces Application
• JavaServer Faces project web site
• Getting started with JavaServer Faces 1.2, Part 1: Building basic applications - Richard Hightower
• Jsf2.0 Specification
• Java EE 6: JSR 314: JavaServer Faces 2.0 specification
• Java EE 5: JSR 252: JavaServer Faces 1.2