Ajax is a method of employing JavaScript, DHTML, and the XMLHttp behaviour in the browser to provide truly dynamic content on a Web page without a page refresh. There are quantifiable benefits to be realized for end users and businesses, which include improved usability and faster applications. In this tutorial I will look at a simple example using Ajax4JSF with JSF, Facelets, Maven2 and Eclipse.

1. 1
The author has made every effort in the preparation of this book to ensure the accuracy of the information.
However, information in this book is sold without warranty either expressed or implied. The author will not be
held liable for any damages caused or alleged to be caused either directly or indirectly by this book.
Ajax, JSF, Facelets, Eclipse & Maven
tutorials
Ajax is a method of employing JavaScript, DHTML, and the XMLHttp behaviour in the
browser to provide truly dynamic content on a Web page without a page refresh. There are
quantifiable benefits to be realized for end users and businesses, which include improved
usability and faster applications. In this tutorial I will look at a simple example using Ajax4JSF
with JSF, Facelets, Maven2 and Eclipse.
By
K. Arulkumaran
&
A. Sivayini
Website: http://www.lulu.com/java-success
Feedback email: java-interview@hotmail.com

2. 2
Table Of Contents
Notations ..................................................................................................................... 3
Tutorial 15 – Ajax4jsf with JSF & Facelets......................................................... 4

3. 3
Notations
Command prompt:
Eclipse:
File Explorer or Windows Explorer:
Internet Explorer:

4. 4
Tutorial 15 – Ajax4jsf with JSF & Facelets
This tutorial will guide you through building a simple Ajax based Web
application. This tutorial assumes that you have gone through Tutorials 1-10
& the source code for tutorials 1-10. Also refer to Ajax4jsf developer guide at
https://ajax4jsf.dev.java.net/nonav/documentation/ajax-
documentation/developerGuide.html ) for further information.
Step 1: This tutorial will extend simpleWeb project we created earlier in Tutorials 1-10. We
will Ajax enable this Web application. We will be using Ajax4jsf (check
https://ajax4jsf.dev.java.net/ & http://labs.jboss.com/jbossajax4jsf/). Firstly add the Ajax4jsf
depedendency jar into pom.xml.
<!-- AJAX -->
<dependency>
<groupId>net.java.dev.ajax4jsf</groupId>
<artifactId>ajax4jsf</artifactId>
<version>1.0.6</version>
</dependency>
The complete pom.xml file should look like:
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-
v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>com.mytutorial</groupId>
<artifactId>simple-tutorial</artifactId>
<version>1.0</version>
</parent>
<groupId>com.mytutorial</groupId>
<artifactId>simpleWeb</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>simpleWeb Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>com.mytutorial</groupId>
<artifactId>simple</artifactId>

5. 5
<version>1.0-SNAPSHOT</version>
<type>jar</type>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>commons-digester</groupId>
<artifactId>commons-digester</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring</artifactId>
<version>2.0.6</version>
</dependency>
<!-- JSF/JSTL/Facelets -->
<dependency>
<groupId>javax.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>javax.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>1.2_04</version>
</dependency>
<dependency>
<groupId>com.sun.facelets</groupId>
<artifactId>jsf-facelets</artifactId>
<version>1.1.11</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.1.2</version>
</dependency>
<dependency>
<groupId>javax.el</groupId>
<artifactId>el-api</artifactId>
<version>1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.sun.el</groupId>
<artifactId>el-ri</artifactId>
<version>1.0</version>
</dependency>
<!-- AJAX -->
<dependency>
<groupId>net.java.dev.ajax4jsf</groupId>
<artifactId>ajax4jsf</artifactId>
<version>1.0.6</version>
</dependency>

6. 6
</dependencies>
<build>
<finalName>simpleWeb</finalName>
<pluginManagement />
</build>
</project>
Step 2: Now, you need to go back to the command prompt and run the following command to add the
ajax4jsf jar to your build path.
C:tutorialssimple-tutorialsimpleWeb>mvn eclipse:clean eclipse:eclipse
STEP: WorkAround
The JSF 1.2 requires eclipse web facet 2.5. You need to open the file
“org.eclipse.wst.common.project.facet.core.xml” under C:tutorialssimple-
tutorialsimpleWeb.settings as shown below from version=2.4 to version=2.5. Every time you use
the eclipse:clean command, you will have to manually fix this up as shown below.
Step 3: Refresh the “simpleWeb” project.

7. 7
Step 4: Following changes are required in the deployment descriptor files web.xml & faces-
config.xml as shown below:
faces-config.xml
Comment out the following line:
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
web.xml
Following need to be added:
<!-- ajax4jsf -->
<context-param>
<param-name>org.ajax4jsf.SKIN</param-name>
<param-value>classic</param-value>
</context-param>
<context-param>
<param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
<param-value>com.sun.facelets.FaceletViewHandler</param-value>
</context-param>
<!-- ajax4jsf -->
<filter>
<filter-name>ajax4jsf</filter-name>
<display-name>Ajax4jsf Filter</display-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>

8. 8
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
The complete web.xml should look like:
<!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>
<!-- JSF -->
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.jspx</param-value>
</context-param>
<!-- Spring -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
<![CDATA[
/WEB-INF/applicationContext.xml
classpath:applicationContext-mytutorial.xml
]]>
</param-value>
</context-param>
<!-- Special Debug Output for Development -->
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>
<!-- Optional JSF-RI Parameters to Help Debug -->
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>true</param-value>
</context-param>
<!-- ajax4jsf -->
<context-param>
<param-name>org.ajax4jsf.SKIN</param-name>
<param-value>classic</param-value>
</context-param>
<context-param>
<param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
<param-value>com.sun.facelets.FaceletViewHandler</param-value>
</context-param>
<!-- ajax4jsf -->
<filter>
<filter-name>ajax4jsf</filter-name>
<display-name>Ajax4jsf Filter</display-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

9. 9
<!-- Listeners -->
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<listener>
<listener-class>
org.springframework.web.context.request.RequestContextListener
</listener-class>
</listener>
<!-- Faces Servlet -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Faces Servlet Mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
</web-app>
Step 5: Modify one of the pages to demonstrate Ajax in action using Ajax4JSF. We will
modify the inputname.jspx page to provide some Ajax functionality. We will provide Ajax
support to the <h:inputText …> where the person name is entered and behind the scenes
(with the help of Ajax) as we type in the name the managed bean “personBean” is updated

10. 10
and contains the freshest value. This can be demonstrated by outputting the
#{personBean.personName} as shown below.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
version="2.0">
<ui:composition>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<f:view>
<f:loadBundle basename="com.mytutorial.messages" var="msg" />
<h3><h:form id="helloForm">
<h:outputText value="#{msg.prompt}" />
<h:inputText value="#{personBean.personName}" >
<a4j:support event="onkeyup" reRender="rep" />
</h:inputText>
<h:commandButton action="greeting" value="#{msg.button_text}" />
<br/>
Ajax in action by repeating what you type -->
<b>
<h:outputText value="#{personBean.personName}" id="rep" /> </b>
</h:form></h3>
</f:view>
</body>
</html>
</ui:composition>
</jsp:root>

11. 11
Step 6: Make sure that your HSQLDB is running, if not start it.
Start the HSQL database server by executing the following command in a command
prompt as shown below:
C:javahsqldb>java -cp ./lib/hsqldb.jar org.hsqldb.Server
Open another command prompt and run the following command:
C:javahsqldb>java -cp ./lib/hsqldb.jar org.hsqldb.util.DatabaseManager
This will spawn a new window as shown:
Step 7: Deploy the “simpleWeb” to Tomcat within eclipse.

12. 12
Step 8: Open an Web browser and type the following URL:
http://localhost:8080/simpleWeb/index.jsf
Click on “Click Me”.

13. 13
As you type the name in “onkeyup” JavaScript event will be fired. Each time this event is fired
on the parent tag, our application sends an AJAX request to the server. This means that the
“personName” on our managed “personBean” is updated with the freshest value of our
input. Isn’t this cool and useful?
Now, click on the “Hello” command button to retrieve data from the database.
That’s all to it.
Please feel free to email any errors to java-interview@hotmail.com. Also stay tuned at
http://www.lulu.com/java-success for more tutorials and Java/J2EE interview
resources.