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>


运行结果如下：