[2011-04] 更动进度条的样式

Xml代码  
1.<?xml version="1.0" encoding="utf-8"?>    
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
3.        layout="vertical"    
4.        verticalAlign="middle"    
5.        backgroundColor="white">    
6.     
7.    <mx:Script>    
8.        <![CDATA[   
9.            import mx.events.SliderEvent;   
10.    
11.            private function init():void {   
12.                var c:Class = progressBar.getStyle("indeterminateSkin");   
13.                progressBar.setStyle("barSkin", c);   
14.                progressBar.setProgress(15, 100);   
15.            }   
16.    
17.            private function progressBar_change(evt:SliderEvent):void {   
18.                progressBar.setProgress(evt.value, 100);   
19.            }   
20.        ]]>    
21.    </mx:Script>    
22.     
23.    <mx:ApplicationControlBar dock="true">    
24.        <mx:Form styleName="plain">    
25.            <mx:FormItem label="value:">    
26.                <mx:HSlider id="slider"    
27.                        minimum="0"    
28.                        maximum="100"    
29.                        value="15"    
30.                        liveDragging="true"    
31.                        snapInterval="1"    
32.                        tickInterval="10"    
33.                        dataTipPrecision="0"    
34.                        change="progressBar_change(event);" />    
35.            </mx:FormItem>    
36.        </mx:Form>    
37.    </mx:ApplicationControlBar>    
38.     
39.    <mx:ProgressBar id="progressBar"    
40.            mode="manual"    
41.            labelPlacement="center"    
42.            height="50"    
43.            creationComplete="init();" />    
44.     
45.</mx:Application>  
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 
  
    <mx:Script> 
        <![CDATA[ 
            import mx.events.SliderEvent; 
  
            private function init():void { 
                var c:Class = progressBar.getStyle("indeterminateSkin"); 
                progressBar.setStyle("barSkin", c); 
                progressBar.setProgress(15, 100); 
            } 
  
            private function progressBar_change(evt:SliderEvent):void { 
                progressBar.setProgress(evt.value, 100); 
            } 
        ]]> 
    </mx:Script> 
  
    <mx:ApplicationControlBar dock="true"> 
        <mx:Form styleName="plain"> 
            <mx:FormItem label="value:"> 
                <mx:HSlider id="slider" 
                        minimum="0" 
                        maximum="100" 
                        value="15" 
                        liveDragging="true" 
                        snapInterval="1" 
                        tickInterval="10" 
                        dataTipPrecision="0" 
                        change="progressBar_change(event);" /> 
            </mx:FormItem> 
        </mx:Form> 
    </mx:ApplicationControlBar> 
  
    <mx:ProgressBar id="progressBar" 
            mode="manual" 
            labelPlacement="center" 
            height="50" 
            creationComplete="init();" /> 
  
</mx:Application>



另外你可以将barSkin风格定义在一个.CSS文件或者<mx:Style />中，大致像下面这样： 

Xml代码  
1.ProgressBar {    
2.    barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin");    
3.}  
ProgressBar { 
    barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin"); 
}

或者你可以在MXML中利用下面的代码设置barSkin风格：<mx:ProgressBar 

Xml代码  
1.id="progressBar"    
2.        barSkin="mx.skins.halo.ProgressIndeterminateSkin"    
3.        mode="manual"    
4.        labelPlacement="center"    
5.        height="50" />