Using the ProgressBar with a file download in Flex

when you are working with some time consuming procedure while flex application development you dont have information or idea about the progress. It is true that flex provides nice moving clock to let you know that you are doing something.

You might have idea about adobe provided the ProgressBar with flex to experiment the same ProgressBar with file download  from the server Try the given code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">

<mx:Script>
    <![CDATA[
       
        [Bindable]
        private var fileRef:FileReference = null;
       
        private function downloadFile():void{
           
            var urlRequest:URLRequest = new URLRequest("http://www.flex-blog.com/samples/sample3/wallpaper.jpg");

            fileRef = new FileReference();
            fileRef.download(urlRequest, "wallpaper.jpg");
            fileRef.addEventListener(ProgressEvent.PROGRESS, setDownloadProgress);
            fileRef.addEventListener(Event.COMPLETE, completeHandler);

           
        }
       
        private function setDownloadProgress(event:ProgressEvent):void{
           
            pbProgress.setProgress(event.bytesLoaded, event.bytesTotal);

            pbProgress.label = "Downloading [" + Math.round(event.bytesLoaded / event.bytesTotal * 100).toString() + "%]";
           
        }
       
        private function completeHandler(event:Event):void{
           
            fileRef = null;
           
        }       
       
    ]]>
</mx:Script>

<mx:VBox top="10" left="10">

    <mx:Text buttonMode="true" click="downloadFile()" text="Download Wallpaper" textDecoration="underline" fontSize="12"/>

    <mx:ProgressBar visible="{fileRef != null}" mode="manual" label="" id="pbProgress" labelPlacement="center"/>

</mx:VBox>
</mx:Application>