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: [email protected]

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

3 Notations
Command prompt:

Eclipse:

File Explorer or Windows Explorer:

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/ajaxdocumentation/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/mavenv4_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> <!-- 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
</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:\tutorials\simple-tutorial\simpleWeb>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:\tutorials\simpletutorial\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.

Step 3: Refresh the simpleWeb project.

7
Step 4: Following changes are required in the deployment descriptor files web.xml & facesconfig.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
<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>

<!-- 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
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
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:\java\hsqldb>java -cp ./lib/hsqldb.jar org.hsqldb.Server

Open another command prompt and run the following command: C:\java\hsqldb>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

Step 8: Open an Web browser and type the following URL: http://localhost:8080/simpleWeb/index.jsf

Click on Click Me.

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. Isnt this cool and useful? Now, click on the Hello command button to retrieve data from the database.

Thats all to it.

Please feel free to email any errors to [email protected]. Also stay tuned at http://www.lulu.com/java-success for more tutorials and Java/J2EE interview resources.