Hourglass display with Richfaces

Hourglass display with Richfaces

Yesterday we started with a preliminary application test to be prepared for the final integration test next month.
Since the web based application works on large datasets which could sometimes lead to extended response times at
frontend level, one of the first things the users asked for, were a hourglass or something alike to show that the
server is still processing the request.

Since the application is based on Richfaces I searched for any feature that could help me and discovered the status tag.

The first thing I wanted to try out, was to display a message simply informing the user that the current request is still in processing mode. In order to do so, only two things needs to be done:

• Define the message display behaviour using the status tag


• Bind the status handler to a control that sends an ajax request to the backend


<a4j:status id="testStatus" startText="Request processing started" stopText="Request processing ended"/>
<a4j:commandButton action=".." value=".." status="testStatus"/>


The next time the user clicks on the command button a message will appear and inform him about the processing state.

Well, that kind of behaviour gives your users a slight hint on what the system is currently doing, but hey, an overlay graphic displaying a hourglass or alike is much cooler, isn't it. Therefore I continued to search for an appropriate solution to that
problem and finally found one written by Markus Kühle (in german only). Compared to my little example above, the main concept does not change. A status handler is defined as well as the binding with the command button. In order to create an overlay message, we need to work with cascade style sheets:


* html body { margin: 0; overflow-y: hidden; padding: 0; }

#globalStatusDiv {
position: relative;
left: 50%;
top: 200px;
width: 100px;

text-align: center;
margin-left: -50px;
height: 25px;
line-height: 25px;
background-color: #FFF;
padding: 2px 15px 2px 10px;
color: #000;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
z-index: 10000;
}

#globalStatusDiv img {
vertical-align: middle;
}


Next, we must define a div which contains the information to be displayed and bind it to a status tag:


<link href="/css/status.css" rel="stylesheet" />
<div id="globalStatusDiv" style="display:none;">
<img src="/images/working.gif"/> %<h:outputText value="#{generalMsg.general_loading_message}"/>
</div>
<a4j:status id="globalWaitStatus" forceId="true" layout="none"
onstart="jQuery('#globalStatusDiv').fadeIn('fast')"
onstop="jQuery('#globalStatusDiv').fadeOut('slow')" />


The binding with a command button does not differ from the simple example above:


<a4j:commandButton action=".." value=".." status="globalWaitStatus"/>