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"/>


FileUpload with Richfaces

The other day I had an assignment to write a CSV upload and download interface for a JSF (Richfaces) based web application. On first sight, that isn't a really tricky task since it was realised many times before by a lot of people - including me. Therefore I was quite confident to implement that feature quite quickly ... until it came to the point where I tried out what I implemented. Unfortunately, the file was not uploaded although my code wrote the correct filename to the log output. This is my sourcecode:

public void uploadListener(final UploadEvent uploadEvent) {
UploadItem uploadItem = uploadEvent.getUploadItem();
String fileName = uploadItem.getFileName();
String csvFile = new String(uploadItem.getData());
...
}

The method signature follows the requirements set by richfaces in order for a method to receive incoming upload events. Usually the upload item variable should contain all required information, especially the required file data.

The reason why the upload item is not filled as expected, is the AJAX filter option createTempFile which is set to true by default. Under these circumstances the uploaded file data will not be made available to the upload item variable, but is written into a temporary file on disk. To change this behavior, its necessary to switch the config option of org.ajax4jsf.Filter to true in the web.xml.