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