Progress Indicator

Progress Indicators are quite easy to use in bbUI. Simply add an HTML5 <progress> element and you are good to go

    <progress max="100" value="10"></progress>

The control will be displayed according to the UI specifications found on the target BlackBerry operating system. When styling is applied it will stretch the slider to 100% of the width of its containing element/div. The highlight color of the slider will use the bb10HighlightColor provided in the toolkit init() function for BlackBerry 10 and will use a standard green color for other BlackBerry operating systems.

You can use the max and value attributes to set the initial state of your indicator.

JavaScript Interface

To move the progress indicator there has been a setValue(int) function added to the <progress> element. This allows the value to be set and also apply the visual styling

    function setMyValue() {
       var value = 10;
       document.getElementById('myprogress').setValue(value);
    }

When you set the value of the progress indicator it is best to do it with a setTimeout so that the UI thread gets a chance to paint.

You can also move your progress bar to a "paused" state by using the pause() function added to the <progress> element. This gives a different visual cue compared to the progress continuing.

    function pauseMyIndicator() {
       document.getElementById('myprogress').pause();
    }

Changes Coming in v0.9.3

NOTE: These changes are currently in the "next" branch and will make their way into the official 0.9.3 release

Progress indicators will no longer have the pause() function. This has now been replaced with a setState(state) function.

The state of a progress bar can be one of NORMAL=0, PAUSED=1 or ERROR=2. These constants have been added to the bb.progress object for convenience.

    bb.progress.NORMAL
    bb.progress.PAUSED
    bb.progress.ERROR

By default the progress indicator is in the NORMAL state. When you set the progress indicator state to PAUSED, it will draw the indicator in a yellow color. If you set the state of the progress indicator to ERROR, it will be drawn with a red color.

    document.getElementById('myIndicator').setState(bb.progress.PAUSED);