Tuesday, August 17, 2010

Java Server Faces (JSF) Introduction

JSF stands for Java Server faces. JSF is a component based web development framework and is part of the standard. JSF is an attempt to provide developers to think about web applications in a more swing like way than Request response processing way.

Let's make a simple application to first understand the nuts and bolts of JSF. Make a web application in your Ide. If you are in eclipse than make a dynamic web project. Many ide's now support JSF and they make some of the artifacts by default. We will assume that we will just work with a standard web application to understand the things better.

Let's make a simple application which keeps the details of your favourite actor.

First of all change the web.xml so that we hook the Faces framework.
web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xmlns="http://java.sun.com/xml/ns/javaee"
     xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
         http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
             id="WebApp_ID" version="2.5">
    <display-name>JSFBasic</display-name>
    <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>
</web-app>

The Faces servlet is the enty point for any JSF based request.
Now let's write a faces configuration file which is named as faces-config.xml and place it with web.xml.

faces-config.xml:

<?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">
</faces-config>

This file at the moment just contains basic structure. We will fill the details soon.
Now let's write our first page which is actor.jsp. The page will look like any normal jsp page with tags.
actor.jsp: (Put in jsp folder inside web context).

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head><title>Simple JSF application</title></head>
<body>
<f:view>
  <h:form>
    <table><tr>
      <td>Name:</td>
      <td>
       <h:inputText id="name" value="#{actorBean.name}“ required="true" /> </td></tr>
      <tr>
      <td> <h:commandButton value="Save" action="save" /> </td>
    </tr></table>
  </h:form>
</f:view>
</body>
</html>

Notice the colored text. These are the JSF components. Let's write the page where we will navigate to on clicking the submit button:
confirm.jsp: (Put in jsp folder inside web context).

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
    <head><title>Simple JSF application</title></head>
    <body>
        <f:view>
             <h:outputText value="The actor name is #{actorBean.name}"/>
        </f:view>
   </body>
</html>

Once the JSF pages are in place, let's write a class which will hold the properties of the pages.
ActorBean.java:

public class ActorBean {
    protected String name;
//Getters and Setters

Now register the bean in the faces-config.xml and also register the navigation

<?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>actorBean</managed-bean-name>
<managed-bean-class>com.oyejava.jsf.ActorBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

<navigation-rule>
    <from-view-id>/jsp/actor.jsp</from-view-id>
    <navigation-case>
        <from-outcome>save</from-outcome>
        <to-view-id>/jsp/confirm.jsp</to-view-id>
    </navigation-case>
</navigation-rule>
</faces-config>

Deploy the application and hit the server at http://<server>/<context>/faces/jsp/actor.jsp.
Note that we have appended /faces in front of jsp. This comes from web.xml where we have mapped faces servlet against url pattern of /faces/*

The implementation of JSF under the hood is a request response processing model. However for application developer the paradigm has been shifted one level above. Here if you notice than in actor.jsp you bind the name to the actor bean name property. So when the save button is clicked than the property fill in the input box is populated by the framework on the actor bean object.

JSF Request Processing Lifecycle

No comments:

Post a Comment