JSF Status bar / connection status information..

Question

Hello folks,

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);