JSF Status bar / connection status information - ajax

Question

I would like to implement a kind of information for my users about the progress status. I have found several components like:
Richfaces status or IceFaces onnection Status
So, I would like to add something like that to my page especially for ajax requests. What's the easiest way to implement it? I would not like to use one of those components, rather programming my own one but I can't imagine how and how much effort it takes :-)
I am thankfull for ideas...

Answer 1

The standard JSF implementation doesn't provide a ready-to-use component for this. The JSF 2.0 specification however outlines the following in chapter 13.3.5.2:
13.3.5.2 Monitoring Events For All Ajax Requests
The JavaScript API provides the jsf.ajax.addOnEvent function that can be used to register a JavaScript function
that will be notified when any Ajax request/response event occurs. Refer to Section 14.4 “Registering Callback
Functions” for more details. The jsf.ajax.addOnEvent function accepts a JavaScript function argument that will be
notified when events occur during any Ajax request/response event cycle. The implementation must
ensure the JavaScript function that is registered must be called in accordance with the events outlined in
Section TABLE 14-3 “Events”.
You can find here a blog of one of the Mojarra developers which contains basic examples. Here's an extract of relevance:
<h3> Status:</h3>
<textarea id="statusArea" cols="40" rows="10" readonly="readonly" />
A simple textarea, not even hooked
into the backend server data model.
Then in our javascript (for the demo,
in a separately loaded file, though it
could just as easily be in page) we
have:
var statusUpdate = function statusUpdate(data) {
var statusArea = document.getElementById("statusArea");
var text = statusArea.value;
text = text + "Name: "+data.source.id;
if (data.type === "event") {
text = text +" Event: "+data.name+"\n";
} else { // otherwise, it's an error
text = text + " Error: "+data.name+"\n";
}
statusArea.value = text;
};
// Setup the statusUpdate function to hear all events on the page
jsf.ajax.addOnEvent(statusUpdate);
jsf.ajax.addOnError(statusUpdate);