Wednesday, May 19, 2010

Flex progress bar while loading the xml data using URLLoader

Show progress bar in flex while loading the xml data using URLLoader class.


For progress bar display, have a separate MXML component called LoadingBar

MXML Main Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:net="flash.net.*" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[

import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
import flash.geom.Point;
import mx.containers.HBox;
import mx.controls.Spacer;
import mx.containers.*;
import mx.controls.*;
public var loadingBar:LoadingBar;

public function init():void{
loadingBar=LoadingBar(PopUpManager.createPopUp( this, LoadingBar , true));
loadingBar.progressBar.source = urlLoader;
PopUpManager.centerPopUp(loadingBar);
urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

urlLoader.load(new URLRequest("http://localhostdatasource"));
}

private function xmlLoaded(event:Event):void {

PopUpManager.removePopUp(loadingBar);

}
]]>
</mx:Script>

<net:URLLoader id="urlLoader" />

</mx:Application>

MXML Loading Bar component code

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Progress"
width="300" height="100" borderThicknessLeft="1" styleName="loadingStyle"
borderThicknessRight="1" borderThicknessBottom="1" borderThicknessTop="1" >

<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:ProgressBar id="progressBar" label="Loading Data..." mode="event" labelPlacement="center" />
</mx:VBox>

</mx:TitleWindow>

The Flex Project looks like below image.

No comments:

Post a Comment

Search This Blog