Jair Rillo Junior’s blog

JSF 2.0 and AJAX example

October 10th, 2009 | Tags: AJAX, JSF 2

As you should know, in JSF 1 the AJAX wasn’t default. To use AJAX we had to use an external component, such as Richfaces (ajax4jsf), IceFaces, etc. This raises some drawback, because you cannot use both components in the same project.
However, in version 2, the AJAX API comes by default. If you’re familiar with ajax4jsf, you’ll fee comfortable to use the AJAX API in JSF 2.0.Also, the JSF team promisses that you’ll be able to use external AJAX API, such as YUI, JQuery, etc, in JSF smoothly. Check it out this topic: http://weblogs.java.net/blog/driscoll/archive/2009/08/using_the_yui_c_1.html
Let’s create a simple example using our previous example that has been written here. Please, go to the previous post and download the example.

How the example works

In the previous example we had 2 JSPs and 1 ManagedBean. The principal.xhtml had a form with one field (name). A submit button calls the managed bean and this name attribute was converted to upper case. Finally, the success.xhtml showed the result.
Now, let’s use only the principal.xhtml file. It will have the form and then will show up the result.

Changing the principal.xhtml page

The first thing to do is setup the javascript library into page. To do that, simple add the following in the head content.

<h:outputScript name="jsf.js" library="javax.faces" target="head" />

Another change is in the h:form tag. Add the prependId=”false” attribute.
Note: All fields must have the id attribute setup. As you should know, AJAX looks for those IDs to make the request.

Adding AJAX call

So far we changed the principal.xhtml file to be able to make AJAX call, but where is the call itself?
It is done through a tag called f:ajax. This tag can be inserted into components, such as h:commandButton to make an ajax call.
So, let’s create a commandButton and add the AJAX functionality for it.

        	<h:commandButton value="Ajax Button" action="#{helloWorld.ajaxCall}">
        		<f:ajax event="action" execute="@form" render="out"/>        		
        	</h:commandButton>

Some important notes: The h:commandButton is common. It has a value and an action call. It could have other events, such as: onclick, onblur, etc.
Inside the button we have the f:ajax tag. Its event attribute tells to JSF with event will be called, in our example the action event. Other events, such as onclick can be used.
The execute attribute tells with data should be sent do the server. The @form value tells that all the form should be sent.
Finally, we have the render attribute. In this render we tell to JSF with component will be updated after the call.
Now, we just need to add our h:outputText component.

<h:outputText value="#{helloWorld.name}" id="out" />

After those changes, our entire principal.xhtml looks like:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<h:outputScript name="jsf.js" library="javax.faces" target="head" />
</h:head>      
<h:body>
    <f:view>
        <h2><h:outputText value="This is our first JSF 2.0 example" /></h2>
        <h:form prependId="false" id="form">
        	Name: <h:inputText value="#{helloWorld.name}" id="name" /><br />
        	<h:commandButton action="#{helloWorld.doSomething}" value="Something is gonna happen" /><br />
        	<h:commandButton value="Ajax Button" action="#{helloWorld.ajaxCall}">
        		<f:ajax event="action" execute="@form" render="out"/>        		
        	</h:commandButton> 
        	<h:outputText value="#{helloWorld.name}" id="out" />        	
        </h:form>        
    </f:view>
</h:body>
</html>

Note: We kept the old button there, thus you can have both example in the same project.

Chaning the ManagedBean

If you look at the AJAX Button, you’ll see that its call an ajaxCall method. So, let’s implement it into ManagedBean.
Open the HelloWorldMBean.java class and add the following method:

	public void ajaxCall() {
		name = name.toUpperCase();
	}

Note: the method doesn’t have a return. That’s simple, huh?

Running the code

After that, you can run the project, type something and click on AJAX Button. You’ll realize that a AJAX call was performed because only the result is in upper case, not the value in the field.

Conclusion

Certainly the JSF 2.0 brings great news and native AJAX support is one of them. Who knows in the future, we can use multiples AJAX components in our single project. Now you already know how to use AJAX support, try out combine it with other AJAX frameworks, such as YUI or JQuery.

If you have any comment, question or feedback, please, let your message below.

JSF 2.0 and AJAX example

How the example works

Changing the principal.xhtml page

Adding AJAX call

Running the code

Conclusion

Jair Rillo Junior

Categories

Blogs

Ruby

Websites