Setting the value of a Flex Progress Bar

by Peter deHaan on February 16, 2008

This question came up on the Adobe Flex Forums the other day and I was a little surprised to see that I hadn’t already covered the topic.

The following example shows how you can manually set the progress of a ProgressBar in Flex by using the setProgress() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/16/setting-the-value-of-a-flex-progress-bar/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                progressBar.setProgress(evt.value, progressBar.maximum);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="setProgress():">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="360"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10"
                        change="slider_change(event);"
                        width="{progressBar.width}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            minimum="0"
            maximum="360" />

</mx:Application>

View source is enabled in the following example.

Tagged as: setProgress()

{ 33 comments… read them below or add one }

1 me April 4, 2008 at 6:21 am

does not work

2 peterd April 4, 2008 at 8:15 am

me,

What isn’t working?

3 William April 4, 2008 at 9:48 am

I want to make an indeterminate progress bar that just spins. I want to be able to make it visible, then turn it on so that it just spins, then turn it off and make it invisible…all programatically. Is there a reference for this somewhere?

The context: I am submitting a “commit” to a custom data service. I want to show a spinning icon until the commit is reported as “confirmed”.

Thanks

4 peterh April 28, 2008 at 12:10 pm

Demo doesn’t work for me either – I think that moving the slider will set the progress bar to that %, but in this demo, moving the slider bar has no effect on the progressbar and nothing changes besides the slider’s position and tooltip.

5 peterd April 28, 2008 at 12:16 pm

peterh,

Interesting. The example in the HTML page above works for me on two different machines.
Which OS and Flash Player version are you using?
http://blog.flexexamples.com/about-you/

Peter

6 sunild May 17, 2008 at 1:51 am

Hi Peter,

Thanks for your awesome site!

As some people have pointed out, I found this example to be broken, but only on my Mac. Works fine on an XP box. Here are the Flash versions I am using:

Mac: OS X 10.4, Flash: MAC 9,0,124,0 (debug)

Windows XP: WIN 9,0,115,0 (debug)

Sunil

7 Julien Graglia May 29, 2008 at 12:05 am

Didn’t work for me neither. (the slider has no effect on the progress bar)
In both linux and Xp :

Xp Pro SP2, IE7, Flash 9,0,124,0 Debug

Ubuntu 8.04, Firefox 3.0b5, Flash 9,0,124,0 Debug

8 peterd May 29, 2008 at 12:31 am

Fascinating. I’m using WIN 9,0,115,0 (debug) on Win XP SP2/IE7 and the previous example works fine for me.

Peter

9 Anonymous July 11, 2008 at 1:15 pm

Hi,

Its not working for me also….

progressBar.maximum is 0 at the time of change event of slider…

dfodiode

10 Marcel Ray July 19, 2008 at 9:46 am

Convinced that I was doing something wrong with setting progress in my app, I stumbled upon this example. Lo and behold, it doesn’t work for me either!

I’m on Mac OS 10.5.4, player version 9.0.124 debug.

Anyone able to shed any light on this?

11 GregL August 4, 2008 at 9:54 am

This example does not work for me either.

Incidentally, I’m using 9,0,124,0 (debug)…and it looks like everyone else who can’t get it to work is using the 9,0,124,0 version of the player.

12 Nick August 23, 2008 at 11:05 am

This looks to be like a bug in flex. I see same problem. “progressBar.maximum” is getting defaulting to 0. Change it to 360, and it will run fine.

13 ian September 8, 2008 at 10:39 am

10,0,2,26 mac debug is also not working

14 peterd September 8, 2008 at 12:41 pm

Thanks everybody,

The workaround seems to be using slider.maximum or hardcoding 360 instead of relying on progressBar.maximum.

I’ve filed a bug for this at http://bugs.adobe.com/jira/browse/SDK-16752 and we will investigate it further to see if this is a Flex SDK issue or possibly a Flash Player issue.

Feel free to add any bug-related comments to the bug in the Flex bug base, SDK-16752.

Peter

15 aryan September 27, 2008 at 4:37 pm

this.mode = "manual";

u have to set the mode to manual orelse it wouldn’t work

16 antonic November 17, 2008 at 12:18 pm

hi guys,

i first stumbled into a progress bar that does not “progress”, even with a manual mode, minimum and maximum set explicitly. when i reach the end of the loop, the bar suddenly shows 100%!!!. i looked up and found this page, and then i realized it was not about my code (very simple code looping through an array of 3600 items — sample below).

when i debug and step into ProgressBar.as/_setProgress(), the arguments are being passed correctly to the private vars _value, and _maximum.

still no solution. anyone else?

thanks.

—– code sample —
MXML:

<mx:ProgressBar
	id="progressBar"
	labelPlacement="center"
	mode="{ ProgressBarMode.MANUAL }"
	minimum="0"
/>

AS3:

var progressBarValue:uint = 0;
var progressBarMaximum:Number = file.split("\n").length; //3600 lines

trace( progressBarMaximum, "lines" );
progressBar.maximum = progressBarMaximum;

for each ( var line:String in file.split("\n") ) {

    /* get lines that start with a digit */
    if ( line.match(/^\d+/) ) {
        progressBar.setProgress( ++progressBarValue, progressBarMaximum);

—– end of code sample —-

17 antonic November 17, 2008 at 12:25 pm

forgot to mention that i am using
WinXP: IE7 with Flash 10,0,12,36 / FF3 with Flash 9,0,124,0

18 antonic November 17, 2008 at 12:31 pm

Hey guys ! This example works though!
http://blog.flexexamples.com/2007/10/07/changing-a-flex-progressbar-controls-direction/

What gives?!

19 antonic November 18, 2008 at 8:28 am

A hint:

http://bugs.adobe.com/jira/browse/SDK-16199
“Basic components don’t work when compiled in Flex 4 and run on player 9 (TextInput, TextArea, DateField, NumericStepper etc)”

20 vivek November 23, 2008 at 10:03 pm

I tried on Mozilla on Windows XP it did not work but it works fine on IE on teh same machine, looks like some bug with Flex version for Mozilla

21 Scott January 10, 2009 at 8:24 pm

I have also tried in Flash 9 and 10. The example Antonic posted works in both, but the solution above does not. Any idea on what the difference is between these two. I’m trying to add a progressbar on a popup with no success and can’t tell if it’s this issue, or a problem of single threading in flash.

22 Oli Farago February 1, 2009 at 4:57 pm

It didn’t work for me until I set:

mode=”Manual”

On the progress bar component.

Then it worked fine.

Hope this helps someone
Oli

23 Hr0n0s April 7, 2009 at 7:09 pm

I think, that problem in Flash Player cause this example work fine in Flash Player 9,0,115,0 and do not work in Flash Player 10,0,22,87

24 Josh April 30, 2009 at 8:50 am

I am having the same issue with the progress bar not getting updated until after a loop. I have run it in manual mode and event mode dispatching my own progress events and no dice either way. I am also working on a MAC os x 10.4. Has anybody figured out why the progress bar will not update in this situation?

25 Human Wannabe April 30, 2009 at 9:21 am

The example was not working for me either due to the “manual” issue.

I would suggest to peterd correct the example code, changing the progress-bar definition from:

    <mx:ProgressBar id="progressBar"
            mode="manual"
            minimum="0"
            maximum="360" />

to:

    <mx:ProgressBar id="progressBar"
            mode="{ ProgressBarMode.MANUAL }"
            minimum="0"
            maximum="360" />

26 Nej July 9, 2009 at 9:33 pm

Doesn’t work.

27 micheal August 12, 2009 at 6:57 am

I found that the minimum and maximum values need to be set in ActionScript (I set it in a creationComplete handler)
Setting it in the mxml does not work. Most likely to be a loading order issue

28 SivaPrasad G V September 10, 2009 at 10:08 am

The example was not working for me even i changed the mode =”{ ProgressBarMode.MANUAL }”.
This will work when you added source attribute to progressbar tag.
source=”slider”

29 EXAE November 4, 2009 at 10:22 am

This example work 100% :

http://livedocs.adobe.com/flex/3/langref/mx/controls/ProgressBar.html

30 ruth January 4, 2010 at 5:37 am

ain’t working.

31 Bron Davies January 26, 2010 at 10:09 am

the only problem with this is that you need to set mode=”manual” as well as the minimum and maximum values in actionscript before calling setProgress. It appears to be a bug in the ProgressBar component when using manual mode. If you don’t then it will work sometimes and other times not depending on what you use it for.

32 Kola February 18, 2010 at 3:33 pm

Someone can help me…?
I have Tile List with buttons and their lables, When I am doing itemRollOver ( I am sending rolled button label to the text editor with time delay. How to set proegressBar which will show me progress of this timer event?? Please help
private var currentValue:String;
private function rollOver(e:TimerEvent):void{
rte.text+=currentValue;
}
public var timer3:Timer;
private function TileListSend(e:ListEvent):void{
rte.text+= e.itemRenderer.data.label;
timer3.addEventListener(TimerEvent.TIMER, rollOver);
timer3.start();

33 Peter deHaan February 18, 2010 at 8:35 pm

@Kola,

I typically use the timer event to track when to update a progress bar and then use the timerComplete event to track when the timer has finished.

Something like the following may help get you started:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            protected var timer3:Timer;
 
            protected function init():void {
                timer3 = new Timer(50 /*delay in ms*/, 150 /*repeatCount*/);
                timer3.addEventListener(TimerEvent.TIMER, timer3_timerHandler);
                timer3.addEventListener(TimerEvent.TIMER_COMPLETE, timer3_timerCompleteHandler);
            }
 
            protected function timer3_timerHandler(evt:TimerEvent):void {
                pBar.setProgress(timer3.currentCount, timer3.repeatCount);
            }
 
            protected function timer3_timerCompleteHandler(evt:TimerEvent):void {
                Alert.show("Timer done");
                timer3.reset();
            }
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                if (timer3.running) {
                    timer3.stop();
                    timer3.reset();
                }
                timer3.start();
            }
        ]]>
    </mx:Script>
 
    <mx:ProgressBar id="pBar" label="%1 of %2 (%3%%)" labelPlacement="center" mode="manual" />
    <mx:Button id="button1" label="start timer" click="button1_clickHandler(event);" />
 
</mx:Application>

There should also be a few other Timer examples around here at http://blog.flexexamples.com/category/timer/ or just search for “Timer” in the search box above: http://blog.flexexamples.com/?s=Timer

Peter

Setting the value of a Flex Progress Bar

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Setting the value of a Flex Progress Bar

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising