Jim Driscoll's Blog

Notes on Technology and the Web

A simple Ajax JSF 2.0 example

leave a comment »

In my previous blog post, I talked about the New Composite Component feature of JSF. I’ll come back to that shortly, but I’d like to talk about another new feature: integrated Ajax support. While this part of the specification is still being finalized, I thought it might be worthwhile to see what a simple example of the Ajax support in JSF 2.0 will look like. (Don’t worry, I’ll tie this together with Composite Components in a future posting.


Now, before I start, please keep in mind that the final version of JSF 2.0 will make this even easier, with a declarative (tag based) way to call out to Ajax in JSF. But for now, we’ll have to be content with the Javascript centric approach described below. Also, to use this example, you’ll have to use Glassfish v3 prelude, updated to build 5 of the JSF 2.0 EDR2 release via the updatetool – just released a couple hours ago. And if that doesn’t say “this is Alpha level code”, I don’t know what does.


A fairly common “hello world” type ajax example is a counter – so let’s build an app that counts upward. We’ll need a simple bean to store the count, as well as increment it and reset it:


import javax.faces.event.ActionEvent;
import javax.faces.model.ManagedBean;
import javax.faces.model.SessionScoped;

@ManagedBean(name = "count")
@SessionScoped
public class Count {
    Integer count = 0;

    public Integer getCount() {
        return count++;
    }

    public void reset(ActionEvent ae) {
        count = 0;
    }
}



Note that unlike JSF 1.2, you can set up your managed bean without using the facesconfig.xml file – instead, you can just use annotations.


Now, we’ll look at the facelets file that we’ll be using, and then we’ll go through line by line. Here’s the facelets file:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Ajax</title>
</h:head>
<h:body>
    <h:form id="form1" prependId="false">
        <h:outputScript name="jsf.js" library="javax.faces" target="head"/>
        <h:outputText id="out1" value="#{count.count}"/>
        <br/>
        <!-- Increment the counter on the server, and the client -->
        <h:commandButton id="button1" value="Count"
                         onclick="jsf.ajax.request(this, event, {execute: this.id, render: 'out1'}); return false;"/>
        <br/>
        <!-- Resets the counter -->
        <h:commandButton id="reset" value="reset"
                            onclick="jsf.ajax.request(this, event, {execute:'reset', render: 'out1'}); return false;"
                            actionListener="#{count.reset}"/>
    </h:form>
</h:body>
</html>



This form paints three widgets: An outputText, and two commandButtons.
outputText “out1” has the contents of the count value. “button1”, when pressed updates (and hence increments) the “out1” field and only that field” – there’s no full page reload. Similarly, “reset” resets the counter value, and updates the “out1” field, and only that field. Useful? Not really, unless you were to put a bunch of other things on the page, and didn’t want to refresh the entire page.


The h:outputScript tag says that we should include the JSF ajax library into our page. This is necessary for the call to jsf.ajax.request that we later make.


Note that even though the “out1” output text is the target of our ajax, it doesn’t contain any unusual markup.


Then, we have “button1” – it’s onclick method does two things – call jsf.ajax.request, and return false. The false return, for those not versed in JavaScript, means that it doesn’t actually call submit on the enclosing form.


The jsf.ajax.request call, on the other hand, takes three parameters. The first is the calling object, this. The second is the calling event, event. You’ll typically just use these values, so don’t worry too much about them.


The last parameter is a JavaScript object with two properties – an execute property, which takes list of the ids of all the JSF components that we would like to execute – since we’re executing this button, we’ll include it in the list as ‘this.id’. The second property is all the JSF components that we want to render – in this case, that’s just ‘out1’. That tells JSF to update the displayed value of the outputText component, above.


Lastly, we have ‘reset’ – it’s onclick is pretty much identical, but there’s an additional attribute, “actionListener”. Since we’re already executing ‘reset’, that means that JSF will call that method as part of the button push.


Hopefully this example was pretty clear – and fairly simple. Any questions? Ask below. (I’ll be doing more complex examples as the month progresses.)


Update: I’ve updated this example to be more clear, and to conform with the latest JSF 2.0 PR release.

(This article was originally published on my java.net blog on November 5, 2008.)

Advertisements

Written by jamesgdriscoll

February 9, 2010 at 6:31 PM

Posted in Java, JSF, web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: