Professional Documents
Culture Documents
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.
By
K. Arulkumaran
&
A. Sivayini
Website: http://www.lulu.com/java-success
Table Of Contents
Notations ..................................................................................................................... 3
Tutorial 15 – Ajax4jsf with JSF & Facelets......................................................... 4
3
Notations
Command prompt:
Eclipse:
Internet Explorer:
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.
<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
<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>
<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.
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:\tutorials\simple-
tutorial\simpleWeb\.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.
faces-config.xml
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
web.xml
<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>
<filter>
<filter-name>ajax4jsf</filter-name>
<display-name>Ajax4jsf Filter</display-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
8
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
<param-value>
<![CDATA[
/WEB-INF/applicationContext.xml
classpath:applicationContext-mytutorial.xml
]]>
</param-value>
</context-param>
<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>
<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
<listener>
<listener-class>
org.springframework.web.context.request.RequestContextListener
</listener-class>
</listener>
</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
and contains the freshest value. This can be demonstrated by outputting the
#{personBean.personName} as shown below.
<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">
<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
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:
http://localhost:8080/simpleWeb/index.jsf
Now, click on the “Hello” command button to retrieve data from the database.
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.