IntroductionThe JSF framework provides an easy to use AJAX event handling mechanism. The
jsf.jslibrary is included in Mojarra and MyFaces. There are two particular methods of interest:
jsf.ajax.addOnEvent(callback). I will be covering the latter handler.
The JsDoc does not really explain the
addOnEventis 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.
EventsThe callback is invoked during the AJAX request and response lifecycle. The status passed to the callback are listed below.
|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.
CodeThe 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.
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.
jsf.ajax.addOnEvent(callback)is all it takes to make a cool progress loader.