Status message using Richfaces

Goal

Show status of a request (work in progress), when using Richfaces 3.3.x

Description

This recipe explains how to use richfaces to show the user the status of a request being sent to the server

How to

First, in our template page we will add the status component, named, for instance, generalStatus as follows:

<f:view xmlns="http://www.w3.org/1999/xhtml"
  ...
  xmlns:rich="http://richfaces.org/rich"
  xmlns:a4j="http://richfaces.org/a4j"
  contentType="text/html">

  <a4j:status id="generalStatus" forceId="true"
    onstart="onRequestStart()" onstop="onRequestEnd()" />
  ...
</f:view>

Notice the javascript functions onRequestStart() and onRequestEnd() associated to the onstart and onstop events, respectively. These functions, shown in the following snippet, control when the status panel should be displayed and hidden.

var waitDialogShown = false;
var useTimerBeforeShowWaitDialog = true;
var waitDialogTimeout = 50;
var waitDialogTimer;

function showWaitDialog() {
  // avoid attempt to show it if it is already shown
  if (!waitDialogShown) {
    Richfaces.showModalPanel('wait-dialog');
    waitDialogShown = true;
  }
}
function onRequestStart() {
  if (useTimerBeforeShowWaitDialog) {
    waitDialogTimer = setTimeout("showWaitDialog();", waitDialogTimeout);
  } else {
    showWaitDialog();
  }
}
function onRequestEnd() {
  if (waitDialogShown) {
    Richfaces.hideModalPanel('wait-dialog');
    waitDialogShown = false;
  } else if (useTimerBeforeShowWaitDialog && waitDialogTimer) {
    clearTimeout(waitDialogTimer);
  }
}

Next, we define the modal panel that will present the information to the user that something is going on. In the snippet, we simply show a (i18n) message “Processing…” and we make sure the message is shown in a single line with the style definition white-space: nowrap; (notice that defining styles next to the component is not considered a best practice but I did this here for demonstration purposes!):

  <rich:modalPanel id="wait-dialog" resizeable="false" autosized="true"
    moveable="false" top="0" shadowOpacity="0" width="90">
    <h:outputText value="#{messages['label.processing']}" style="white-space: nowrap;" />
  </rich:modalPanel>

And that is all. Now, the final piece is referencing the status with id generalStatus to the processing message to be presented to the user. E.g., as in the following:

<a4j:commandButton id="submit" reRender="loginForm"
  status="generalStatus" value="#{messages['operation.login']}"
  action="#{loginController.login}" />

Explanations

Although simple, this recipe has the ability to provide the user with useful information regarding an interaction with the server and that she should wait for it to finish. Additionally, and because the message is shown in a popup panel, no other interaction is possible until the request ends or the user refreshes the browser directly!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s