rich:progressBar is a component which could be used to display progress of any client or server side process.

In order to display progress of some server side process(mode="ajax") component uses polling method. It just polls server to get the value which should be updated by server side process.

Next simple example shows you progress bar which polls server every two second to get new progress value

Server Side

HideView Source

<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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

    <h:form>
        <a4j:outputPanel id="progressPanel">
            <rich:progressBar value="#{progressBarBean.currentValue}"
                interval="2000" label="#{progressBarBean.currentValue} %"
                enabled="#{progressBarBean.enabled}" minValue="-1" maxValue="100"
                reRenderAfterComplete="progressPanel">
                <f:facet name="initial">
                    <br />
                    <h:outputText value="Process doesn't started yet" />
                    <a4j:commandButton action="#{progressBarBean.startProcess}"
                        value="Start Process" reRender="progressPanel"
                        rendered="#{progressBarBean.buttonRendered}"
                        style="margin: 9px 0px 5px;" />
                </f:facet>
                <f:facet name="complete">
                    <br />
                    <h:outputText value="Process Done" />
                    <a4j:commandButton action="#{progressBarBean.startProcess}"
                        value="Restart Process" reRender="progressPanel"
                        rendered="#{progressBarBean.buttonRendered}"
                        style="margin: 9px 0px 5px;" />
                </f:facet>
            </rich:progressBar>
        </a4j:outputPanel>
    </h:form>
</ui:composition>

<<Hide Source

HideView Java Bean Source

/**
 * 
 */
package org.richfaces.demo.progressBar;

import java.util.Date;

/**
 * @author Ilya Shaikovsky
 *
 */
public class ProgressBarBean {
    
    private boolean buttonRendered = true;
    private boolean enabled=false;
    private Long startTime;
    
    public ProgressBarBean() {
    }
    
    public String startProcess() {
        setEnabled(true);
        setButtonRendered(false);
        setStartTime(new Date().getTime());
        return null;
    }

    public Long getCurrentValue(){
        if (isEnabled()){
            Long current = (new Date().getTime() - startTime)/1000;
            if (current>100){
                setButtonRendered(true);
            }else if (current.equals(0)){
                return new Long(1);
            }
            return (new Date().getTime() - startTime)/1000;
        } if (startTime == null) {
            return Long.valueOf(-1);
        }
        else
            return Long.valueOf(101);
    }
    
    public boolean isEnabled() {
        return enabled;
    }

    public void setEnabled(boolean enabled) {
        this.enabled = enabled;
    }

    public Long getStartTime() {
        return startTime;
    }

    public void setStartTime(Long startTime) {
        this.startTime = startTime;
    }

    public boolean isButtonRendered() {
        return buttonRendered;
    }

    public void setButtonRendered(boolean buttonRendered) {
        this.buttonRendered = buttonRendered;
    }
}

<<Hide Source

In order to customize progressBar next main attributes used:

• minValue, maxValue - defines boundary values for progress bar
• value - value binding to property which kept process progress
• enabled - boolean attribute. If false progress stops polling

Also next two facets could be defined for states customization:

• initial rendered before progress started
• complete rendered after process complete

Next example shows client side progress bar. Progress Bar JS API should be used to update progress value from client side process.

Client Side

Process doesn't started yet

Process Done

Start Progress

HideView Source

<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:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
      
      <script>
//<![CDATA[
        var counter = 1;
        var intervalID;
            function updateProgress(i) {
                $('form:progressBar').component.setValue(counter*5);
                if ((counter++)>20){
                    clearInterval(intervalID);
                    document.getElementById('button').disabled=false;
                }
            }
            
            function startProgress(){
                counter=1;
                document.getElementById('button').disabled=true;
                $('form:progressBar').component.enable();
                $('form:progressBar').component.setValue(1);
                intervalID = setInterval(updateProgress,5000);
            }
//]]> 
      </script>
    <h:form id="form">
          <rich:progressBar mode="client" id="progressBar">
            <f:facet name="initial">
                <h:outputText value="Process doesn't started yet"/>
            </f:facet>
            <f:facet name="complete"> 
                <h:outputText value="Process Done"/>
            </f:facet>
          </rich:progressBar>
          <button type="button" onclick="startProgress();" style="margin: 9px 0px 5px;" id="button">Start Progress</button>
    </h:form>
</ui:composition>

<<Hide Source

Next JS API functions should be used to update progress:

• enable()
• disable()
• setValue(newValue)
• setLabel(newLabel)