8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
1/13
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
2/13
2
Table Of Contents
Notations .....................................................................................................................3Tutorial 15 Ajax4jsf with JSF & Facelets.........................................................4
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
3/13
3
Notations
Command prompt:
Eclipse:
File Explorer or Windows Explorer:
Internet Explorer:
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
4/13
4
Tutorial 15 Ajax4jsf with JSF & Facelets
This tutorial will guide you through building a simple Ajax based Webapplication. This tutorial assumes that you have gone through Tutorials 1-10&the source code for tutorials 1-10. Also refer to Ajax4jsf developer guide athttps://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. Wewill Ajax enable this Web application. We will be using Ajax4jsf (checkhttps://ajax4jsf.dev.java.net/ & http://labs.jboss.com/jbossajax4jsf/ ). Firstly add the Ajax4jsfdepedendency jar into pom.xml.
net.java.dev.ajax4jsf
ajax4jsf
1.0.6
The complete pom.xml file should look like:
4.0.0
com.mytutorialsimple-tutorial1.0
com.mytutorialsimpleWebwar1.0-SNAPSHOTsimpleWeb Maven Webapp
http://maven.apache.org
com.mytutorialsimple
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
5/13
5
1.0-SNAPSHOTjar
junitjunit3.8.1test
commons-digestercommons-digester1.8
commons-collectionscommons-collections3.2
org.springframeworkspring2.0.6
javax.facesjsf-api1.2
javax.facesjsf-impl1.2_04
com.sun.faceletsjsf-facelets1.1.11
javax.servletjstl1.1.2
javax.elel-api1.0provided
com.sun.elel-ri1.0
net.java.dev.ajax4jsf
ajax4jsf1.0.6
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
6/13
6
simpleWeb
Step 2:Now, you need to go back to the command prompt and run the following command to add theajax4jsf 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 fileorg.eclipse.wst.common.project.facet.core.xml underC:\tutorials\simple-
tutorial\simpleWeb\.settingsas shown below from version=2.4 to version=2.5. Every timeyou usethe eclipse:clean command, you will have to manually fix this up as shown below.
Step 3: Refresh the simpleWeb project.
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
7/13
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:
com.sun.facelets.FaceletViewHandler
web.xml
Following need to be added:
org.ajax4jsf.SKINclassic
org.ajax4jsf.VIEW_HANDLERScom.sun.facelets.FaceletViewHandler
ajax4jsfAjax4jsf Filterorg.ajax4jsf.Filter
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
8/13
8
ajax4jsf
Faces Servlet
The complete web.xml should look like:
javax.faces.STATE_SAVING_METHODserver
javax.faces.CONFIG_FILES/WEB-INF/faces-config.xml
javax.faces.DEFAULT_SUFFIX.jspx
contextConfigLocation
facelets.DEVELOPMENTtrue
com.sun.faces.validateXmltrue
com.sun.faces.verifyObjectstrue
org.ajax4jsf.SKINclassic
org.ajax4jsf.VIEW_HANDLERScom.sun.facelets.FaceletViewHandler
ajax4jsfAjax4jsf Filter
org.ajax4jsf.Filter
ajax4jsfFaces Servlet
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
9/13
9
org.springframework.web.context.ContextLoaderListener
org.springframework.web.context.request.RequestContextListener
Faces Servlet
javax.faces.webapp.FacesServlet1
Faces Servlet*.jsf
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 Ajaxsupport to the 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
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
10/13
10
and contains the freshest value. This can be demonstrated by outputting the#{personBean.personName}as shown below.
Insert title here
Ajax in action by repeating what you type -->
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
11/13
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 commandprompt 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.
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
12/13
12
Step 8: Open an Web browser and type the following URL:
http://localhost:8080/simpleWeb/index.jsf
Click on Click Me.
8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven
13/13
13
As you type the name in onkeyup JavaScript event will be fired. Each time this event is firedon 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 ourinput. 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 [email protected]. Also stay tuned at
http://www.lulu.com/java-success for more tutorials and Java/J2EE interview
resources.