Wednesday, January 30, 2013

Adobe Flex 4: Indeterminate Progress bar

I used the following code to create a Indeterminate progress bar in a Flex 4 application.

MXML code:


<mx:ProgressBar id="progBar" width="225" 
	mode="manual" label="Loading ..." labelPlacement="center" 
	maximum="0" minimum="0" visible="false" indeterminate="true" 
	includeInLayout="false"
	fontWeight="bold" />

Show/Hide methods:
public function showLoading(event:ApplicationEvent):void
{
	if(progBar) { 
		
		PopUpManager.removePopUp(progBar);
		
		progBar.visible  = true;
		if (event.label && event.label != '') {
			progBar.label = event.label;
		} else {
			progBar.label = 'Loading ...';
		}
		PopUpManager.addPopUp(progBar,this,true);
		PopUpManager.centerPopUp(progBar);
		
		trackTimeTakenForRequest();
	}
}

public function hideLoading(event:ApplicationEvent):void {
	if (progBar) {
		PopUpManager.removePopUp(progBar);
		progBar.visible = false;
	}
	if (minuteTimer.running) {
		minuteTimer.stop();
	}
}

Timer for handling unusually long requests:
// creates a new 10-second Timer				
var minuteTimer:Timer = new Timer(1000, 15);
public function trackTimeTakenForRequest():void {				
	if (minuteTimer.running) {
		minuteTimer.stop();
	}
	minuteTimer.start();
}

public function onTimerComplete(event:TimerEvent):void {
  if(progBar && progBar.visible) {
    progBar.visible = false;
    PopUpManager.removePopUp(progBar);
    showLoading(new ApplicationEvent(ApplicationEvent.SHOW_PROGRESS_BAR, 
"This request is taking longer than usual."))
	}			
}