 |
| Please wait... |
Introduction
The JSF framework provides an easy to use AJAX event handling mechanism. Thejsf.js library is included in Mojarra and MyFaces. There are two particular methods of interest: jsf.ajax.addOnError(callback) and jsf.ajax.addOnEvent(callback). I will be covering the latter handler.The JsDoc does not really explain the
jsf.ajax.addOnEvent(callback) code very well. Since it is Javascript, you can read it, but I think a simple example of its flexibility with some comments might work better.Using the
addOnEvent is very simple. You register the callback, and it gets called during the lifecycle. The important thing here to remember is that the callback must be a function. Otherwise, it will throw an error. You can control what event processing occurs during the lifecycle.Events
The callback is invoked during the AJAX request and response lifecycle. The status passed to the callback are listed below.| Event | Description |
|---|---|
| begin | This is the start of the AJAX request. |
| complete | This is invoked right after AJAX response is returned. |
| success | This is invoked right after successful processing of AJAX response and update of HTML DOM. |
Based on the status, we can take appropriate action on the AJAX event. A great example to demonstrate AJAX event handling is to provide feedback to the user to indicate the status of their request. I will demonstrate how to create an AJAX based progress loader to demonstrate the events.
Code
The code for our AJAX loader is very simple, and could be moved into a composite component if necessary. The NetBeans developed Maven project can be downloaded from the references section below.index.xhtml
This code controls our progress bar by making changes to the CSS in DOM. The CSS idea is not mine, but it is clever. Here is the CSS.
loader.css
A simple CSS layout, and our Javascript callback to
jsf.ajax.addOnEvent(callback) is all it takes to make a cool progress loader.
No comments:
Post a Comment