Setting the value of a Flex Progress Bar

By Peter deHaan On February 16, 2008 · 38 Comments

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 with: setProgress()

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

38 Responses to Setting the value of a Flex Progress Bar

me says:

April 4, 2008 at 6:21 am

does not work

Reply
peterd says:

April 4, 2008 at 8:15 am

me,

What isn’t working?

Reply
- Steve says:
  
  November 18, 2011 at 3:42 pm
  
  Not working for me either. When I drag the slider, nothing happens. I’m assuming the progress is supposed to be updated, but it does not. I’m using Firefox v8.0 and Mac 10.5.8 and my player version is MAC 10,2,152,33 (w/ a debug player) – hope this helps.
  
  Reply
  - Steve says:
    
    November 18, 2011 at 3:43 pm
    
    Started working again after I posted the previous comment – I reloaded the page and it stopped again. Very strange…
William says:

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

Reply
peterh says:

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.

Reply
peterd says:

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

Reply
sunild says:

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

Reply
Julien Graglia says:

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

Reply
peterd says:

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

Reply
Anonymous says:

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

Reply
Marcel Ray says:

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?

Reply
GregL says:

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.

Reply
Nick says:

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.

Reply
ian says:

September 8, 2008 at 10:39 am

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

Reply
peterd says:

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

Reply
aryan says:

September 27, 2008 at 4:37 pm
```
this.mode = "manual";
```
u have to set the mode to manual orelse it wouldn’t work

Reply
antonic says:

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 —-

Reply
antonic says:

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

Reply
antonic says:

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?!

Reply
antonic says:

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)”

Reply
vivek says:

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

Reply
Scott says:

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.

Reply
Oli Farago says:

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

Reply
Hr0n0s says:

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

Reply
Josh says:

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?

Reply

Human Wannabe says:

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" />

Nej says:

July 9, 2009 at 9:33 pm

Doesn’t work.

Reply
micheal says:

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

Reply
SivaPrasad G V says:

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”

Reply
EXAE says:

November 4, 2009 at 10:22 am

This example work 100% :

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

Reply
ruth says:

January 4, 2010 at 5:37 am

ain’t working.

Reply
Bron Davies says:

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.

Reply

Kola says:

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();

Peter deHaan says:

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

reg says:

May 28, 2010 at 8:02 am

:) That’s is good :)

Reply
Palanivelrajan says:

August 22, 2011 at 3:28 am

Hi i am doing one project in Adobe AIR..in this project i have to get values from the SAP server and to store it in local database…While doing this it take some 40 to 50 secs to upload all the datas to the loacl databse…so i want to use the progress bar to show how much % datas uploaded..but if i put the progressbar.setProgress() function inside a for loop…the final value only displayed…but i need the progress bar to show progress as the progress bar shown when we copying the data in windows…Is there any possiblities…

Reply
Edgars says:

October 7, 2011 at 4:46 pm

Add direction=”right” (or “left” if you prefer)

Works for me.

Reply

Just a bunch of Adobe Flex Examples

Setting the value of a Flex Progress Bar

Peter deHaan

Add Widgets (Content Sidebar)

38 Responses to Setting the value of a Flex Progress Bar

Leave a Reply Cancel reply

Categories

Articles

Calendar

Meta

Pages

The Latest

Setting the icon placement on a Spark Button control in Flex Hero

More

February 2008
M	T	W	T	F	S	S
« Jan				Mar »
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29