Flex中如何通过buttonStyleName样式设置ButtonBar的Skin的例子

By Minidxer | February 15, 2009

接下来的例子演示了Flex中如何通过buttonStyleName样式，设置ButtonBar的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:Style>
  8.         ButtonBar {
  9.             buttonStyleName: myCustomButtonStyleName;
  10.             color: #999999;
  11.         }
  12.  
  13.         .myCustomButtonStyleName {
  14.             skin: Embed(source="assets/ButtonBarSkins.swf",
  15.                         symbol="ButtonBarButton_skin");
  16.         }
  17.     </mx:Style>
  18.  
  19.     <mx:Script>
  20.         <![CDATA[
  21.             import mx.events.SliderEvent;
  22.  
  23.             private function slider_change(evt:SliderEvent):void {
  24.                 buttonBar.setStyle("buttonHeight", evt.value);
  25.             }
  26.         ]]>
  27.     </mx:Script>
  28.  
  29.     <mx:Array id="arr">
  30.         <mx:Object label="Button" />
  31.         <mx:Object label="ButtonBar" />
  32.         <mx:Object label="ColorPicker" />
  33.         <mx:Object label="ComboBox" />
  34.     </mx:Array>
  35.  
  36.     <mx:ApplicationControlBar dock="true">
  37.         <mx:Form styleName="plain">
  38.             <mx:FormItem label="buttonHeight:">
  39.                 <mx:HSlider id="slider"
  40.                         minimum="24"
  41.                         maximum="64"
  42.                         snapInterval="1"
  43.                         tickInterval="4"
  44.                         liveDragging="true"
  45.                         change="slider_change(event);" />
  46.             </mx:FormItem>
  47.         </mx:Form>
  48.     </mx:ApplicationControlBar>
  49.  
  50.     <mx:ButtonBar id="buttonBar"
  51.             dataProvider="{arr}" />
  52.  
  53. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ButtonBar | No Comments » | 900 views Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll