JSFTemplating + DynamicFaces = Easy Ajax

Ok, let's get right to it.  Ajax is hot, but it needs to be "real".  You need a fast way to be productive with Ajax, not gfx-clock productive, but real-world productive.  Let me offer a suggestion...

In an effort to keep my blog entries concise (part of my New Year's Resolution), I will get right to the point.  By using JSFTemplating with Ed Burns's DynamicFaces project, you have a perfect Ajax solution tailored to JSF's component architecture.  Add JSF widgets like those found Greg Murray's jMaki project and you have a complete solution.  However, I will save jMaki for a later blog.  I want to stick to the basics for this entry -- Keep It Simple.

I created a very simple example which shows all you need and little more.  You can download the complete war file and try it out.  Here are the contents of the .war file:

guess.jsf                                         <-- JSF page
WEB-INF/lib/dataprovider.jar                      <-- Sun component libraries & dependencies
WEB-INF/lib/jsftemplating.jar                     <-- JSFTemplating .jar file
WEB-INF/lib/jsftemplating-dynafaces-0.1.jar       <-- JSFTemplating/DynamicFaces integration .jar file
WEB-INF/web.xml                                   <-- deployment descriptor


This is a 1 page application -- doesn't get much simpler than that.  It also doesn't use any managed beans, or any custom Java code.  Instead it leverages JSFTemplating to do everything in the .jsf file.  Let's look at the page:

        Guess Demo Screenshot 


And the source:


    <sun:head title="Ajax Zone">
<jsfExt:scripts />

<sun:form id="form">

            <sun:markup tag="div" id="result">
                <staticText value="#{pageSession.msg}">
setPageSessionAttribute(key="msg" value="Guess my number [1-100]!");

            // The data input / processing...
<sun:textField id="guess" label="Your guess: " value="#{requestScope.guess}" />
<sun:button text="Submit AJAX Request" onClick="
{execute: this.id + ',form:guess',
immediate: false,
inputs: this.id + ',form:guess_field',
render: 'form:result' });
return false;

if ("#{requestScope.guess}>64") {
setPageSessionAttribute(key="msg" value="#{requestScope.guess} is too high!");
if ("#{requestScope.guess}=64") {
setPageSessionAttribute(key="msg" value="You WIN!!! It was #{requestScope.guess}.");
if ("#{requestScope.guess}<64") {
setPageSessionAttribute(key="msg" value="#{requestScope.guess} is too low!");



// This fields below exist to show required fields are NOT effected
<sun:textField label="This is required: " required="#{true}" />
<sun:button text="Submit (non-AJAX)" />


The blue area above defines an area where a prompt will be shown to the user.  The beforeCreate event allows an initial value to be set.  PageSession is a JSFTemplating-added scope.  The value bound to the pageSession variable msg will be shown to the user.  This is plain, oridinary text that will be replaced by an Ajax request.

The red areas is the JavaScript from DynamicFaces that is needed to submit the request.  In this case, I've specified several things for this Ajax request:

  • execute: A JavaScript String specifying which JSF component id's to process.  In this case the button itself and the field to submit.

  • immediate: Not really needed, but if there was validation on the field in "execute" immediate would skip the validation.  In this example it does nothing useful.  I added it to show that the other required field on the page truely isn't processed even when immediate is false.  This is true partial-page processing.

  •  inputs: The values sent to the server.  This may be different than the components processed.  In this case the HTML id of the form field is different than the component id because of how the componet is implemented, so I need to send "form:guess_field" for the value to be sent correctly during the Ajax request.

  • render: This specifies which area(s) of the screen should be updated with the response.  In this case the <div> around our message text.

Finally, the green area is the business logic.  It evaluates the submitted value and displays an appropriate response.  In real-world JSFTemplating applications, you'd likely put this in Java code in a handler such as is done by the built-in "setPageSessionAttribute" handler in this example.  But to keep the example simple (1 page), JSFTemplating's condition processing was used instead.

That's it!  The user types something in the box, clicks the button, an Ajax request displays the response.  The beauty is its simplicity.  You work with Ajax requests on the server-side exactly as you would with any other JSF action.  You glue it together with a small amount of JavaScript which, as you can see, gives you \*lots\* of flexibility on what is sent to the server, what is updated, etc.  So your next step is to look at your own application and see where you could improve your user experience by doing partial page updates, or other asynchronous checks.  The plumbing is in place... now use it!


JSFTemplating: https://jsftemplating.dev.java.net

DynamicFaces: https://jsf-extensions.dev.java.net/nonav/mvn/features-ajax.html


Hi it seems that the permission of the site ....dev.java.net is restricted. All the refrences about jsf templating on the web are refered to dev.java.net. How can i get the war file and some more explaination on jsf templating? Regards.

Posted by Nahid Parsa on July 31, 2007 at 10:27 PM PDT #

Hi, https://jsftemplating.dev.java.net should be accessible. If it wasn't collab.net (hosting company for java.net) was probably in the middle of breaking something -- they do that from time to time. :(

If you have any more problems, please let me know. You can get help for JSFTemplating via the email lists on the java.net site. You can also join the #jsftemplating IRC channel at irc.freenode.net.

Good luck!

Posted by Ken Paulsen on August 01, 2007 at 03:57 AM PDT #

very nice aricle.
thanks friendly

Posted by ankara nakliyat on November 26, 2007 at 11:37 PM PST #

good idea...

Posted by ankara nakliyat on November 26, 2007 at 11:38 PM PST #

very nice aricle.
thanks friendly

Posted by sohbet on June 10, 2009 at 11:30 PM PDT #

thank you very much good post

Posted by sohbet on February 05, 2010 at 07:22 AM PST #

very gods thanks you perfect page editors

Posted by TiLMAR on July 25, 2010 at 05:22 PM PDT #

Post a Comment:
Comments are closed for this entry.



« August 2016