ProgressBar Control in Flex4

Home Tutorial Flex Flex4 Components ProgressBar Control in Flex4

ProgressBar Control in Flex4
Posted on: June 1, 2010 at 12:00 AM

The ProgressBar Control is a MX component. It has no Spark Component.

ProgressBar control in Flex4:

The ProgressBar Control is a MX component. It has no Spark Component. The ProgressBar Control displays a loading progress of task over time. The user can use this when you wait for a limited time of period. The progress line of Progress Control represent time-based processes. There are three types of modes: event, polled, manual. The tag of ProgressBar control is <mx:ProgressBar>.

In this example when you click on run button the ProgressBar will progress and when the progress will be completed(100%) then shows a image.

Example:

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

import mx.controls.ProgressBar;

private var j:uint=10;

private function run():void

{

if(j<=100)

{{

bar.setProgress(j,100);

bar.label= "CurrentProgress" + " " + j + "%";

j+=10;

}

if(j>100){

image.load('/tutorialfiles/1229.building1.jpg');

bar.label="Progress Complete";

j!=0;

}

]]>

</fx:Script>

<s:Panel title="ProgressBar Control Example" width="333" height="389">

<s:VGroup x="12" y="10">

<s:Label text="Click the button to increment the progress bar."/>

<mx:ProgressBar id="bar"

width="285"

source="image"

label="Loading..."

labelWidth="400"

chromeColor="#4EC44E"

color="#E26060"

mode="manual"

direction="right"/>

<s:Button id="btn"

label="Run"

click="run();"/>

<mx:Image id="image"

height="246" width="305"

autoLoad="false"

visible="true"/>

</s:VGroup>

</s:Panel>

</s:Application>

Output:/h3>

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for ProgressBar Control in Flex4:

«Previous Index Next»

Latest
Frameworks
Category