ajax, jsf, facelets, eclipse & maven

8/6/2019 Ajax, JSF, Facelets, Eclipse & Maven

1/13


2/13

2

Table Of Contents

Notations .....................................................................................................................3Tutorial 15 Ajax4jsf with JSF & Facelets.........................................................4


3/13

3

Notations

Command prompt:

Eclipse:

File Explorer or Windows Explorer:

Internet Explorer:


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


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


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.


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/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


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


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 -->


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.


12/13

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 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.

ajax, jsf, facelets, eclipse & maven

Documents