Flex中如何设置进度条(ProgressBar)的自定义皮肤(Skin)的例子

By Minidxer | March 29, 2008

下面的例子演示了Flex中如何通过设置barSkin风格，设定进度条(ProgressBar)的自定义皮肤(Skin)。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：



下面是完整代码：

Download: main.mxml
  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>
另外你可以将barSkin风格定义在一个.CSS文件或者<mx:Style />中，大致像下面这样：
  1. ProgressBar {
  2.     barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin");
  3. }
或者你可以在MXML中利用下面的代码设置barSkin风格：
  1. <mx:ProgressBar id="progressBar"
  2.         barSkin="mx.skins.halo.ProgressIndeterminateSkin"
  3.         mode="manual"
  4.         labelPlacement="center"
  5.         height="50" />
原文作者：Peter deHaan 翻译：minidxer

Topics: Flex | 1 Comment » | 378 views Tags: , , , , , ,

Related Post

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll