The rich:progressBar displays a standard progress widget, and allows for additional facets such as initial, and finish state customizations. In Ajax mode you simply bind the bar to a bean property that returns a value between the 'minValue' and 'maxValue'. This value is then polled from the browser using the specified interval.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:form id="form"> <rich:progressBar mode="ajax" value="#{progressBarBean.currentValue}" interval="500" id="pb" enabled="#{progressBarBean.enabled}" minValue="0" maxValue="100"> <f:facet name="initial"> <h:panelGroup> <h:outputText value="Process hasn't started yet" /> <a4j:commandButton action="#{progressBarBean.startProcess}" value="Start Process" execute="@form" render="pb" rendered="#{progressBarBean.buttonRendered}" style="margin: 9px 0px 5px;" /> </h:panelGroup> </f:facet> <f:facet name="finish"> <h:panelGroup> <h:outputText value="Process Done" /> <a4j:commandButton action="#{progressBarBean.startProcess}" value="Restart Process" execute="@form" render="pb" rendered="#{progressBarBean.buttonRendered}" style="margin: 9px 0px 5px;" /> </h:panelGroup> </f:facet> <h:outputText value="#{progressBarBean.currentValue} %" /> <!-- Update the progress for each AJAX update --> <a4j:ajax event="begin" listener="#{progressBarBean.increment}" /> </rich:progressBar> </h:form> </ui:composition>
package org.richfaces.demo.progressBar; import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; /** * @author Ilya Shaikovsky */ @ManagedBean @ViewScoped public class ProgressBarBean implements Serializable { private static final long serialVersionUID = -314414475508376585L; private boolean buttonRendered = true; private boolean enabled = false; private int currentValue; public String startProcess() { setEnabled(true); setButtonRendered(false); setCurrentValue(0); return null; } public void increment() { if (isEnabled() && currentValue < 100) { currentValue += 2; if (currentValue >= 100) { setButtonRendered(true); } } } public boolean isEnabled() { return enabled; } public void setEnabled(boolean enabled) { this.enabled = enabled; } public boolean isButtonRendered() { return buttonRendered; } public void setButtonRendered(boolean buttonRendered) { this.buttonRendered = buttonRendered; } public int getCurrentValue() { if (!isEnabled()) { return -1; } return currentValue; } public void setCurrentValue(int currentValue) { this.currentValue = currentValue; } }