Progress

For mrm’s TV Guide I needed a visual representation for displaying progress (i.e., saving data to the local database), so I used the built-in ProgressBar component. What’s nice about this component is that you can use three different methods to update the progress bar. You choose one of the methods by setting the mode property in MXML to one of the following values:

• event The control specified by the source property must dispatch progress and completed events. The ProgressBar control uses these events to update its status. The ProgressBar control only updates if the value of the source property extends the EventDispatcher class
• polled The source property must specify an object that exposes bytesLoaded and bytesTotal properties. The ProgressBar control calls these methods to update its status.
• manual You manually update the ProgressBar status. In this mode you specify the maximum and minimum properties and use the setProgress() property method to specify the status. This mode is often used when the indeterminate property is true

In ActionScript, you can use use the following constants to set this property: ProgressBarMode.EVENT, ProgressBarMode.POLLED, and ProgressBarMode.MANUAL.

At first I used the manual mode, but I soon abandoned it because It didn’t feel right. I quickly dismissed the polled method because basically I had to do the same thing as manual mode, only I had to update an object with bytesLoaded and bytesTotal properties and I also felt that it wasn’t responsive enough.

But it did give me an idea: Hey, why don’t I build my own data provider type for the ProgressBar component! And this is what I came up with – The Progress class:

package mrm
{
    import flash.events.EventDispatcher;
    import flash.events.ProgressEvent;
 
    public class Progress extends EventDispatcher
    {
        private var _bytesLoaded:Number
        private var _bytesTotal:Number;
 
        public function Progress(bytesLoaded:Number=0, bytesTotal:Number=0)
        {
            setValues(bytesLoaded, bytesTotal);
        }
 
        public function set bytesLoaded(value:Number):void {
            _bytesLoaded = value;
            dispatch();
        }
 
        public function get bytesLoaded():Number {
            return _bytesLoaded;
        }
 
        public function set bytesTotal(value:Number):void {
            _bytesTotal = value;
            dispatch();
        }
 
        public function get bytesTotal():Number {
            return _bytesTotal;
        }
 
        public function setValues(bytesLoaded:Number, bytesTotal:Number):void {
            _bytesLoaded = bytesLoaded;
            _bytesTotal = bytesTotal;
            dispatch();
        }
 
        private function dispatch():void {
            dispatchEvent(new ProgressEvent(ProgressEvent.PROGRESS, false, false, _bytesLoaded, _bytesTotal));
        }
 
        public function clear():void {
            setValues(0, 0);
        }
    }
}

I’d say the class methods are pretty easy to comprehend, so I won’t go into much detail about them. Because the class extends EventDispatcher, it can dispatch events so it can be used as source for a ProgressBar component using the default event mode. Basically, whenever you change one of its properties (bytesLoaded or bytesTotal), it fires a ProgressEvent.

This way, you can have one Progress object used as source for multiple ProgressBars and not even care about them! You just set the source property and update the progress on the object and Flex does the rest for you. Neat, huh?

Here’s a demo:

[kml_flashembed movie="http://blogu.lu/mrm/files/2009/01/progressdemo.swf" width="230" height="70" /]

And the Flex Builder Project source code

Now here’s the same project, but this time using Flex 4 SDK (codename “Gumbo”):

[kml_flashembed movie="http://blogu.lu/mrm/files/2009/01/progressdemogumbo.swf" width="230" height="70" /]

And the Flex Builder Project source code

It works with Gumbo too!