An Overview of JavaServer Faces (JSF)

JavaServer Faces (JSF) is new technology, still in its early specification stages. The brain behind Struts, Craig McClanahan, is specification co-lead for JavaServer Faces (JSR 127). You can get an early reference implementation of this technology from Sun's Web site at

http://java.sun.com/j2ee/javaserverfaces/

The JSF technology is targeted at simplifying the development of the user interface or View layer of an MVC application. JavaServer Faces technology includes a collection of APIs that represent various UI components and know how to handle events, perform user input validation, and carry out things such as the state, navigation, and internationalization. JSF also comes with a rich tag library that allows developers to leverage the JSF functionality from a JavaServer Page.

JSF provides a rich set of graphical user interface (GUI) components that use the concept of "renderers" that allow the GUI components to be rendered differently. A UI that is created using JSF runs on the server and renders backs to a target client, which could be a JSP or something else.

Figure 21.2 shows how a JavaServer Faces request works.

The easy-to-use JSF API promotes the creation of custom UI components as needed for your application. The tag libraries that come with JSF allow you to render the various GUI components in an HTML format.

JSF replaces several of the Struts tag libraries and provides a cleaner separation and handling of the UI-related tasks and objects. In Struts, you only have the ability to render UI components as HTML. In addition, Struts supports only the basic HTML form components. With JSF, you can design and use a much richer set of UI components and use them uniformly, whether you have a JSP-based client or some other client. You can very easily modify your Struts-based JavaServer Pages to leverage JSF, without any change to the action classes and the rest of the Struts infrastructure.

JSF Life Cycle

Before you look at an example, it is important to understand the life cycle of a JSP request. JSF also has the concept of a single servlet that handles all faces requests. A faces request is one that has some faces components. This request is initiated through the submission of a JSF form or a link to an URL with the /faces prefix. The FacesServlet handles all faces requests. A faces request can return a faces or a non-faces response.

There are six phases in the JSF life cycle:

In the JavaServer Faces Reference Implementation (JSF-RI), each of these phases is supported by a class with the same name. Figure 21.3 shows the JSF life cycle. The dotted lines show alternate flows through the cycle. We will discuss each phase in detail.

Reconstitute Request Tree

The "reconstitute request tree" phase is initiated when a user clicks a link or a button that has some faces components. During this phase, the JSF needs to do the following:

Apply Request Values

In the "apply request values" phase, each bean updates its value based on the information in the request. Any errors are put into the FacesContext. Events that might occur are sent to the appropriate listeners.

Process Validations

In the "process validations" phase, all validations are executed. Validators perform validations against all the attributes and add any error messages to the FacesContext. If there are error messages, you should jump directly to the "render response" phase.

Update Model Values

At this point, you know you have valid values. Now components having valueRef expressions are updated. This is quite similar to the "apply request values" phase.

Invoke Application

All application level events are handled during this phase. JSF executes the action specified in the actionRef tags.

Render Response

During this phase, JSF renders the component tree saved in the FacesContext, and this can be in a format such as HTML. This is also cached to improve performance.

JSF UI Components

JSF makes it very easy to create custom UI components. However, out of the box, it has support for the following standard components:

• UICommand— Very similar to an HTML button

• UIForm— Similar to the HTML form tag

• UIGraphic— Similar to the img tag in HTML

• UIInput— Used for user input

• UIOutput— Maps to the output of the table

• UIPanel— Works like the HTML table tag

• UIParameter— Used for parameter passing

• UISelectItem— Maps to a list of items, where you can select one item

• UISelectItems— Maps to a list of items, where you can select multiple items

• UISelectBoolean— Works like a checkbox, to select or deselect

• UISelectMany— Support the selection of multiple items

• UISelectOne— Allows you to select only one item

A Sample JSF Application

Let's modify the sample Struts application to use JavaServer Faces. As we said earlier, you can modify just the JSP and leave the rest of the application almost as is.

Listing 21.6 shows the login JSP that uses JavaServer Faces.

Listing 21.6 Code for loginPageUsingJSF.jsp

<%@ page contentType="text/html; charset=UTF8" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>

<f:use_faces>
 <h:form id="loginForm" formName="loginForm" >

   <h:input_text id="username" valueRef="User.username">
      <f:validate_required/>
   <h:input_text/>

   <h:input_text id="password" valueRef="User.password">
      <f:validate_required/>
   <h:input_text/>

   <h:command_button id="submit" action="success"
     label="Login" commandName="submit" >
       <f:action_listener
         type="jspBook.LoginFormActionListener"/>
   </h:command_button>

  <h:command_button id="reset" action="reset" label="Reset"
     commandName="reset" />
   <h:output_errors/>

 </h:form>
</f:use_faces>
</body>
</html>

You will need a faces-config.xml file, quite similar to the struts-config.xml file that we discussed earlier. Listing 21.7 shows this file.

Listing 21.7 shows the faces-config.xml configuration file.

Listing 21.7 Code for 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-tree-id>/loginPageUsingJSF.jsp</from-tree-id>
        <navigation-case>
          <from-outcome>success</from-outcome>
          <to-tree-id>/mainMenuUsingJSF.jsp</to-tree-id>
        </navigation-case>
    </navigation-rule>

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

</faces-config>

You will need to modify your struts-config.xml file to leverage JSF. Listing 21.8 shows that change.

Listing 21.8 Modified struts-config.xml

<form-bean  name="User"
               type="jspBook.User "/>
<action-mappings>
<action path="/Login"
    type="LoginUserAction"
    name="LoginUserForm"
    scope="request"
    input="/faces/loginPageUsingJSF.jsp">
    <forward name="success" path="/faces/mainMenuUsingJSF.jsp"/>
 </action>
</action-mappings>

To enable faces, you will need to modify your web.xml file. This is shown in Listing 21.9.

Listing 21.9 Modified web.xml

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

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