Home Tutorial Flex Flex-components ProgressBar in Flex

 
 

Share on Google+Share on Google+
ProgressBar in Flex
Posted on: January 22, 2010 at 12:00 AM
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:

 

Advertisement

Related Tags for ProgressBar in Flex:


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.

Posted on: January 22, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com