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
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:
@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="ajax.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="javax.faces.Ajax.ajaxRequest(this, event, {execute: this.id, render: 'out1'}); return false;"/> <br/> <!-- Resets the counter --> <h:commandButton id="reset" value="reset" onclick="javax.faces.Ajax.ajaxRequest(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 ajaxRequest 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 ajaxRequest, and return false. The false return, for those not versed in Javasript, means that it doesn't actually call submit on the enclosing form.
The ajaxRequest 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.)
Hi sir, I want to what jar files shall I include to develop this application.what are the tools providing providing this new application feature.please give the resources to learn hoe to develop these applications.
i tried this with glassfish v3 prelude and netbeans 6.8 m1 with jsf 2.0 framework. couldn't get the ajax functioanlity. Count is incrementing but i am getting regulr page refresh function. ajax.js javascript is not emitted to the webpage html.
Ajax Projects
