Setting the value of a Flex Progress Bar

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.

38 thoughts on “Setting the value of a Flex Progress Bar

    1. 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.

  1. 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

  2. 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.

  3. 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

  4. 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

  5. Hi,

    Its not working for me also….

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

    dfodiode

  6. 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?

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

  8. 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.

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

  10. 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

  11. 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.

  12. 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

  13. 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

  14. 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?

  15. 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" />
    
  16. 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

  17. 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”

  18. 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.

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

    1. @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

  20. 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…

Comments are closed.