Flex 实现ProgressBar 事例

Flex 实现ProgressBar 实例

源码如下：

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

<!-- Simple example to demonstrate the Halo ProgressBar control. -->

<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"

                   width=" 435"

                   height=" 208"

                   creationComplete="InitApp()" >

     

      <fx:Script>

           <![CDATA[

                                     import mx.controls.Alert;

                 private var j:uint = 0;

               

                 private var timer:Timer;

                 private var valueNum:Number = 0;

                

                 protected function InitApp(): void{

                     timer = new Timer(1); 

                     timer.addEventListener(TimerEvent.TIMER, OnTimeEvent);

                     timer.start();

                     

                }

                

                 private function OnTimeEvent(evt:TimerEvent):void {

                     valueNum = valueNum + 10;

                      var vaPercent:Number = valueNum / 100;

                      if(valueNum >= 10000)

                     {

                           progressBar.setProgress(valueNum, 10000);

                           progressBar.label = "download completed";

                            return;

                     }

                     progressBar.setProgress(valueNum, 10000);

                     progressBar.label = "" + vaPercent + "% has been downloaded"  

                      //Alert.show(String(progressBar.percentComplete));

                }

                

           ]]>   

      </fx:Script>

     

      <s:Panel title=" Halo ProgressBar Control Example "

                 width=" 75%" height=" 75%" 

                 horizontalCenter=" -24" verticalCenter=" 2" >

            <s:VGroup left=" 10" right=" 10" top=" 10" bottom=" 10" >

                 <s:Label width=" 100%" color=" blue"

                            text=" Click the button to increment the progress bar." />

                

                 <mx:ProgressBar id=" progressBar" labelPlacement="bottom " chromeColor="green "

                                     mi nimum="0 " maximum="100 " label="Current Progress 0% "

                                     direction=" right" mode="manual " width="100% "/>

            </s:VGroup>

      </s:Panel>

     

</s:Application>


运行结果如下：