Share on Google+Share on Google+

ProgressBar in Flex

Advertisement
ProgressBar visually represent the progress of a task over time,the type of ProgressBar and various examples of it will help you to learn ProgressBar easily and effectively

ProgressBar in Flex

ProgressBar visually represent the progress of a task over time.  In Flex there are two types of ProgressBar are present namely:

  1. Determinate ProgressBar: This ProgressBar uses a linear representation of progress over a time. This kind of ProgressBar is used when the user has to wait for an extended period of time.
  2. Indeterminate ProgressBar: This kind of ProgressBar is used when the scope of the task is not yet known.

Use any kind of ProgressBar control when user is required to wait for completion of a task. A label would be useful to display some message.


Example 1:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

public function disImage():void {

img.load('Sunset.jpg');

}

]]>

</mx:Script>

<mx:VBox>

<mx:ProgressBar source="img"/>

<mx:Button label="Display" click="disImage();"/>

<mx:Image id="img" height="200" width="200"/>

</mx:VBox>

</mx:Application>


Output:



Example 2:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

private var p:Number=0;

private function progress():void{

if(p<=50){

progBar.label="Current Pogress is="+" "+p+"%";

progBar.setProgress(p,50);

p+=5;

}

if(p>50)

{

p=0;

}

}

]]>

</mx:Script>

<mx:Panel title="ProgressBar Example" width="20%" height="25%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" horizontalCenter="10" verticalCenter="10">

<mx:VBox>

<mx:Text text="Click the button below:"/>

<mx:Button label="Progress" click="progress()"/>

<mx:ProgressBar id="progBar" visible="true" label="Current Pogress is= 0%"

direction="right" mode="manual" />

</mx:VBox>

</mx:Panel>

</mx:Application>


Output:

 

Advertisements

Advertisement

Posted on: January 22, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.