How to create a "Processing" panel in RichFaces

Supose you have a page with a form inside to edit some values, and you want to show a "Processing" or "Please Wait" message when you click on a "save" button on that form. In RichFaces you can use the popupPanel compoment to this purpose.

This article assumes you are using RichFaces 4, and JSF/Facelets

I've created this wait.xhtml file containing only the wait panel to favor reusability and maintainability.


<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">

<a4j:status name="waitStatus" onstart="#{rich:component('wait')}.show();"
onstop="#{rich:component('wait')}.hide();" />
<rich:popupPanel id="wait" autosized="true"
modal="false" moveable="false" resizeable="false" zindex="2005">
<f:facet name="header">
<h:outputText value="Processing" />
</f:facet>
<h:outputText value="Please wait..." />
</rich:popupPanel>
</ui:composition>


In the page where you have the form, add the reference to that file:

...
<ui:include src="../wait.xhtml" />
</h:form>

Somewhere inside the form you'll have a "Save" button that processes the input:


<a4j:commandButton value="Save"
action="#{bBean.save}"
status="waitStatus"
oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('ap')}.hide(); return false;">
</a4j:commandButton>

The key part for the wait popup panel to appear only when the "Save" commandButton is clicked, is the status="waitStatus" that links the action of the commandButton to the a4j:status that opens the wait panel.

If you don't do it this way, the wait panel will popup upon every ajax call  in the editing form (autocomplete fields, a4j:ajax calls, etc).

Hope this helps, comment if you have problems with this approach.