Taskflows are a very useful feature in Oracle ADF which provide a modular approach for defining control flow in an application. It allows to create application flow graphs which can be tied together to build the complete application. So instead of considering an application as a collection of different JSF pages, in ADF we would consider an application as a collection of different taskflows.

ADF Taskflows come in two forms:

• Bounded Taskflow
• Unbounded Taskflow

Unbounded Taskflow: A set of activities (JSF Pages/views), control flow rules, and managed beans that interact to allow a user to complete a task. An ADF unbounded task flow consists of all activities and control flows in an application that are not included within any bounded task flow.

• Building Rich Internet Applications with Oracle ADF Business Components & ADF Faces (Amazon.com)

Bounded Taskflow: A specialized form of task flow that, in contrast to an unbounded task flow, has a single entry point and zero or more exit points. It contains its own set of private control flow rules, activities, and managed beans.

A bounded taskflow:

• has single entry point.
• zero or more exit points.
• may accept input parameters.
• may generate return value.
• has its own memory scope called pageflow scope.

The memory scope of a bounded taskflow called pageflow scope allows the developer to declare java bean classes in that scope making it available/accessible across all the JSF pages within the taskflow.

In this article we will look at how to create ADF bounded taskflow using JDeveloper. I am using JDeveloper Studio Edition Version 11.1.2.1.0 for this article.

Creating a new ADF Web Application

:
From the Application Navigator click on New Application and you should see this popup:

Select Fusion Web Application(ADF) and click on Ok to get the next popup:

Enter the Application name as BoundedTaskFlowCreation and then click on Finish button to create a new application. Once you have created a new application you would get this view:

With this you have your new ADF application setup. You would see 2 projects: Model and ViewController (assuming you didn’t change the defaults apart from adding new application name while creating the new application). The Model project contains all the code which deals with ADF Data binding layer called- ADFBC and ViewController project contains all the view related code like the JSF pages, the java classes which act as managed beans for those JSF pages.

Creating a new bounded taskflow

Right click on the ViewController project and click on New:

In the new window select JSF/Facelets from the Web Tier categories in the right and then select ADF Taskflow from the right and click on Ok as shown below:

In the Create Taskflow window enter the File Name which would be the name of the bounded taskflow, let the Directory be default, check the Create as Bounded Taskflow check box and uncheck the Create with Page Fragments checkbox. After you have entered the details, your screen would be more or less like:

A bounded taskflow is represented by an XML config file which contains the views/pages part of the taskflow, the control flow structure i.e navigation from one page/view to another which can also include conditional flows, any java bean classes which are referenced by the views/pages within the taskflow which are called as Managed beans. And creating a bounded taskflow with pagefragements will not allow it to be launched independently and hence I am creating a bounded taskflow without page fragments. A bounded taskflow with page fragments would allow us to create only JSFF files i.e JSF fragment files.

Once you have clicked on Ok, you will be shown the Bounded Taskflow Diagrammatic view as shown below:

Generally lot of the work with taskflows can be easily done using the diagrammatic view. Most of us should be familiar with the GUI builders which are used for creating Swing applications or Flex applications. When we drag and drop components on the taksflow diagram, there is code generated in the XML which corresponds to the components added. You should be able to see the component palette on the right hand side and the Properties Inspector window at the bottom (the screenshot shown above shows the two windows). If you are not able to see these windows, you can always add them from the View menu.

In the component palette you can see a plethora of components which can be added to the taskflow. Search for View and then drag drop the View(ADF Task Flow.Components) on to the taskflow area. And then enter the name of the view as: firstPage. You should now see a view component in the taskflow as shown below:

Note that after adding the View component no JSF/JSP page has been created. To create a JSF page for that view double click on the view component to get the following popup:

You can select/choose from the Layouts or just select the Blank option to create a new JSF page. In the same way described above add another view: secondPage.

One can see a light green shade around firstPage component. This indicates that the default activity for the bounded taskflow is firstPage. One can change the default activity by selecting the bounded taskflow and changing the Default Activity property from the Property Inspector window.

Now I want to navigate from firstPage to secondPage drag and drop the Control Flow case by dragging from firstPage to secondPage and name that navigation as gotoSecond. The taskflow diagram would be as shown below:

And after all this lets have a look at the XML for the first-bounded-task-flow.xml:

<?xml version="1.0" encoding="windows-1252" ?>
<adfc-config xmlns="http://xmlns.oracle.com/adf/controller" version="1.2">
  <task-flow-definition id="first-bounded-task-flow">
    <default-activity>firstPage</default-activity>
    <view id="firstPage">
      <page>/firstPage.jsf</page>
    </view>
    <view id="secondPage">
      <page>/secondPage.jsf</page>
    </view>
    <control-flow-rule id="__1">
      <from-activity-id>firstPage</from-activity-id>
      <control-flow-case id="__2">
        <from-outcome>gotoSecond</from-outcome>
        <to-activity-id>secondPage</to-activity-id>
      </control-flow-case>
    </control-flow-rule>
  </task-flow-definition>
</adfc-config>

Now double click on firstPage view to get the firstPage.jsf and switch to the Source view. Now add the following code to the firstPage.jsf between the af:form tag:

<af:outputText value="This is first page" id="ot1"/>
<af:commandButton text="Goto Second Page" id="cb1" action="gotoSecond"/>

The above code shows- an output text to show some text and a button to navigate to the next page. The action attribute above is assigned the name of the control flowcase created above.

Now go back to the first-bounded-task-flow and double click on the secondPage view to get secondPage.jsf. In the secondPage.jsf add the following code between af:form tag:

<af:outputText value="This is second page" id="ot1"/>

Now you have a bounded taskflow and go to the bounded taskflow and right click and then click on Run for the application to be deployed. It will run an Integrated Web Logic server and deploy the application to it.

Once the application runs- you will get a page which shows:

Now clicking on the button would take you to the next page.

I have uploaded the project for anyone who wants to look into the project.

JSF Books:

• Java Server Faces in Action (Amazon.com)
• Mastering Java Server Faces (JSF)
• Core Java Server Faces (JSF) (Amazon.com)

If you are interested in receiving the future java articles and tips from us, please subscribe here.

If you have any doubts on ADF or Java Server faces (JSF), please post it in the comments section.

1

<f:loadBundle   var="msg"     basename="ApplicationResource"/>

1
2
3
4
5
6
7
8
9
10

<application>
    	<resource-bundle>
		<base-name>ApplicationResource</base-name>
    		<var>msg</var>
   	 </resource-bundle>
    	 <locale-config>
      		<default-locale>en_US</default-locale>
      		<supported-locale> ja_JP </supported-locale>
    	 </locale-config>
  </application>

1

<f:loadBundle basename="ApplicationResource" var="mapValue" />

1
2
3
4
5
6
7
8
9

# Resource bundle for English
username= Username
password= Password
 
 
# Resource bundle for Japanese
 
username= Shougou
password= aikotoba

1
2

username= \u610F\u5473
password= \u89E3\u6790

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Login JSP</title></head>
    <f:view>
<f:loadBundle basename="ApplicationResource" var="localeValue" />
    <body>
      <h:outputText value="#{localeValue.username}" /><h:inputText value=”#{login.username}” />
      <h:outputText value="#{localeValue.password}"/> <h:inputText value=”#{login.password}” />
</body></f:view>
</html>

1
2
3
4
5
6
7

<application>
        <locale-config>
               <default-locale>en</default-locale>
               <supported-locale>ja</supported-locale>
       </locale-config>
               <message-bundle>ApplicationResource</message-bundle>
         </application>

Conclusion:

In this article, I have explained the importance of Internationalization and Localization of web applications. Also I have discussed about making a JSF web application support for different locales with the help of code snippet.

• Spring Web Flow and JSF Sample Code

If you are not familiar with Java Server Faces, first read our list of articles on Java Server Faces (JSF) including Introduction to Java Server Faces by Raja. We have also listed some of the popular JSF Books in our Java Book Store.

Test application

In this section, we will see the basic artifacts necessary for integrating Spring Web flow with JSF by developing a simple application. Because the idea is to illustrate the integration between Spring Web Flow and JSF, the application does nothing other than displaying a simple JSF invoked from Spring Web Flow. In the later sections of the article, we will see how to use services that makes use of database.

Web application deployment descriptor

We will start with defining the deployment descriptor of the application which is given below. Note that the following code snippet contains declarations specific to Spring Web Flow as well as JSF.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
	version="2.4">
 
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>
			/WEB-INF/config/spring-fc-config.xml
		</param-value>
	</context-param>
 
	<context-param>
		<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
		<param-value>.xhtml</param-value>
	</context-param>
 
  	<context-param>
        <param-name>facelets.DEVELOPMENT</param-name>
   		<param-value>true</param-value>
  	</context-param>
 
  	<context-param>
  		<param-name>facelets.REFRESH_PERIOD</param-name>
  		<param-value>1</param-value>
  	</context-param>
 
    <filter>
        <filter-name>charEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
 
    <filter-mapping>
        <filter-name>charEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
 
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
 
	<servlet>
		<servlet-name>Resources Servlet</servlet-name>
		<servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>
		<load-on-startup>0</load-on-startup>
	</servlet>
 
	<servlet-mapping>
		<servlet-name>Resources Servlet</servlet-name>
		<url-pattern>/resources/*</url-pattern>
	</servlet-mapping>
 
	<servlet>
		<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value></param-value>
		</init-param>
		<load-on-startup>2</load-on-startup>
	</servlet>
 
	<servlet-mapping>
		<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
		<url-pattern>/spring/*</url-pattern>
	</servlet-mapping>
 
	<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>
 
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
	</welcome-file-list>
 
</web-app>

The mapping for all the faces requests are handled by the Faces Servlet and the context path containing ‘spring’ is handled by Spring’s Dispatcher Servlet. A listener is configured which will load the application context which is found in the path ‘/WEB-INF/config/spring-fc.xml’.

Spring’s Configuration file

The content of Spring’s configuration file is given below. Note that this file contains a mixture of definitions related to Spring Web Flow and Spring MVC although it is possible to segregate them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:webflow="http://www.springframework.org/schema/webflow-config"
       xmlns:faces="http://www.springframework.org/schema/faces"
       xsi:schemaLocation="
           http://www.springframework.org/schema/beans
           http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
           http://www.springframework.org/schema/webflow-config
           http://www.springframework.org/schema/webflow-config/spring-webflow-config-2.0.xsd
           http://www.springframework.org/schema/faces
           http://www.springframework.org/schema/faces/spring-faces-2.0.xsd
           http://www.springframework.org/schema/context
           http://www.springframework.org/schema/context/spring-context-2.5.xsd">
 
	<webflow:flow-executor id="flowExecutor">
	</webflow:flow-executor>
 
	<webflow:flow-registry id="flowRegistry" flow-builder-services="facesFlowBuilderServices">
		<webflow:flow-location path="/WEB-INF/flows/test.xml" />
	</webflow:flow-registry>
 
	<faces:flow-builder-services id="facesFlowBuilderServices" />
 
	<bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
		<property name="mappings">
			<value>
				/test=flowController
			</value>
		</property>
		<property name="defaultHandler">
			<bean class="org.springframework.web.servlet.mvc.UrlFilenameViewController" />
		</property>
	</bean>
 
	<bean id="flowController" class="org.springframework.webflow.mvc.servlet.FlowController">
		<property name="flowExecutor" ref="flowExecutor"/>
	</bean>
 
	<bean id="faceletsViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass" value="org.springframework.faces.mvc.JsfView"/>
		<property name="prefix" value="/WEB-INF/" />
		<property name="suffix" value=".xhtml" />
	</bean>
 
</beans>

We have defined the Spring Web Flow’s flow Controller that is responsible for creating the flow definitions by loading the flows from the file ‘/WEB-INF/flows/test.xml’. We have defined URL based mapping of requests by defining ‘SimpleUrlHandlerMapping’. Note that for JSf integration, the declaration of ‘faces:flow-builder-services’ is necessary.

Faces Configuration file

1
2
3
4
5
6
7
8
9
10
11

<?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>
	<application>
		<!-- Enables Facelets -->
		<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>  
	</application>
</faces-config>

In the above faces configuration file, we have explicitly instructed to make use of Faceets as the view technology instead of JSF. Also note that the managed beans declarations and the navigation rules will simply go off and won’t be required at all as part of the integration since it will be taken care by Spring Web Flow itself.

Welcome file

The welcome file mentioned in the Web application’s deployment descriptor is ‘index.htm’ whose contents is given below.

1
2
3
4
5

<html>
<head>
  <meta http-equiv="Refresh" content="0; URL=spring/start">
</head>
</html>

Note that it re-directs the control to the url mapping which will be handled by Spring’s dispatcher servlet.

Flow Definition file

The code snippet for the flow definition file is given below. Remember that the below definitions will be loaded by Spring Web Flow’s Flow Controller as we have configured a context listener in the web.xml file.

1
2
3
4
5
6
7
8
9

<?xml version="1.0" encoding="UTF-8"?>
<flow xmlns="http://www.springframework.org/schema/webflow"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.springframework.org/schema/webflow http://www.springframework.org/schema/webflow/spring-webflow-2.0.xsd">
 
	<view-state id="test">
	</view-state>
 
</flow>

There is only one state defined which is ‘test’. So, when the flow is invoked, the framework will look out for a file called ‘test.xhtml’ in the directory ‘/WEB-INF/flows’ as that is how we have configured the view resolver in the Spring’s application context file.

1
2
3
4
5

<bean id="faceletsViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<property name="viewClass" value="org.springframework.faces.mvc.JsfView"/>
		<property name="prefix" value="/WEB-INF/" />
		<property name="suffix" value=".xhtml" />
	</bean>

Sample Facelets file

The sample facelets file is given below. Note that it really does nothing other than displaying information message to the user. Also note that in the below file we are making use of templates and the name of the template file is ‘template.xhtml’.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <body>
 
        <ui:composition template="../template.xhtml">
 
            <ui:define name="heading">            
            </ui:define>
 
            <ui:define name="body">
                Sample page which illustrates the integration between JSF and Spring Web Flow
            </ui:define>
 
        </ui:composition>
 
    </body>
</html>

Starting Page

Note that this is the page that will be invoked at startup and from here the control resumes back to Spring Web flow for displaying the page ‘test.xhtml’.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
                xmlns:sf="http://www.springframework.org/tags/faces"
				template="template.xhtml">
 
    <ui:define name="heading">
    </ui:define>
 
    <ui:define name="body">
        <div align="left">
            <p align="left">
                <a href="test">Click here to invoke the Facelets page</a>
            </p>
        </div>
    </ui:define>
</ui:composition>

Running the application

When the application is invoked, the welcome.html is invoked which redirects the control with the url pattern ‘spring/start’ which will ultimately invoke the file start.xhtml. From here, when the user clicks the link, the url ‘test’ will be mapped to test.xhtml file present in the directory ‘/WEB-INF/flows’. Running the above application will result in something like the following.

Sample application

That’s it. We have run the first sample application that integrates Spring Web Flow and JSF.

JSF is a Web framework for developing Component oriented web applications in the User Interface layer. Amongst the various capabilities that JSF provides, one of the major strengths of JSF is that it is not tied to any specific target device. For example, currently most of the JSF applications are running in a web server and are accessible through a web browser. However, web browser is not the only target for a JSF application to be viewed; it can be even accessed through a hand-held device, for example through a mobile phone. In this example, we will see how to develop JSF applications targeted for mobile phones. This article assumes that the reader has a good understanding of JSF, its life-cycle and some understanding on JSF renderer kits.

Download Sample Code for JSF Application for J2ME Clients

• Download Sample Code for JSF Application for J2ME Clients

Renderer kits

The responsibility of displaying a view in a target device is done through renderer kits. Renderer kits in JSF are nicely abstracted so it is possible to write custom implementation of renderer kits. Sun’s implementation of JSF provides a reference implementation of a HTML renderer kit. The HTML renderer kit is responsible for displaying the view in a web browser. So while writing a renderer kit implementation amongst the various factors to be taken into consideration, the important things are the target device, the protocol, the markup language and the scripting language. For a HTML renderer kit implementation, these would be the Web browsers, HTTP, hyper text markup language and java script.

Similarly a render kit implementation would consider the mobile phone browser, Wireless application protocol, the Wireless markup language (WML) and WML Script for providing suitable support in the mobile or any WAP browser. Wireless application protocol is the standard defined for displaying contents on wireless devices such as mobile phones. Similar to HTML that targets Web browsers, WML is the markup language for mobile phones. Consider the sample WML script,

1
2
3
4
5
6
7
8

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
   "http://www.wapforum.org/DTD/wml_1.1.xml" >
<wml>
	<card id="test" title="Test card">
		<p>This is a test WML page.</p>
	</card>
</wml>

Usually WML document can be thought of as a collection of cards. Each user interaction will be modeled as a card and each card will be inter-dependant. The syntax will mostly look like HTML for displaying the UI elements and content in the WML browser.

WML script, similar to Java script, is the client side scripting language for WML. It is mainly used for dynamically validating user input and it generally will appear in a separate file. Consider the following example script,

1
2
3
4
5

extern function sayHello()
{
	WMLBrowser.setVar("message", "Hello World.");
	WMLBrowser.refresh();
}

The above script will appear in a separate file, say ‘hello.wmls’ and the following wml page will provide a reference to the above wml script.

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
   "http://www.wapforum.org/DTD/wml_1.1.xml" >
<wml>
	<card id="test" title="Test card">
		<p><a href="hello.wmls#sayHello()">Run</a><br/>
		$(message)
		</p>
	</card>
</wml>

Mobile Faces

Mobile Faces for JSF provides a framework for simplifying the development of JSF applications targeted for wireless devices. The framework comes packaged with an implementation of renderer kits for HTML, XHTML-MP and WML. Also it supports various commonly used scripting languages such as Java Script, WML Script and ECMA Script. For testing JSF faces developed through Mobile Faces framework, we will be using OpenWave Browser for WAP. It serves as an emulator for testing WAP applications. In this article, we will be showing how to develop applications using the Mobile Faces toolkit.

Setting up the development environment

Download the following components before proceeding to the next section.

• Open Wave
• Mobile Faces

OpenWave is used for testing the JSF application in the WAP Browser. Mobile Faces distribution has to be downloaded, jar file has to be built from the distribution’s ant file and the same has to be made available in the application’s class path.

This article will provide an introduction to the Facelets framework with the assumption that the readers have a basic understanding on Java Server Pages. With the Introduction of JSF, the idea is to make JSP as the view technology for JSF. However the architecture of JSF and JSP are completely different and there were integration issues with the combination of JSF and JSP. With this in mind, Facelets was introduced which is another view definition framework similar to JSP. However, the architecture of the Facelets was designed with the complex JSF architecture and life-cycle in mind so that the component trees construction of Facelets can nicely mingle with JSF. Also in comparision with JSF, facelets can provide extending re-use of content code through templates.

Download Example Code for Facelets

• Facelets Example Code

Hello World Application

In this section, we will look into a starter application that will display the text Hello in the browser. The application will make the view as Facelets instead. We will provide explanation with the various aspects while going through the snippet code in the relevant section.

JSP Page

In the example application, the web application deployment descriptor is configured to look up for the file hello.jsp. The following is the code listing for the file hello.jsp. The page does a forward to the file hello.jsf. The extension of the forward file is ‘.jsf’ and in the application’s deployment descriptor (which we will be seeing in the next section), we will see such requests forwarded to the Faces Servlet.

hello.jsp

1
2

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<jsp:forward page="hello.jsf"/>

Facelets Page

The code listing for the facelets page is given below. Once we can see that the following page has the extension .xhtml. Later on we will see how to map this extension to a Facelets page. Also within the page we have included the namespace uri ‘http://java.sun.com/jsf/facelets’ so that we can refer to Facelets related tags in the page.

Hello.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html">
	<body>
 
	<ui:composition template="/template.xhtml">
 
		<ui:define name="heading">
		Hello world application(Heading area)
		</ui:define>
 
		<ui:define name="body">
		Hello World1! (Body area)
		</ui:define>
 
	</ui:composition>
 
	</body>
</html>

In the above page, we have included the ui:composition and ui:define tags. The ui:composition along with the template attribute instructs that we want to use the page referenced in the attribute as the template page. The template page that we will look in the following section defines the section for the title content and the body content through ‘h1′ (heading) and ‘p’ (body) contents. The logical names given for the heading and the body content are ‘heading’ and ‘body’. Now back to the ‘hello.xhtml’, it is always possible to define or override the logical named sections in the template page. In our case, we have overridden the sections ‘heading’ and ‘body’ with some simple customized content through ui:define tags.

Template.xhtml

One could remember the usage of template.xhtml is the previous section, the content being giving in the following section. As discussed, this template page has provided named logical sections for the heading and the body area. It does this definition with the usage of ui:insert tags. Once this template page is defined, it is possible to override the named logical sections. For example, if the logical section ‘heading’ is not defined in the template-client page, i.e. the template page used by some client, in our case this file is hello.xhtml, then the content in the template.xhtml will be displayed.

template.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?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:ui="http://java.sun.com/jsf/facelets">
 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Facelets - Template Example</title>
		<link href="./css/default.css" rel="stylesheet" type="text/css" />
	</head>
 
	<body>
		<h1>
			<ui:insert name="heading">Default Heading area to be overriden</ui:insert>
		</h1>
		<p>
			<ui:insert name="body">Default body area to be overriden</ui:insert>
		</p>
	</body>
 
</html>

Web Application deployment Descriptor

The web application’s deployment descriptor file is given below. As you can see in the snippet code, the requests ending with ‘*.jsf’ are mapped to Faces Servlet. But till now we haven’t specified how Facelets is coming into the picture. We will see it shortly.

web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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_2_5.xsd">
	<context-param>
		<param-name>com.sun.faces.verifyObjects</param-name>
		<param-value>true</param-value>
	</context-param>
	<context-param>
		<param-name>com.sun.faces.validateXml</param-name>
		<param-value>true</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
		<param-value>.xhtml</param-value>
	</context-param>
	<context-param>
		<param-name>facelets.DEVELOPMENT</param-name>
		<param-value>true</param-value>
	</context-param>
	<context-param>
		<param-name>facelets.SKIP_COMMENTS</param-name>
		<param-value>true</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>*.jsf</url-pattern>
	</servlet-mapping>
 
	<session-config>
		<session-timeout>
		30
		</session-timeout>
	</session-config>
 
	<welcome-file-list>
		<welcome-file>hello.jsp</welcome-file>
	</welcome-file-list>
</web-app>

Also, there are various parameters defined with respect to the Faces Servlet. Significant parameters being the development mode (represented through facelets.DEVELOPMENT) which when set to true instructs the framework that the application is still in development and any errors during page requests will be displayed in the browser.

Sun-web.xml

The vendor specific application’s deployment descriptor is given below. It defines the context name of the application set to Facelets-Helo

sub-web.xml

1
2
3
4
5

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sun-web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Application Server 9.0 Servlet 2.5//EN" "http://www.sun.com/software/appserver/dtds/sun-web-app_2_5-0.dtd">
<sun-web-app error-url="">
	<context-root>/Facelets-Hello</context-root>
</sun-web-app>

Faces Configuration file

The view handler for JSF is implemented through ViewHandler. To ensure that our application is using the View definition framework of Facelets, all we have to do is to replace the JSF version of View Handler with the Facelets view which happens to be ‘com.sun.facelets.FaceletViewHandler’ in the configuration file.

faces-config.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version='1.0' encoding='UTF-8'?>
 
<faces-config version="1.2" 
	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">
 
	<application>
		<view-handler>
			com.sun.facelets.FaceletViewHandler
		</view-handler>    
	</application>
 
</faces-config>

Facelets – Hello Application.

If you are not familiar with Java Server Faces, first read our list of articles on Java Server Faces (JSF) including Introduction to Java Server Faces by Raja. We have also listed some of the popular JSF Books.

• JSF Interview Questions
• JSF books
• Building JSF application with Exadel IDE

JSFUnit Starter

In this section, we will see how to setup JSFUnit framework for testing JSF applications. We will also see how to write simple JSF test cases at the end of the section. The example is as simple as it will display a JSP page that will return static html content to the browser.

JSF Page

Given below is the code snippet of the JSF page. Note that for each component we have explicitly assigned identifiers through the id attribute. This is absolutely necessary because later on the test case access will try to get a reference to a JSF page component only through identifiers.

index.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<HTML>

	<f:view>
		<h1><h:outputText value="JSFUnit HelloJSF Demo Application" id="title"/></h1>
		<h:form id="startupForm">
		<h:outputText value="JSF application is running" id="test"/>
		</h:form>
	</f:view>

</HTML>

The above JSF page makes use of two outputText tags for displaying static content one being embedded within the form whereas the other didn’t.

Web Application Deployment Descriptor

In the below web application’s deployment description, apart from the regular entries related to JSF mapping, we have configured plenty of configurations related to JSFUnit suitable for performing testing on JSF pages.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>

	<filter>
		<filter-name>JSFUnitFilter</filter-name>
		<filter-class>org.jboss.jsfunit.framework.JSFUnitFilter</filter-class>
	</filter>

	<filter-mapping>
		<filter-name>JSFUnitFilter</filter-name>
		<servlet-name>ServletTestRunner</servlet-name>
	</filter-mapping>

	<filter-mapping>
		<filter-name>JSFUnitFilter</filter-name>
		<servlet-name>ServletRedirector</servlet-name>
	</filter-mapping>

	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
	</servlet>

	<servlet>
		<servlet-name>ServletRedirector</servlet-name>
		<servlet-class>org.jboss.jsfunit.framework.JSFUnitServletRedirector</servlet-class>
	</servlet>

	<servlet>
		<servlet-name>ServletTestRunner</servlet-name>
		<servlet-class>org.apache.cactus.server.runner.ServletTestRunner</servlet-class>
	</servlet>

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

	<servlet-mapping>
		<servlet-name>ServletRedirector</servlet-name>
		<url-pattern>/ServletRedirector</url-pattern>
	</servlet-mapping>

	<servlet-mapping>
		<servlet-name>ServletTestRunner</servlet-name>
		<url-pattern>/ServletTestRunner</url-pattern>
	</servlet-mapping>

	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
	</welcome-file-list>

</web-app>

JSFUnit framework provides a facility for running the unit test cases for JSF application directly from the browser. To make use of it, we have to define a JSFUnit Filter represented through org.jboss..JSFUnitFilter which is used to initiate the environment suitable for running test cases. The JSF Servlet Redirector represented through org.jboss..JSFUnitServletRedirector is used for invoking test cases for JSF as well as does the job of clean up. As the name suggests, the component org.apache.cactus..ServletTestRunner acts as a Servlet for starting a JUnit Runner within a web application.

Vendor Specific Web Deployment Descriptor

This example is targeted to be deployed in Glassfish and the below vendor specific configuration file is used to define the context root for the web application as ‘JSFUnit-Startup’.

sun-web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE sun-web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Application Server 9.0 Servlet 2.5//EN" "http://www.sun.com/software/appserver/dtds/sun-web-app_2_5-0.dtd">
<sun-web-app error-url="">

	<context-root>/JSFUnit-Startup</context-root>

</sun-web-app>

Faces Configuration

In this example application, there is no need to define managed beans or the navigation rules, so the faces configuration file will be empty.

faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

	<faces-config>

</faces-config>

JSF Test Case

In this example, we will see how to write simple test cases for the above JSF page that we have written. Note that the following compile-time and run-time jar files need to be present in the classpath.

• ant-1.5.4.jar
• aspectjrt-1.2.1.jar
• cactus-13-1.7.1.jar
• cactus-ant-13-1.7.1.jar
• cargo-0.5.jar
• commons-codec-1.3.jar
• commons-collections-3.2.jar
• commons-httpclient-3.1.jar
• commons-io-1.4.jar
• commons-lang-2.4.jar
• commons-logging-1.1.1.jar
• cssparser-0.9.5.jar
• htmlunit-2.4.jar
• htmlunit-core-js-2.4.jar
• jboss-jsfunit-core-1.0.0.GA-SNAPSHOT.jar
• junit-3.8.1.jar
• nekohtml-1.9.9.jar
• sac-1.3.jar
• xalan-2.7.0.jar
• xercesImpl-2.8.1.jar
• xml-apis-1.0.b2.jar

JSFUnitStartupTest.java

package net.javabeat.jsfunit.articles.startup;

import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlForm;
import javax.faces.component.html.HtmlOutputText;
import junit.framework.Test;
import junit.framework.TestSuite;
import org.apache.cactus.ServletTestCase;
import org.jboss.jsfunit.jsfsession.JSFClientSession;
import org.jboss.jsfunit.jsfsession.JSFServerSession;
import org.jboss.jsfunit.jsfsession.JSFSession;

public class JSFUnitStartupTest extends ServletTestCase{

	private JSFClientSession client;
	private JSFServerSession server;

	@Override
	public void setUp() throws IOException{
		JSFSession jsfSession = new JSFSession("/index.faces");
		client = jsfSession.getJSFClientSession();
		server = jsfSession.getJSFServerSession();
	}

	public static Test suite(){
		return new TestSuite( JSFUnitStartupTest.class );
	}

	public void testGetCurrentViewId() throws IOException{
		assertEquals("/index.jsp", server.getCurrentViewID());
	}

	public void testTitleComponent() throws IOException{

		UIComponent titleComponent = server.findComponent("title");
		assertNotNull(titleComponent);

		Object componentValue = server.getComponentValue("title");
		assertNotNull(componentValue);

		if (componentValue instanceof String){

		String strValue = (String)componentValue;
			assertEquals("JSFUnit HelloJSF Demo Application", strValue);
		}else{
			assertTrue("Value of title component is not an instance of String", false);
		}
	}

	public void testFormComponent() throws IOException{

		UIComponent formComponent = server.findComponent("startupForm");
		assertNotNull(formComponent);
		assertTrue(formComponent instanceof HtmlForm);

		UIComponent textComponent = server.findComponent("startupForm:test");
		assertNotNull(textComponent);
		assertTrue(textComponent instanceof HtmlOutputText);

		Object componentValue = server.getComponentValue("startupForm:test");
		assertNotNull(componentValue);

		if (componentValue instanceof String){
			String strValue = (String)componentValue;
			assertEquals("JSF application is running", strValue);
		}else{
			assertTrue("Value of test component is not an instance of String", false);
		}
	}
}

The very first thing to note is all the test case classes should extend org.apache.cactus.ServetTestCase so that the Servlet Runner can run the test case class within a web application. In the setup() method we have tried to establish a session to a JSF page through JSFSession API. Through this JSFSession, one can have a client side session as well as a server side session by calling the methods getJSFClientSession() and getJSFServerSession(). Note that the argument we have given is the “/index.faces” and we have configured the web application’s deployment descriptor to map this to “/index.jsp”.

The test method testGetCurrentViewId() is used to test the identifier of the current view. Note that even though we have established a session to “/index.faces”, the final view displayed will be “/index.jsp” and we have asserted whether the view identifier is correct. In the example JSF page, we have displayed two label components with the help of outputText tag, one within the form and one outside the form tag. The test method testTitleComponent() is used to test whether the component is rendered and if rendered making sure the text displayed in the component is correct. One can use the method findComponent() method to identify a component displayed in the page. If the framework is able to find the component it will return a valid UIComponent reference and the value for the component can be obtained by calling getComponentValue(). Note that the test method makes appropriate assertions before checking for the existence and the value rendered in the component.

For identifying components within a form, the identifier “formId:componentId” can be used. For example if the form id is “testFormId” and the id of a component displayed in a form is “testComponentId”, then for identifying this component “testFormId:testComponentId” should be passed to the method findComponent() for proper identification and the third test case method just does that.

Running the Application

In this section, we will see how to run the JSF application and also how to invoke the test cases that test the page integrity from the browser.

Running the JSF application is simple. Assuming that the application is running locally on the port number 8080 and with the given context root ‘JSFUnit-Startup’, then the URL “http://localhost:8080/JSFUnit-Startup/index.faces” can be used to access the JSF page.

For running the test-cases and to see the test results on the browser, we have to make use of Servlet Test Case runner. The Servlet Test Case Runner class expects the test case class name in the parameter ‘suite’ and the xs file name for formatting the test results in the parameter ‘xsl’. Note that the xsl file that is used for formatting the test results is included in the source code in the name ‘cactus-report.xsl’

The combined query string now becomes “ServletTestRunner?suite=net.javabeat.jsfunit.articles.startup.JSFUnitStartupTest&xsl=cactus-report.xsl”. This query string has to be appended with the application’s context root, in our case, the application’s context root is http://localhost:8080/JSFUnit-Startup. So the URL “http://localhost:8080/JSFUnit-Startup/ServletTestRunner?suite=net.javabeat.jsfunit.articles.startup.JSFUnitStartupTest&xsl=cactus-report.xsl” can be used to run the test cases and the results will get displayed in the browser. The following screen shot captures the test results,

Test results for the jsf unit startup application.

Exploring JSFUnit API

In this example we will try to explore the client side API that JSFUnit framework supports. For illustrating this, we will develop a traditional login application which prompts for the username and a password during application startup. If the username and the password combination is correct, the application redirects to a successful page and when the password is incorrect, an error page will be returned. To make things interesting, we will redirect to a different page if the username is invaid.

Login JSF Page

Below is the login JSF page. This page displays the input components for accepting the username and password through the inputText and the inputSecret tags. Note that to validate the user information, when the login button is clicked, the control is forwarded to User managed bean’s login method which will be discussed in the forth coming section. Note that we have explicitly specified the identifier to each of the components.

login.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<HTML>

<f:view>

	<h1><h:outputText value="Enter username and pasword" id="infoText"/></h1>

	<h:form id="startupForm">

		<h:outputText id = "usernameLabel" value = "Username" />
		<h:inputText id = "usernameText" value ="#{user.username}"/>

		<br/>
		<h:outputText id = "passwordLabel" value = "Password" />
		<h:inputSecret id = "passwordText" value ="#{user.password}"/>

		<br/><br/>
		<h:commandButton id = "loginButton" action = "#{user.login}" value = "Login"/>

	</h:form>

</f:view>

</HTML>

Welcome JSF Page

Given below is the welcome page that will be displayed to the user when the username and the password are correct.

welcome.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<f:loadBundle basename = "net.javabeat.articles.jsfunit.login.messages" var = "message"/>
<HTML>

<f:view>

	<h1><h:outputText value="Welcome #{user.username}." id="infoText"/></h1>

</f:view>

</HTML>

Invalid User JSF Page

Have a look at the following invalid user JSF page.

invalid-user.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<HTML>

<f:view>

	<h1><h:outputText value="Invalid user #{user.username}. Please try again." id="infoText"/></h1>

</f:view>

</HTML>

The above page will be displayed when the username is invalid. Note that for testing purpose, we have hard-coded the username as “admin”.

Error page

This page will be displayed when the password is incorrect for a valid username. For testing purposes, we have hard-coded the username and password to “admin” and “admin”.

error.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<HTML>

<f:view>

	<h1><h:outputText value="Invalid password for the username #{user.username}. Please try again." id="infoText"/></h1>

</f:view>

</HTML>

User Managed bean

The following class which represents the managed bean for the login application does two things. At first, it encapsulates the username and password properties. Secondly, the validation of username and password is done within the implementation of this class in the method login().

User.java

package net.javabeat.articles.jsfunit.login;

public class User {

	private String username;
	private String password;

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String login(){

		if (username.equals("admin")){
			if (password.equals("admin")){
				return "welcome";
			}else{
				return "invalid-password";
			}
		}else{
			return "error";
		}
	}
}

Note that as part of validation in the login() method, if the user specifies correct username and password, a return value “welcome” is returned. Later on we will see how this return value maps to the view welcome.jsp. Similarly for the incorrect username and incorrect password, the views returned are error.jsp and invalid-password.jsp

Faces Configuration

In the below faces configuration file, we have configured the class User as a managed bean and have given the scope as session. Note that the return value view mapping during login process is modeled as navigation rules and navigation cases.

faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>

	<managed-bean>
		<managed-bean-name>user</managed-bean-name>
		<managed-bean-class>net.javabeat.articles.jsfunit.login.User</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>

	<navigation-rule>
		<from-view-id>/login.jsp</from-view-id>
		<navigation-case>
			<from-outcome>welcome</from-outcome>
			<to-view-id>/welcome.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>

	<navigation-rule>
		<from-view-id>/login.jsp</from-view-id>
		<navigation-case>
			<from-outcome>error</from-outcome>
			<to-view-id>/error.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>

	<navigation-rule>
		<from-view-id>/login.jsp</from-view-id>
		<navigation-case>
			<from-outcome>invalid-password</from-outcome>
			<to-view-id>/invalid-password.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>

</faces-config>

JSF Test Cases

In the following test class, we will discuss three testing scenarios, one when the username and password given by the user is correct, the second being the scenario when the username is correct and the password is wrong, and finally for the username being incorrect. As part of the discussion we will also be seeing the usage of the class JSFClientSession.

LoginAppTest.java

package net.javabeat.articles.jsfunit.login;

import java.io.IOException;
import javax.faces.component.UIComponent;
import junit.framework.Test;
import junit.framework.TestSuite;
import org.apache.cactus.ServletTestCase;
import org.jboss.jsfunit.jsfsession.JSFClientSession;
import org.jboss.jsfunit.jsfsession.JSFServerSession;
import org.jboss.jsfunit.jsfsession.JSFSession;

public class LoginAppTest extends ServletTestCase{

	private JSFClientSession client;
	private JSFServerSession server;

	@Override
	public void setUp() throws IOException{
		JSFSession jsfSession = new JSFSession("/login.faces");
		client = jsfSession.getJSFClientSession();
		server = jsfSession.getJSFServerSession();
	}

	public static Test suite(){
		return new TestSuite( LoginAppTest.class );
	}

	public void testCorrectUsernameAndPassword() throws IOException{

		UIComponent buttonComponent = server.findComponent("loginButton");
		assertNotNull(buttonComponent);

		String username = "admin";

		client.setValue("usernameText", username);
		client.setValue("passwordText", "admin");

		client.click("loginButton");

		String pageText = client.getPageAsText();
		assertNotNull(pageText);

		assertTrue(pageText.contains("Welcome " + username + "."));
	}

	public void testCorrectUsernameAndIncorrectPassword() throws IOException{

		UIComponent buttonComponent = server.findComponent("loginButton");
		assertNotNull(buttonComponent);

		String username = "admin";

		client.setValue("usernameText", username);
		client.setValue("passwordText", "1234");

		client.click("loginButton");

		String pageText = client.getPageAsText();
		assertNotNull(pageText);

		assertTrue(pageText.contains("Invalid password for the username " + username + ". Please try again."));
	}

	public void testIncorrectUsername() throws IOException{

		UIComponent buttonComponent = server.findComponent("loginButton");
		assertNotNull(buttonComponent);

		String username = "admin123";

		client.setValue("usernameText", username);
		client.setValue("passwordText", "admin");

		client.click("loginButton");

		String pageText = client.getPageAsText();
		assertNotNull(pageText);

		assertTrue(pageText.contains("Invalid user " + username + ". Please try again."));
	}
}

As part of the regular process, the setup() method is overridden for acquiring a session to the application’s startup page – which is “/login.faces”. Now the application is displaying the login page and in the first test case, we have made of the JSFClientSession API for setting the username and password parameters by calling setValue(paramName, paramValue). Note that this will simulate as if the user is typing the values for the username and the password fields. Finally the request submission is simulated by calling the method click() defined on the JSFClientSession object. Note that argument passed to click() is the identifier for the button. As soon as the request is submitted and the response is received, the client can call the method getPageAsText() which will return a raw HTML page text. And finally the page content is validated for correctness by comparing it with the return value from getPageAsText() method. Similarly the second and the third test cases deals with incorrect username and incorrect password combination.

Running the application

The application can be invoked through the URL “http://localhost:8080/JSFUnit-Login/login.faces”. And for invoking the test cases, the URL “http://localhost:8080/JSFUnit-Login/ServletTestRunner?suite=net.javabeat.articles.jsfunit.login.LoginAppTest&xsl=cactus-report.xsl”. Given below is the screen shot of the test results for the login application,

Test results for the jsf unit login application.

Miscellaneous

In this miscellaneous section, we will further dig into the API support on JSFUnit framework.

Adding Request Listener

A Request Listener object can be used to intercept client request and customizations can be injected before and after the invocation of client request. For example, the following code adds a simple Request Listener,

public void testRequestListener(){

	WebClientSpec specification = new WebClientSpec("/login.faces");
	WebConnection webConnection = specification.getWebClient().getWebConnection();

	if (webConnection instanceof JSFUnitWebConnection){
		JSFUnitWebConnection jsfConnection = (JSFUnitWebConnection)webConnection;
		MyRequestListener listener = new MyRequestListener();
		jsfConnection.addListener(listener);
	}
}

class MyRequestListener implements RequestListener{

	public void beforeRequest(WebRequestSettings settings) {
		System.out.println("Before Request");
		throw new UnsupportedOperationException("Not supported yet.");
	}

	public void afterRequest(WebResponse settings) {
		System.out.println("After Request");
	}

}

Testing Faces Messages

An application can emit faces messages which can be warning, information or an error. JSFUnit framework provides support for iterating over the faces messages upon response completion for validating its contents. For example,

public void testGetFacesMessages(){

	Iterator iterator = server.getFacesMessages("someComponentId");
	while (iterator.hasNext()){

		FacesMessage facesMessage = iterator.next();
		// Validate the facesMessage object.
	}
}

Testing Managed Bean states

The state of managed beans will keep changing in an application’s workflow and the framework adds capabilities for testing the value of a managed bean’s state giving an EL expression. Consider the following code snippet the gets the state of username and password for the Managed bean User.

public void testManagedBeans(){

	String username = (String)server.getManagedBeanValue("${user.username}");
	assertEquals("admin", username);

	String password = (String)server.getManagedBeanValue("${user.password}");
	assertEquals("admin", password);
}

Dumping Client Ids

Sometimes, as part of debugging, it will be essential for dumping the client id information pertaining the current page.

public void testClientId(){

	ClientIDs clienIds = server.getClientIDs();
	clienIds.dumpAllIDs();
}

The method dumpAllIDs() will print all the Client IDs to the console.

Conclusion

This article provided step by step process in setting up the environment for facilitating testing for JSF applications. Detailed discussions were given with respect to configuring and running test cases within a web application. The article also focused on explaining the essential APIs like JSFSession, JSFServerSession, JSFClientSession. Finally the article provided the miscellaneous capabitiies like checking the state of managed beans, adding request listeners, testing faces messages etc.

• JSF Interview Questions
• JSF books
• Building JSF application with Exadel IDE

also read:

• Introduction to Java Server Faces
• Request Processing Lifecycle phases in JSF
• Accessing Web Services from JSF applications
• Navigation model in JSF

Problem Statement

In this article, a scenario of generating report on employee details is considered and has been explained with the corresponding code. The module will display the details of the particular employee chosen from a drop down list box. The application starts with a home page (Home.jsp) which has a hyperlink to the report page (EmloyeeHome.jsp). The EmployeeHome.jsp has a drop down with the employee numbers populated dynamically from the database through JPA. Upon selecting a particular employee number the details of the employee will be displayed in the same page.

Raising the application

Step1:

• Create a dynamic web application in a workspace in Eclipse
• For using JPA, add the required project facet.
• Right click on the project and select properties -> Project Facets. Select
  the checkbox for Java Persistence and click on the “further configuration
  available…”
• By clicking the link “further configuration available…” “JPA Facet”
  window will be displayed. Click on “OK” button and come to “Project
  Facet window”. Click on “OK” button in “Project Facet” window. This
  will complete the configuration required in Eclipse IDE

Step2:

• The classes12.jar, hibernate-entitymanager.jar, javaee.jar, jboss-faces.jar,
  jsf-api.jar, jsf-impl.jar, standard.jar, jstl.jar, toplink-essentials.jar,
  toplink-essentials-agen.jar archive files should be added on to the project
  to enable JPA and JSF framework in the application. Copy these jar files
  into the lib folder (Project -> WebContent -> WEB-INF -> lib)

Step3:

• Create a Home.jsp with a hyperlink to EmployeeHome.jsp
• Sample code (Home.jsp)

<%@ page language="java" contentType="text/html;
charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Home page</title>
</head>
  <body>
	<f:view>
		<h3>
		<center>
		<h:outputLabel>Welcome to the Home Page</h:outputLabel>
		</center>
		<h:outputLink value="EmployeeHome.jsp">Employee Details</h:outputLink>
        	</h3>
	</f:view>
</body>
</html>

Sample Screen Shot

Step4:

1. When the Employee Details hyperlink is clicked, Employee Home page is displayed.
2. Create EmployeeHome.jsp
3. Sample Code (EmployeeHome.jsp)

<%@ page language="java"
contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Employee Details</title>
</head>
<body>
	<f:view>
	<h3>
        	<center>Welcome to Employee Home Page</center>
	</h3>
	<br><br>
	<h:form>
	<h3>
		Select an Employee Number from the drop down:
	</h3>
	<br><br>
	<h:selectOneMenu id="selEmpNo"
		alueChangeListener="#{employee.employeeReport}"
		onchange="submit()">
		<f:selectItem itemLabel="select" />
	<f:selectItems value="#{employee.empNoList}" id="emp"/>
	</h:selectOneMenu>
	</h:form>
	<br><br>
	<h3>
	<h:outputText value="Employee Name: "></h:outputText>
	<h:outputText value="#{employee.empName}"/>
	<br><br>
	<h:outputText value="Employee Number: "/>
	<h:outputText value="#{employee.empNo}"/>
	<br><br>
	<h:outputText value="Name of the IBU: "/>
	<h:outputText value="#{employee.ibu}"/>
	<br><br>
	<h:outputText value="Designation: "/>
	<h:outputText value="#{employee.designation}"/>
</h3>
</f:view>
</body>
</html>

1. Sample Screen shot

Note: In EmployeeHome.jsp, <f:selectItems> is used to dynamically populate the
drop down with employee number from the corresponding managed bean. When a particular employee number is selected from the drop down, the corresponding employee details should be displayed. In order to implement this functionality,
implement ValueChangeEventListener in the corresponding managed bean and bound the UI component to it. The employeeReport(ValueChangeEvent event) of the EmployeeBean managed bean is the value change even listener in this
implementation. . Since value change event will not submit the request, some mechanism (E.g., JavaScript function) is required to submit the request after selecting the employee number from the drop down. (In EmployeeHome.jsp,
“submit() is assigned to “onChange” attribute of <h:selectOneMenu> tag. Hence no need to write any explicit java script function to submit the form.)

Step5:

• Create a package “employee” under the project
• Create a bean EmployeeBean which is a managed bean (the configuration of the managed bean is available in faces-congig.xml file which is given latter). The attributes of this bean is bound to various UI Components used in EmployeeHome.jsp
• Sample Code (EmployeeBean.java)

package employee;

	import java.util.ArrayList;
	import java.util.Iterator;
	import java.util.List;
	import javax.faces.event.ValueChangeEvent;
	import javax.faces.model.SelectItem;

	public class EmployeeBean {
		private String empName;
		private String ibu;
		private String designation;
		private int empNo;

		//This is used to dynamically populate the drop down with employee numbers
		List<SelectItem>empNoList;

		public EmployeeBean(){
			this.empNoList = new ArrayList<SelectItem>();
			/*Populating Employee Number in the drop down - Dynamic */
			List<EmployeeEntity>empList = new
				EmployeeService().getEmployeeList();
			Iterator<EmployeeEntity>iterator = empList.iterator();
			while(iterator.hasNext()){
				EmployeeEntity employee = iterator.next();
				SelectItem item = new SelectItem(employee.getEmpNo());
				empNoList.add(item);
			}
		}
		public String getEmpName() {
			return empName;
		}
		public void setEmpName(String empName) {
			this.empName = empName;
		}
		public String getIbu() {
			return ibu;
		}
		public void setIbu(String ibu) {
			this.ibu = ibu;
		}
		public String getDesignation() {
			return designation;
		}
		public void setDesignation(String designation) {
			this.designation = designation;
		}
		public int getEmpNo() {
			return empNo;
		}
		public void setEmpNo(int empNo) {
			this.empNo = empNo;
		}
		public List<SelectItem> getEmpNoList() {
			return empNoList;
		}
		public void setEmpNoList(List<SelectItem> empNoList) {
			this.empNoList = empNoList;
		}
		public List<EmployeeEntity> getEmpList() {
			return empList;
		}
		public void setEmpList(List<EmployeeEntity> empList) {
			this.empList = empList;
		}
		/*Eventlistener - for fetching an employee record based on the selection of employee
			number from the drop down*/
		public void employeeReport(ValueChangeEvent event){
			int empNo = Integer.parseInt((String)event.getNewValue());
			EmployeeEntity employee = new
				EmployeeService().getEmployee(empNo);
			this.empNo = employee.getEmpNo();
			this.empName = employee.getEmpName();
			this.ibu = employee.getIbu();
			this.designation = employee.getDesignation();
		}
	}

Note: After selecting the employee number from the drop down, to fetch the data from the table, a service class called “EmployeeService” (code is given later) is used which makes use of JPA to fetch the required record from the
table.

Step6:

1. Inside the package “employee”, create an entity class called “EmployeeEntity.java” which is mapped to an “employee” table
2. Sample Code (EmployeeEntity.java)

package employe;
	import javax.persistence.Entity;
	import javax.persistence.Id;
	import javax.persistence.Table;

	@Entity
	@Table(name="employee")
	public class EmployeeEntity {
		@Id
		private int empNo;
		private String empName;
		private String ibu;
		private String designation;
		public int getEmpNo() {
			return empNo;
		}
		public void setEmpNo(int empNo) {
			this.empNo = empNo;
		}
		public String getEmpName() {
			return empName;
		}
		public void setEmpName(String empName) {
			this.empName = empName;
		}
		public String getIbu() {
			return ibu;
		}
		public void setIbu(String ibu) {
			this.ibu = ibu;
		}
		public String getDesignation() {
			return designation;
		}
		public void setDesignation(String designation) {
			this.designation = designation;
		}
	}

Step7:

1. Inside the package “employee”, create a class called “EmployeeService.java”. This class will interact with the database to fetch the required details
2. Sample Code (EmployeeService.java)

package employee;
	import java.util.ArrayList;
	import java.util.List;
	import javax.persistence.EntityManager;
	import javax.persistence.EntityManagerFactory;
	import javax.persistence.EntityTransaction;
	import javax.persistence.Persistence;
	import javax.persistence.Query;

	public class EmployeeService {
		public List<EmployeeEntity> getEmployeeList(){
			List<EmployeeEntity> empList = new ArrayList<EmployeeEntity>();
			EntityManager em = null;
			try{
				EntityManagerFactory emf =
						Persistence.createEntityManagerFactory("Employee-
						Details");
				em = emf.createEntityManager();
				EntityTransaction et = em.getTransaction();
				et.begin();
				Query query = em.createQuery("select e from EmployeeEntitye");
				empList = query.getResultList();
			}
			catch(Exception e){
				//log the exception
			}
			return empList;
		}
		public EmployeeEntity getEmployee(int empNo){
			EmployeeEntity employee = new EmployeeEntity();
			EntityManager em = null;
			try{
				EntityManagerFactory emf =
					Persistence.createEntityManagerFactory("Employee-
					Details");
				em = emf.createEntityManager();
				EntityTransaction et = em.getTransaction();
				employee = em.find(myPackage.EmployeeEntity.class, empNo);
			}
			catch(Exception e){
				//log the exception
			}
			finally{
				if( em != null){
					em.clear();
				}
			}
			return employee;
		}
	}

Step8:

1. Create “persistence.xml” file and keep it inside META-INF folder
2. Sample Code (persistence.xml)

<?xml version="1.0" encoding="UTF-8"?>
	<persistence version="1.0" xmlns="http://java.sun.com/xml/ns/persistence"
		xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		xsi:schemaLocation="http://java.sun.com/xml/ns/persistence

http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">

		<persistence-unit name="Employee-Details">
			<provider>oracle.toplink.essentials.ejb.cmp3.EntityManagerFactoryProvider</provider>
			<class>.EmployeeEntity</class>
			<properties>
				<property name="toplink.jdbc.url" value="
					jdbc:oracle:thin:@localhost:1521:nr"/>
				<property name="toplink.jdbc.user" value="scott"/>
				<property name="toplink.jdbc.driver"
					value="oracle.jdbc.driver.OracleDriver"/>
				<property name="toplink.jdbc.password" value="tiger"/>
				<property name="toplink.ddl-generation" value="update-tables"/>
			</properties>
		</persistence-unit>
</persistence>

Note: Persistence.xml file is configured for Oracle database. You have to
configure according to the database which you want to use and give the
values accordingly.

Step9:

1. Create “faces-congig.xml” file which contains information about
   navigation rule and managed bean. Place the file inside WEB-INF
   folder
2. Sample Code (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">
		<navigation-rule>
			<from-view-id>/Home.jsp</from-view-id>
		</navigation-rule>
		<managed-bean>
			<managed-bean-name>employee</managed-bean-name>
			<managed-bean-class>employee.EmployeeBean
			</managed-bean-class>
			<managed-bean-scope>request</managed-bean-scope>
		</managed-bean>
	</faces-config>

Conclusion

This article demonstrates how to integrate JSF and JPA while developing a web application. Apart from this, the article also illustrates how to use drop down (dynamic) in a JSF enabled JSP and how to make use of value change event listener.

Acknowledgement

I would like to thank my manager Mr. Rajagopalan P, Principal, Education and Research Department, Infosys for the guidance and continuous support. I would like to thank Mr. Satheesha B N, Associate Vice-President, Education
and Research Department, Infosys for motivating me to write this article. I would like to thank Mrs. Yuvarani, Lead, Education and Research Department, Infosys for giving valuable suggestions.

• JSF Articles
• Accessing Web Services from JSF applications
• Introduction to Java Server Faces
• Introduction to JSF Core Tags Library
• Introduction to Java Server Faces(JSF) HTML Tags
• AJAX Support in Struts 2.0
• Using Converters in JSF
• Request Processing Lifecycle phases in JSF

What This Book Covers

Chapter 1, Using Standard and Custom Converters in JSF covers the standard and
custom converters in JSF. We start with implicit and explicit conversion examples, then
move on to creating and using custom converters, and we end up with client-side
converters using MyFaces Trinidad.

Chapter 2, Using Standard and Custom Validators in JSF continues with standard and
custom validators. We see how to use a standard validator, how to create and use custom
validators, and how to use RichFaces and Apache MyFaces validators. We also present
the new JSF 2.0 validators, such as f:validateRegex and
f:validateRequired.

Chapter 3, File Management discusses file management issues. You will see different
methods for downloading and uploading files, learn how to use JSF Core, RichFaces,
PrimeFaces, and Apache Tomahawk. In addition, you will see how to export data to PDF
and Excel, and how to extract data from an uploaded CSV file.

Chapter 4, Security covers some security issues. You will see how to use the JSF
Security project without JAAS Roles, use secured managed beans with JSF Security, and
use Acegi/Spring security in JSF applications.

Chapter 5, Custom Components discusses custom components in JSF. You will see how
to build different kinds of custom components in JSF 2.0, Archetypes for Maven, JSF and
Dojo and more.

Chapter 6, AJAX in JSF starts with the f:ajax tag, continues with Dynamic Faces,
RichFaces, ajax4jsf, and ends up with PrimeFaces and learning to write reusable AJAX
components.

Chapter 7, Internationalization and Localization covers internationalization and
localization. We will see how to load message resource bundles on JSF pages and how to
use locales and message resource bundles. We then move on to parameterized messages,
learning how to display Arabic, Chinese, Russian, and so on and how to select time zones
in JSF 2.0.

Chapter 8, JSF, Images, CSS, and JS discusses JSF with images, CSS, JS, and RSS. We
will integrate JS with JSF, pass values between JS and JSF, crop images, work with
dynamic images, work with pop-up windows, RSS support, and so on.

Chapter 9, JSF—Managing and Testing starts with Faces Console, and moves on to
JSFUnit and JMeter.

Chapter 10, Facelets covers Facelets recipes. You will see how to work with aliasing
components, templates, composition components, passing actions, and sub-elements to
composition components.

Chapter 11, JSF 2.0 Features presents some of the most relevant JSF 2.0 features, such
as annotations, exception handling mechanism, declarative event handling, URLs based
on specified navigation outcome, JSF view parameters, JSF 2.0, and navigation cases.

Chapter 12, Mixing JSF with Other Technologies discusses mixing JSF with other
important technologies, such as Spring, Seam, JSTL, Hibernate, and EJB (JPA).

Appendix, Configuring JSF-related Technologies talks about the issues when a JSFrelated
technology gets into the equation. You need to add some specific configuration,
you have to create a “bridge” between JSF and the technology used. This appendix
contains the configurations for a few technologies.

• Explore all the new features of JSF 2.0 that has numerous advantages over JSF 1.2
• Work with standard and custom JSF converters and validators
• Learn to upload and download with JSF, RichFaces and MyFaces
• Work with resources such as CSS, JavaScript and images
• Develop sophisticated applications using standard and custom components
• Explore AJAX in JSF and related frameworks
• Enhance your applications with internationalization and localization
• Exploit all of the security tasks in JSF and perform thorough testing of your applications
• Get to grips with JSFUnit, JMeter and JXIsight
• Integrate JSF with JSTL, Spring and Hibernate

JSF, Images, CSS, and JS

In this chapter, we will cover:

• Injecting CSS in JSF


• JSF, CSS, and tables


• JSF and dynamic CSS


• Integrating JavaScript and JSF


• Getting a JSF inputText value from JavaScript


• Working with JSF hidden fields from JavaScript


• Passing parameters from JS to JSF (client to server)


• Passing parameters from JSF to JS (server to client)


• Opening a pop-up window using JSF and JS


• Passing parameters with HTTP GET within the URL


• Communicating between parent pop-up windows


• Populating a JS load function with JSF values


• Dynamic images with PrimeFaces


• Cropping images with PrimeFaces


• Working with rss4jsf project


• Using resource handlers

Injecting CSS in JSF

In this recipe, you will see how to add CSS styles to JSF tags. It is a simple solution, but it has
the advantage that it can be applied to almost all JSF tags that render text, images, and so on.

Getting ready

We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0
classes were obtained from the NetBeans JSF 2.0 bundled library.

How to do it…

When you need a simple and classic solution to integrate CSS in JSF it is important to know
that JSF components support the styleClass and style attributes. The styleClass
attribute is used when you are working with CSS classes, while the style attribute allows you
to place CSS code directly in place between quotes.

You can see in the following code snippet how this works with the h:outputText component:

	<?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:ui=”http://java.sun.com/jsf/facelets”

		xmlns:h=”http://java.sun.com/jsf/html”

		xmlns:f=”http://java.sun.com/jsf/core”>

		<h:head>

			<title>JSF and CSS example</title>

			<style type=”text/css”>

				.message { text-align: left;

					letter-spacing:5px;

					color:#000099

				}

				.message-overline { text-decoration:overline;

				}

				.message-font { font-family:georgia,garamond,serif;

					font-size:20px;

					font-style:italic;

				}

			</style>

		</h:head>

		<h:body>

			<h:outputText styleClass=”message”

				value=”This text is CSS formated by ‘message’ class!”/>

			<br /><br />

			<h:outputText styleClass=”message message-overline”

				value=”This text is CSS formated by ‘message’ and

				‘message-overline’ classes!”/>

			<br /><br />

			<h:outputText styleClass=”message message-overline message-font”

				value=”This text is CSS formated by ‘message’,

				‘message-overline’ and ‘message-font’ classes!”/>

			<br /><br />

			<h:outputText style=”text-align: left;letter-spacing:5px;

				color:#000099″ value=”This text is CSS formated

				using the ‘style’ attribute instead of ‘message’ class!”/>

			<br /><br />

			<h:outputText style=”text-align: left;letter-spacing:5px;

				color:#000099;text-decoration:overline;”

				value=”This text is CSS formated using the

				‘style’ attribute instead of ‘message’

				and ‘message-overline’ classes!”/>

			<br /><br />

			<h:outputText style=”text-align: left;letter-spacing:5px;

				color:#000099;text-decoration:overline;

				font-family:georgia,garamond,serif;

				font-size:20px;font-style:italic;

				” value=”This text is CSS formated using the

				‘style’ attribute instead of ‘message’,

				‘message-overline’ and ‘message-font’ classes!”/>

			<br /><br />

		</h:body>

	</html>

Notice that when you need to specify more CSS classes under the same styleClass you
need to separate their names by space.

How it works…

As you can see the JSF – CSS construction looks similar to HTML – CSS usage. The interaction
between JSF – CSS imitates HTML – CSS interaction, but, as you will see in the next recipes,
JSF is more fl exible and supports more kinds of attributes for injecting CSS code in JSF pages.

See also

The code bundled with this book contains a complete example of this recipe. The project can
be opened with NetBeans 6.8 and it is named: Injecting_CSS_in_JSF.

JSF, CSS, and tables

There are two kinds of grids (tables) that are very often used in JSF, h:panelGrid and
h:dataTable. Both of them can be styled with CSS in detail using a set of dedicated
attributes. In this recipe you will see these attributes at work for h:panelGrid, but it
is very simple to extrapolate this to h:dataTable .

Getting ready

We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0
classes were obtained from the NetBeans JSF 2.0 bundled library.

How to do it…

Suppose that we have an h:panelGrid. We can “populate” it with CSS styles, using the
following set of attributes:

Knowing these attributes, we build a JSF page to show you how to use them in practice
(notice where we have placed the attributes):

	<?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:ui=”http://java.sun.com/jsf/facelets”

		xmlns:h=”http://java.sun.com/jsf/html”

		xmlns:f=”http://java.sun.com/jsf/core”>

		<h:head>

			<title>JSF and CSS example</title>

			<style type=”text/css”>

				.message { text-align: left;

					letter-spacing:5px;

					color:#000099

				}

				.message-font { font-family:georgia,garamond,serif;

					font-size:20px;

					font-style:italic;

				}

				.odd { background-color: blue }

				.even { background-color: red }

			</style>

		</h:head>

		<h:body>

			<h:form>

				<h:panelGrid columns=”3″ border=”1″ footerClass=”message”

					headerClass=”message-font” rowClasses=”odd, even”

					title=”PanelGrid and CSS”>

					<f:facet name=”header”>

						<h:outputText value=”Fill Names Below”/>

					</f:facet>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

					<h:inputText/>

						<f:facet name=”footer”>

							<h:outputText value=”The End”/>

						</f:facet>

				</h:panelGrid>

			</h:form>

		</h:body>

	</html>

How it works…

Since we have an attribute for each part of a grid, we can easily specify CSS styles to
customize the design of each of these parts. JSF will combine the specified CSS styles to
render a cool grid to the user.

There’s more…

The h:dataTable allows you to use the same CSS attributes for table header, footer,
and so on.

See also

The code bundled with this book contains a complete example of this recipe. The project can
be opened with NetBeans 6.8 and it is named: JSF_CSS_and_tables

JSF Articles

• JSF Articles
• Accessing Web Services from JSF applications
• Introduction to Java Server Faces
• Introduction to JSF Core Tags Library
• Introduction to Java Server Faces(JSF) HTML Tags
• AJAX Support in Struts 2.0
• Using Converters in JSF
• Request Processing Lifecycle phases in JSF