Ajax, JSF, Facelets, Eclipse & Maven tutorials

1,313 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,313
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax, JSF, Facelets, Eclipse & Maven tutorials

  1. 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. 2 Table Of Contents Notations ..................................................................................................................... 3 Tutorial 15 – Ajax4jsf with JSF & Facelets......................................................... 4
  3. 3. 3 Notations Command prompt: Eclipse: File Explorer or Windows Explorer: Internet Explorer:
  4. 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. 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. 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. 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. 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. 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. 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. 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. 12 Step 8: Open an Web browser and type the following URL: http://localhost:8080/simpleWeb/index.jsf Click on “Click Me”.
  13. 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.

×