7 Replies Latest reply on Dec 9, 2010 12:58 PM by Redade

    Updating progress bar manually doesnt show

    Flex-dude
      I would like to attach a progress bar to a long running function to indicate progress using code similar to the code below but the progress bar graphic only updates at the conclusion of the function call.

      Can anyone show me the correct way to get the progressBar to update while the function runs.

      The sample code simply makes the progressbar visible and then loops over a large number and updates the progressBar as each % of the loop is completed.

      When I run this code the progressBar does not display onscreen until the function has completed but with the correct 100% message showing.
        • 1. Re: Updating progress bar manually doesnt show
          flexstone Level 1
          I struggled with this problem too and created a CustomEvent "progressMadeEvent" to solve the problem
          ----------------------------------
          package com.alQemy
          {
          import flash.events.Event;
          public class progressMadeEvent extends Event
          {
          public function progressMadeEvent(type:String,increment:int,max:int)
          {
          super(type)
          this.max = max;
          this.increment = increment;
          }
          // Define static constant.
          public static const incrementChange:String = "incrementChange";

          // Define a public variable to hold the state of the enable property.
          public var increment:int;
          public var max:int;

          override public function clone():Event{
          return new progressMadeEvent(incrementChange,increment,max)
          }

          }
          }
          -----------------------------------
          When you launch your process you need to include a line to create an eventListener on the application that will update the progressBar

          thisApp.addEventListener("incrementChange",updateProgress)

          ---------------------------------------

          private function updateProgress(event):void{
          pBar.setProgress(event.increment,event.max)
          pBar.label = int((event.increment/event.max)*100)+"% complete"
          trace(event.increment+'-'+event.max)
          if(event.increment==event.max){
          //remove listener when complete
          thisApp.removeEventListener("incrementChange",updateProgress)
          this.invalidateProperties()
          }
          pBar.invalidateProperties()
          }
          -------------------------------------------

          Now in the loop of your lengthy process insert these lines to increment the process and dispatch the CustomEvent that your ProgressBar is listening too....

          // incr is the current iteration of your loop
          // mx is the total interations of your loop

          thisApp.dispatchEvent(new progressMadeEvent("incrementChange",incr,mx))
          • 2. Re: Updating progress bar manually doesnt show
            seRajan
            <?xml version="1.0" encoding="utf-8"?>
            <mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
            <mx:Script>
            <![CDATA[
            import mx.controls.Alert;

            private var tim:Timer = new Timer(100);

            public function init():void
            {
            tim.addEventListener(TimerEvent.TIMER, progress);
            }
            private function progress(evt:Event):void
            {
            progressBar.setProgress(tim.currentCount, 100);

            if(tim.currentCount == 100)
            {
            tim.stop();
            }
            }
            public function updateProgress():void
            {
            tim.reset();
            tim.start();
            progressBar.visible = true;
            }
            ]]>
            </mx:Script>

            <mx:ProgressBar x="10" y="10" id="progressBar" mode="manual" visible="false" />
            <mx:Button x="10" y="40" label="Button" id="theButton" click="updateProgress()"/>
            </mx:WindowedApplication>


            use this

            For loop is not fit for this concept


            - Rajan
            • 3. Re: Updating progress bar manually doesnt show
              Level 7

              "Flex-dude" <webforumsuser@macromedia.com> wrote in message
              news:gk14os$5un$1@forums.macromedia.com...
              >I would like to attach a progress bar to a long running function to
              >indicate
              > progress using code similar to the code below but the progress bar graphic
              > only
              > updates at the conclusion of the function call.
              >
              > Can anyone show me the correct way to get the progressBar to update while
              > the
              > function runs.
              >
              > The sample code simply makes the progressbar visible and then loops over a
              > large number and updates the progressBar as each % of the loop is
              > completed.
              >
              > When I run this code the progressBar does not display onscreen until the
              > function has completed but with the correct 100% message showing.

              Here's one approach:
              http://blog.paranoidferret.com/index.php/2007/12/11/flex-tutorial-an-asynchronous-jpeg-enc oder/


              • 4. Re: Updating progress bar manually doesnt show
                Flex-dude Level 1
                Thanks all for the prompt replies.
                flexstone, I had thought it would be something like that - nice one .
                Thanks for saving much time wasteage and head scratching.
                • 5. Re: Updating progress bar manually doesnt show
                  Redade

                  I did write all the code as you said but my applicaiton doesnt come into processProgress function...

                  here is what i did;

                   

                  //this is my class

                      import flash.events.Event;
                      public class progressMade extends Event
                      {
                          public function progressMade(type:String,increment:int,max:int)
                          {
                              super(type)
                              this.max = max;
                              this.increment = increment;
                          }
                          // Define static constant.
                          public static const incrementChange:String = "incrementChange";
                         
                          // Define a public variable to hold the state of the enable property.
                          public var increment:int;
                          public var max:int;
                         
                          override public function clone():Event
                          {
                              return new progressMade(incrementChange,increment,max)
                          }       
                      }

                   

                   

                  //this is my function

                   

                              public function processProgress(event:progressMade):void
                              {
                                  //imageLoadingProgressBar.setProgress((frameNum + 1),numImages);
                                  imageLoadingProgressBar.setProgress(event.increment,event.max);
                                  imageLoadingProgressBar.label = "Loaded " +(event.increment + 1) + " of " + event.max;
                                  //this.removeEventListener("incrementChange",processProgress);
                                  //this.invalidateProperties();
                              }

                   

                  //this is how i call it in loop

                   

                  this.dispatchEvent(new progressMade("processProgress",frameNum,totalNum));

                   

                  //this is how i add listener to applicaiton

                   

                  application.addEventListener("incrementChange",processProgress);

                   

                   

                  never come into processProgressFunction....

                  • 7. Re: Updating progress bar manually doesnt show
                    Redade Level 1

                    That example is not working and i need to update the progress bar in a for

                    loop. So i tried your sample code.

                    Thank you.

                     

                    2010/12/9 Peter deHaan (Adobe) <forums@adobe.com>

                     

                    There is a simple manual ProgressBar example at

                    http://blog.flexexamples.com/2008/02/16/setting-the-value-of-a-flex-progress-bar/

                    >

                    Peter

                    >