Avg. Rating 4.5

Problem

I have a communication between two clients, the first send a message and the second send another once he received the first. As the messaging takes some time I want the progress of each message being sent to be shown in the same progressBar. The direction of the progression must match the direction of the message sending.

Solution

We'll simulate a exchange between two clients with a timer called 100 times to set the progression of the progressBar. The progressBar Flex component natively integrate a "direction" property, we'll use it to have the requested behavior.

Detailed explanation

package com.palleas.components
{
  import flash.events.TimerEvent;
  import flash.utils.Timer;
 
  import mx.controls.ProgressBar;
  import mx.controls.ProgressBarDirection;
  import mx.controls.ProgressBarMode;
  import mx.events.FlexEvent;
 
  import spark.components.Application;
 
  public class Facade extends Application
  {
    protected var bar:ProgressBar;
    protected var counter:Timer;
   
    public function Facade()
    {
      super();
      // creating a timer which will dispatch an event every 100 miliseconds, 100 times
      // we'll use that to set the progress of our progressBar
      counter = new Timer(100,100);
      counter.addEventListener(TimerEvent.TIMER,timerHitHandler);
      counter.addEventListener(TimerEvent.TIMER_COMPLETE,timerCompleteHandler);

      // we create the progressBar
      // which will be manually used
      bar = new ProgressBar();
      bar.mode = ProgressBarMode.MANUAL;

      // waiting for the application to be ready
      addEventListener(FlexEvent.CREATION_COMPLETE,creationCompleteHandler);
    }
   
    /**
     * This method is called when the facade is ready
     * @param e
     *
     */   
    protected function creationCompleteHandler(e:FlexEvent):void
    {
      removeEventListener(FlexEvent.CREATION_COMPLETE,creationCompleteHandler);
      // we add the proressBar to the stage...
      addElement(bar);
      // ...and we start the counter
      startCounter();
    }
   
    /**
     * This method is used to invert the direction of the progressBar :
     * - If it's moving from left to right, then it'll move from right to left
     * - If it's moving from right to left, then it'll move from left to right
     */   
    protected function switchBarProgressDirection():void
    {
      if(bar.direction == ProgressBarDirection.RIGHT)
      {
        bar.direction = ProgressBarDirection.LEFT;
      } else {
        bar.direction = ProgressBarDirection.RIGHT;
      }
    }
   
    /**
     * This method is called every 200 miliseconds
     * and set the current progress of the progressBar
     * @param TimerEvent e
     *
     */   
    protected function timerHitHandler(e:TimerEvent):void
    {
      bar.setProgress(counter.currentCount,counter.repeatCount);
    }
   
    /**
     * This method is called when the Timer has been repeated for 100 times
     * It switch the direction of the progressBar and restart the counter for
     * another progress session, is the opposite direction
     * @param e
     *
     */   
    protected function timerCompleteHandler(e:TimerEvent):void
    {
      switchBarProgressDirection();
      startCounter();
    }
   
    /**
     * This method starts the counter
     *
     */   
    protected function startCounter():void
    {
      counter.reset()
      counter.start();
    }
  }
}

Report abuse

Related recipes