JBoss application server tutorials

Using Ajax with JBoss RichFaces

Richfaces is a rich Java Server Faces library which allows easy integration of Ajax capabilities in your Web application.

Before now we have published two tutorials about Richfaces which can be used as introduction and as reference for installing:

RichFaces tutorial
Installing RichFaces on JBoss AS 5 and 6

If you have already approached Ajax technology using simple Javascript code you probably agree that Ajax can be rather cumbersome to implement thus reducing the benefits of adopting it.

Richfaces ships with a complete set of components and capabilities which use Ajax technology without the burden of writing Javascript code. Let's see how to achieve this, starting with simple examples:

How to send an AJAX request

You have basically two options to send an Ajax request to your JSF Beans:

Use <a4j:support>

Using this tag, you enable a JSF component to send an Ajax request based on the event supported by the component. In practice, you turn a simple JSF component into an Ajax component.
For example, in this code snippet you are recalling the method reverseIt each time there's an event onkeyup on the inputText:

<h:outputText value="Enter String to Reverse: " />
    <h:inputText value="#{UserBean.text}">
    <a4j:support event="onkeyup" action="#{UserBean.reverseIt}"
            reRender="reversed"></a4j:support>
    </h:inputText>
    <h:outputText id="reversed"
        value="Text reversed: #{UserBean.textReversed}" />

Notice the reRender attribute which specifies the components which need to be updated after the action has been completed. In our sample, only the outputText named "reversed" will be updated.

Use <a4j:commandButton> or <a4j:commandLink>

These components issue natively an Ajax request and specify which component need to be updated once the action is completed. Both components work the same, just the commandButton is rendered as an HTML button while the commandLink is an HyperLink.

Let's see the a4j:commandButton:

<h:outputText value="Enter String: " />
 <h:inputText value="#{UserBean.text}" />
 <a4j:commandButton value="Submit" action="#{UserBean.textAction}" reRender="one,two"></a4j:commandButton>            
                               
 <h:outputText id="one" value="#{UserBean.toUpper}" />
 <h:outputText id="two" value="#{UserBean.toLower}" />

Here, the reRender attribute specifies that the outputText "one" and "two" need to be updated, after that the textAction has been invoked.

Limiting the amount of data to send

So far we've seen how Ajax can be useful because only a partial rendering of the Web page is performed, instead of the whole page. However we're still sending to the server all fields contained in the form. This can lead to a decrease of performance if we are not using all of them.

In order to limit the amount of fields sent to the server, you can use the <a4j:region> tag. See the following example:

<a4j:commandButton id="one" value="Submit one" />
<h:inputText id="input1" value="#{UserBean.text1}" />

    <a4j:region>   
       <a4j:commandButton id="two" value="Submit two" />
       <h:inputText id="input2" value="#{UserBean.text2}" />     
    </a4j:region>

In this example, when you click on the commandButton "two", since it's contained in a a4j:region, only the content of the a4j:region will be process- that is only the input2 field.

It’s also possible to nest region one Ajax region inside another. When regions are nested, the region that encloses the Ajax component that initiated the request will be used.

The same result can be obtained by using the ajaxSingle attribute on the single component. This way, only that component will push data to the server. The equivalent code, using the ajaxSingle attribute is:

<a4j:commandButton id="one" value="Submit one" />
<h:inputText id="input1" value="#{UserBean.text1}" />
   
   <a4j:commandButton id="two" value="Submit two" />
   <h:inputText id="input2" value="#{UserBean.text2}" ajaxSingle="true" />

Polling requests to the server with <a4j:poll>

a4j:poll is one of the way how you can organize the periodical polling of server data and updating the page. The main difference with the commandButton and commandLink is that the request is fired automatically to the server on a configurable interval. Here's an example:

<h:form>
    <a4j:poll id="poll" interval="500" reRender="counter" />
</h:form>

<h:form>
    <h:panelGrid columns="2">
    <h:panelGrid columns="2">

    <a4j:commandButton value="Start Counter"
            action="#{UserBean.startCounter}" reRender="poll" />
    <a4j:commandButton value="Stop Counter"
        action="#{clockBean.stopCounter}" reRender="poll" />
    </h:panelGrid>
    
    <h:outputText id="counter" value="#{UserBean.counter}" />
    </h:panelGrid>
</h:form>

<