ProgressBar in Flex


 

ProgressBar in Flex

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 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){

0

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

progBar.setProgress(p,50);

p+=5;

1

}

if(p>50)

{

2

p=0;

}

}

3

]]>

</mx:Script>

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

4

<mx:VBox>

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

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

5

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

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

</mx:VBox>

6

</mx:Panel>

</mx:Application>
Output:

7

 

Ads