Plain JSF/RichFaces project on JBoss AS

A reader asked me to provide plain JSF and RichFaces template to run on JBoss AS. As JBoss AS already comes with JSF libraries, just delete the two JSF Jars (jsf-api.jar, jsf-impl.jar) and you will be ready to go. Or, follow the steps below to download and import the project. Again, this is just plain JSF/RichFaces project, no Seam, Hibernate, JPA. It’s a good starting point if you want to try RichFaces.

How to import
I tested this on Eclipse 3.5 with JBoss Tools. I will assume that you already have JBoss AS registered in Eclipse.

  1. Download the the template file
  2. In Eclipse, select File/Import
  3. Select General/Existing Project into Workspace, click Next
  4. Check ‘Select archive file:’ option
  5. Click Browser… and point to the downloaded file
  6. Click Finish
  7. Deploy the project to JBoss AS.
  8. Run the application, you should see “Hello, looks like it’s working” message (image below).

Creating "Please wait" with RichFaces modal panel

Showing user a modal “Please wait” or “Working” dialog is a good way to prevent him or her clicking a button more than once. It can be easily done in RichFaces by combining a4j:status and rich:modalPanel tags.


   





   

When the button is clicked, a4j:status is executed. Instead of showing some text or animated image, we use onstart event to open a modal panel. While Ajax request is executing on the server, the modal panel is active and prevents clicking anything on the page. When the request is done, onstop event on status is called and hides the modal panel.

Short and neat, right?

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.