Progress Bar (mx.controls.ProgressBar)

A ProgressBar control provides a visual representation of the progress of a task over time.

There are two types of ProgressBar controls:

A determinate ProgressBar control is a linear representation of the progress of a task over time. You use a determinate ProgressBar when the scope of the task is known.
An indeterminate ProgressBar control represents time-based processes for which the scope is not yet known. As soon as you can determine the scope, you may want to use a determinate ProgressBar control.

ProgressBar Flex Example

The example code below demonstrates a simple, indeterminate ProgressBar.

   <mx:ProgressBar indeterminate="true" minimum="0" maximum="100" label="Indeterminate">
   </mx:ProgressBar>

ProgressBar Properties, Methods, and Events

Commonly used properties:

indeterminate:Boolean - whether the ProgressBar control has a determinate or indeterminate appearance
mode:String - specifies the method used to update the bar (event, polled, or manual)
minimum:Number - the minimum progress value (primarily for manual mode)
maximum:Number - the maximum progress value (primarily for manual mode)
label:String - the text of the associated label
labelPlacement:String - where to position the associated text (right, left, bottom, or top)

Commonly used methods:

setProgress( value:Number, total:Number ):void - updates the progress bar
- value:Number - the current progress value
- total:Number - the total progress value

Commonly used events:

complete - dispatched when the load completes (in event or polled mode)
progress - dispatched as the progress is updated (in event or polled mode)

ProgressBar Modes

A determinate ProgressBar must have its mode property specified to determine how it will be updated.

Manual Mode

Set a ProgessBar's mode to manual when you want to use the setProgress() method to update progress.

   <mx:ProgressBar id="progressBar" minimum="100" maximum="100" mode="manual"
       label="0%" labelPlacement="bottom">
   </mx:ProgressBar>

The ProgressBar setProgress() method takes two arguments: the current value and the total value.

      // set the progress to 10 of 100 (10%)
      progressBar.setProgress( 10, 100 );

The ProgressBar linked to a Timer example below fully demonstrates a ProgressBar in manual mode being updated with calls to setProgress().

Event Mode

TODO...

Polled Mode

TODO...

ProgressBar Examples

ProgressBar linked to a Timer

The following example code shows a determinate ProgressBar linked to a Timer. The ProgressBar's mode is set to manual so we can use the setProgress() method to update it.

ProgressBar and Timer Flex Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   creationComplete="init()">
   
   <mx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import flash.utils.Timer;
         import flash.events.TimerEvent;
         
         public var timer:Timer = new Timer( 1000 );
         public var count:Number = 0;
         
         public function init():void
         {
            this.timer.addEventListener( TimerEvent.TIMER, updateProgress );
            
            this.timer.start();
         }
         
         protected function updateProgress( timerEvent:TimerEvent ):void
         {
            count++;
            
            this.progress.setProgress( (count % 10), 100 );
            this.progress.label = (count % 10) + "%";
         }
      ]]>
   </mx:Script>
   
   <mx:ProgressBar id="progress" minimum="100" maximum="100" mode="manual"
       label="0%" labelPlacement="bottom">
   </mx:ProgressBar>
   
</mx:Application>