View Source

h2. Overview

Progress bar is a progress indicator that can work on the client side by itself or gets its progress update from the server using ajax.

h2. Getting Started

Client side only:
{panel}
{code:xml|borderStyle=dashed} <script type="text/javascript">
function begin()
{
 this.progressInterval = setInterval (
function()
{
clientSideBar.setValue(clientSideBar.getValue() + 10);
}
, 2000);
}

function stop()
{
clearInterval(this.progressInterval);
clientSideBar.setValue(0);
}
</script>
...
 <ace:panel>
<ace:progressBar widgetVar="clientSideBar" />
</ace:panel>
...
 <h:commandButton onclick="begin();" ... />
<h:commandButton onclick="stop();" ... />
{code}
{panel}Client polling server:
{panel}
{code:xml|borderStyle=dashed} <ace:progressBar widgetVar="#{upload.widgetVarName}" usePolling="true" pollingInterval="2000" value="#{upload.progressValue}" ... />
...
<h:commandButton onclick="#{upload.widgetVarName}.start();" ... />
{code}
{panel}
h2. Attributes
{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://www.icefaces.org/docs/v3_latest/ace/tld/ace/progressBar.html].{tip}
{panel}
*usePolling* specifies the mode of progressBar, in polling mode progress value is retrieved periodically from a backing bean.
{panel}
{panel}
*cancelListener*, *changeListener*, *completeListener* are the listeners for the different stages of the progress. In the change event you can get the value and percentage of the progress bar.
{panel}
{panel}
*pollingInterval* is time between polls to the server in milliseconds.
{panel}
h2. Event Listeners

| changeListener | Listener to be invoked when the value of the progress bar changes. |
| completeListener | Listener to be invoked when the value of the progress bar reaches the maximum. |
| cancelListener | Listener to be invoked when the progress is cancelled. |
h2. <ace:ajax/> support

The following events are supported by the nested <ace:ajax/> tag:

complete (default), cancel, change


h2. JavaScript APIs / Client Behaviours

The client side progress bar object is exposed through the global variable name specified in the *widgetVar* attribute. You can use the *getValue()* and *setValue()* methods to read and change the value. Use the *start()* and *cancel()* methods for polling. See Usage above for examples.



h2. Keyboard and ARIA Support


h2. Known Issues


h2. Other Resources