What RichFaces a4j:ajax adds on top JSF 2 f:ajax tag

JSF 2 now has basic Ajax support via f:ajax tag. RichFaces 3 has a very popular a4j:support tag (in fact, f:ajax was inspired by a4j:support). RichFaces 4 comes with a4j:ajax which is based on f:ajax but upgrades the tag with more features and advanced functionality. The table below show the attributes available in both tags and how RichFaces upgrades the core Ajax functionality in JSF 2 (I’ll cover a4j:ajax extra attributes in the future).

In addition to a4j:ajax, RichFaces upgrades JSF 2 with tags such as a4j:commandButton, a4j:commandLink, a4j:poll, a4j:jsFunction, a4j:outputPanel and more (covered in future posts).

Attribute f:ajax a4j:ajax
event Works the same Works the same
execute @all
@this
@form
@none
Id’s
EL
@all
@this
@form
@none
Id’s
EL (different behavior, id’s are resolved in current request)
@region (when a4j:region is used)
render @all
@this
@form
@none
Id’s
EL
@all
@this
@form
@none
Id’s
EL (different behavior, id’s are resolved in current request)
listener Works the same Works the same
onevent Works the same Works the same
onerror Works the same Works the same
immediate Works the same Works the same
disabled Works the same Works the same
onbegin n/a JavaScript to execute before Ajax request
onbeforedomupdate n/a JavaScript to execute after response comes back but before DOM update
oncomplete n/a JavaScript to execute after DOM update
bypassUpdates n/a Skips Update Model and Invoke Application phases, useful for form validation
limitRender n/a Skips all a4j:outputPanel ajaxRender=”true” areas. Only renders what is set in current render
status n/a Status to display during Ajax request
focus n/a Sets focus on component after Ajax request (not yet implemented)

RichFaces JavaScript interactions: invoking JavaScript before and after Ajax request

One of the unique features in RichFaces is its power and flexibility. If you don’t want or need to deal with JavaScript then you use controls such a4j:support, a4j:commandButton, a4j:commandLink, a4j:poll, and a4j:jsFunction to fire and Ajax request and perform partial page updates. On the other hand, if you need more flexibility or looking for more fine-grained control over what happens before and after an Ajax request, RichFaces offers such feature. The feature is usually referred to as JavaScript interactions and allows you to tap into the Ajax request before and after the request.

There are three places where you can add or inject any custom JavaScript function:

Event Description
onsubmit, onclick On submit (just before request is fired)
onbeforedomupdate Response received, but before DOM update
oncomplete After DOM update

For following example has all three events defined (onsubmit, onbeforedomupdate, oncomplete):


   
   
   
      




First you will see the message “Are you sure you want to change the country”?. You will then see “Just before DOM update”. At this point the response has come back but the DOM hasn’t been updated. Lastly, after the DOM has been updated you will see “We told you so”.

When using a4j:commandButton or a4j:commandLink, onclick attribute is used instead of onsubmit:


Complete summary of all tags and which attributes are supported:

Tag Attribute Descriptoin
a4j:commandButton, a4j:commandButton onclick:
JavaScript code to be invoked before Ajax request is sent.
a4j:support, a4j:poll onsubmit:
JavaScript code to be invoked before Ajax request is sent.
a4j:commandButton, a4j:commandLink,
a4j:support, a4j:poll, a4j:jsFunction
onbeforedomupdate:
JavaScript code to be invoked after response is received but before browser DOM update
oncomplete:
JavaScript code to be invoked after browser DOM update

This is a very powerful feature and allows you to invoke any JavaScript at three points during an Ajax request. Also, these are client-side events which means they are processed in the browser.

Using RichFaces a4j:jsFunction – sending an Ajax request from any JavaScript

There are four components in the a4j: tag library which enable you to send an Ajax request. They are a4j:commandButton, a4j:commandLink, a4j:support, and a4j:poll. All provide rather specific functionality. For example, a4j:commandButton will generate an HTML button that fires an Ajax request. a4j:commandLink will do the same but generates a link. a4j:support is always attached to another JSF component to enable sending an Ajax request based on some event supported by the parent component. a4j:poll which allows sending Ajax requests periodically. There is one more tag called a4j:jsFunction. This tags gives you a lot of power and flexibility. a4j:jsFunction lets you send an Ajax request from any user-defined JavaScript function. It can be a custom function or from any component-event as well. The good news is that it works just like any other tags I listed above, it has all the same attributes such as reRender, action, actionListener, bypassUpdates, ajaxSingle and so on.
Continue reading

RichFaces components client-side JavaScript API

Many rich components (from rich: tag library) provide client-side JavaScript API. Being client-side means it’s happening only in the browser. We would have to click submit or fire an Ajax request to submit the changes. How do you find what JavaScript functions are available on a particularity component? The place to find this information is in the User Guide.

Let’s take a rich:listShuttle as an example. Here is a link to the component in User Guide. If you look at the very top, you will see five links. Click on Reference Data. You will now see JavaScript API table. This is the place where all JavaScript functions are listed. For any other component, you would do the same.

To use these functions, we first need to use a built-in #{rich:component(‘id’)} function in RichFaces. This will give us a reference to the available API for a particular component. We then just append the function name, so it looks like this: #{rich:component(‘id’)}.functionName();

Here is rich:listShuttle component:

Source:


      Major U.S based airlines
      My favorite airlines
      
	   Name
	   #{air.name}
      
      
	    Logo
	    
      

Looking at the available API, let’s say we would like to place four buttons under the component that would perform the same actions you can do with Copy All, Copy, Remove and Remove All. Adding the following:





We are using a standard HTML button as they are all client-side functions. We then use #{rich:component(‘id’)} built-in function and reference the appropriate JavaScript API.

Firing an Ajax request is done the same way even if you didn’t have the four buttons. We can place a button and click it once we are done with editing. This is similar to filling out a form and clicking submit. If we want an Ajax request to be fired every time we change either the list or the order, we can use a4j:support tag to accomplish that.


      Major U.S based airlines
      My favorite airlines
      
	   Name
	   #{air.name}
      
      
	    Logo
	    
      
      
      








	#{air.name}

We added two a4j:suppor tags with appropriate events and rich:dataList to display the result.

As always, visit RichFaces Component Demo application.

How to approach RichFaces training

If you are learning RichFaces, here is one approach you can take. These are the core features that you need to know. Once you have a good grasp on them, you will be able to use any rich components from the library. This will probably surprise you, but there is not a whole lot to learn in section 9. All the core concepts are in sections 1-8.

  1. Sending an Ajax request
    1. a4j:support
    2. a4j:commandButton, a4j:commandLink
    3. a4j:poll
    4. a4j:jsFunction
  2. Partial view rendering
    1. reRender attribute
    2. a4j:outputPanel (ajaxRendered attribute)
    3. Important attributes such as bypassUpdates, limitToList covered as well
  3. Partial view processing
    1. a4j:region (renderRegionOnly, selfRendered attributes)
    2. ajaxSingle attribute
    3. process attribute
  4. Controlling traffic
    1. a4j:queue
  5. JavaScript interactions
    1. onclick, onsubmit, obeforedomupdate, oncomplete attributes
  6. More a4j: tags
    1. a4j:status
    2. a4j:include
    3. a4j:keepAlive
    4. a4j:actionparam
    5. a4j:log
    6. a4j:repeat (with ajaxKeys attribute)
    7. a4j:ajaxListener
  7. RichFaces client-side functions
  8. Using rich: components JavaScript API
  9. rich: tags
    1. Output
      1. Simple output (layout)
      2. Toggle panels
    2. Inputs, in-place edit
    3. Selects
    4. Validation
    5. Data iteration
    6. Menus
    7. Other
  10. Skins
    1. Using out-of-the-box skins
    2. Creating custom skins
    3. Loading different skins in runtime
    4. Overwriting styles generated by skins
    5. Using component style attributes

If you need to get your team up to speed quickly, consider our 2 day on-site RichFaces training.

As always, to view all RichFaces components in action, visit the components demo page.

Setting focus on a component with RichFaces

Some time ago I blogged on how to set focus on a component after an Ajax request in RichFaces. As a quick review, every tag that fires an Ajax request has focus attribute which points to the id of the component on which to set focus after the request. It works fine but only for simple tags such as from h: tag library. When you start using components from rich: tag library such as rich:calendar, there are several focusable elements which are rendered and the above approach won’t work.

There is a workaround, let’s take rich:calendar as an example.


   ...
   
   

The above won’t set the focus because of the problem I described. Using Firebug we can find the input field that was rendered and its id. Here is the rendered HTML:


We can now see that client id of the input field is j_id2:calInputDate. form is the form id, cal is calendar id and then InputDate is appended as well. So, we would have use form:calInputDate as the client id in focus.


   ...
   
   

Another and better option is to use #{rich:clientId}, one of the built-in JavaScript functions in RichFaces:


   ...
   
   

This way we don’t have to worry about the form id.

You can always view all RichFaces components by going to RichFaces Components Demo.

Most popular (and useful) RichFaces posts

The following are some of the best posts about RichFaces. Of course everything is good, but these important core features and other good examples:

Easiest way to start with RichFaces (Eclipse template)
RichFaces with Hibernate Validator
RichFaces built-in client functions
RichFaces region – partial JSF view processing
View scope in RichFaces
Using rich:layout and rich:layoutPanel components
4 – part RichFaces webinar series
Changing RichFaces skins in runtime
Using rich:layout and rich:layoutPanel components
RichFaces confirmation dialog – complete edition
RichFaces sorting and filtering – complete edition

For everything else, just click on richfaces-howto tag and you will get to all RichFaces posts.