⁠15.8. <rich:progressBar>

The <rich:progressBar> component displays a progress bar to indicate the status of a process to the user. It can update either through Ajax or on the client side, and the look and feel can be fully customized.
⁠
<rich:progressBar>

Figure 15.8. <rich:progressBar>

⁠15.8.1. Basic usage

Basic usage of the <rich:progressBar> component requires the value attribute, which points to the property that holds the current progress value. When the value is greater than or equal to the minimum value (0 by default), the progress bar becomes active, and starts sending Ajax requests if in ajax mode.
⁠

Example 15.6. Basic usage

​<rich:progressBar value="#{bean.incValue}" />

⁠15.8.2. Customizing the appearance

By default, the minimum value of the progress bar is 0 and the maximum value of the progress bar is 100. These values can be customized using the minValue and maxValue attributes respectively.
The progress bar can be labeled in one of two ways:
Using the label attribute
The content of the label attribute is displayed over the progress bar.
⁠

Example 15.7. Using the label attribute

​<rich:progressBar value="#{bean.incValue}" id="progrs" label="#{bean.incValue} % complete"/>
Using nested child components
Child components, such as the JSF <h:outputText> component, can be nested in the <rich:progressBar> component to display over the progress bar.
⁠

Example 15.8. Using nested child components

​<rich:progressBar value="#{bean.incValue}">
​    <h:outputText value="#{bean.incValue} % complete"/>
​</rich:progressBar>
Define the initial and finish facets to customize the progress bar's appearance before progress has started and after progress has finished. When the current progress bar value is less than the minimum value, the initial facet is displayed. When the current progress bar is greater than the maximum value, the finish facet is displayed.
⁠

Example 15.9. Initial and finished states

​<rich:progressBar value="#{bean.incValue1}">
​    <f:facet name="initial">
​        <h:outputText value="Process has not started"/>
​    </f:facet>
​    <f:facet name="finish">
​        <h:outputText value="Process has completed"/>
​    </f:facet>
​</rich:progressBar>

⁠15.8.3. Update mode

The mode for updating the progress bar is determined by the mode attribute, which can have one of the following values:
ajax
The progress bar updates in the same way as the <a4j:poll> component. The <rich:progressBar> component repeatedly polls the server for the current progress value.
client
The progress bar must be explicitly updated on the client side through the JavaScript API.

⁠15.8.4. Using set intervals

The <rich:progressBar> component can be set to constantly poll for updates at a constant interval. Use the interval component to set the interval in milliseconds. The progress bar is updated whenever the polled value changes. Polling is only active when the enabled attribute is set to true.
⁠

Example 15.10. Using set intervals

​<rich:progressBar value="#{bean.incValue1}" id="progress" interval="900" enabled="#{bean.enabled1}"/>

⁠15.8.5. JavaScript API

The <rich:progressBar> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:
getValue()
Return the current value displayed on the progress bar.
setValue()
Set the current value to display on the progress bar.
getMinValue()
Return the minimum value for the progress bar.
getMaxValue()
Return the maximum value for the progress bar.
disable()
Disables the progress bar.
enable()
Enables the progress bar.
isEnabled()
Returns a boolean value indicating whether the progress bar is enabled.

⁠15.8.6. Reference data

  • component-type: org.richfaces.ProgressBar
  • component-class: org.richfaces.component.UIProgressBar
  • component-family: org.richfaces.ProgressBar
  • renderer-type: org.richfaces.ProgressBarRenderer

⁠15.8.7. Style classes and skin parameters

⁠

Table 15.6. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-pb-lbl
This class defines styles for labels on the progress bar.
No skin parameters.
.rf-pb-prgs
This class defines styles for the progressed portion of the progress bar.
panelBorderColor
border-color
selectControlColor
background-color
.rf-pb-init, .rf-pb-fin
These classes define styles for the initial state and finished state.
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size