Adobe Flash Builder 4 简体中文正式版 Windows版点击下载:http://g.csdn.net/5134151

Adobe Flash Builder 4 简体中文正式版 Mac版点击下载 ：http://g.csdn.net/5134152

Adobe 在线课堂：http://adobev.csdn.net/zx/index.html

Adobe平台技术峰会课程视频：http://adobev.csdn.net/

 

主程序ButtonBarTest源代码如下：






  xmlns:s="library://ns.adobe.com/flex/spark"

  xmlns:mx="library://ns.adobe.com/flex/mx" >

 

 

 

  

  

  

  

 

 

   

       
            [Bindable]

           [Embed(source="assets/test/buttonbar/Button.png")]

            private var buttonIcon:Class;



            [Bindable]

            [Embed(source="assets/test/buttonbar/ButtonBar.png")]

            private var buttonBarIcon:Class;



            [Bindable]

            [Embed(source="assets/test/buttonbar/CheckBox.png")]

            private var checkBoxIcon:Class;



            [Bindable]

            [Embed(source="assets/test/buttonbar/ColorPicker.png")]

            private var colorPickerIcon:Class;

        ]]>

   

 

  @namespace s "library://ns.adobe.com/flex/spark";

  @namespace mx "library://ns.adobe.com/flex/mx";

  #buttonBar{

   font-size: 18;

   /* item-renderer:Cla***eference("test.renderers.ButtonBarRenderer"); */

   /* skin-class:"test.skin.CustomButtonBarSkin"; */

  }

 

   

   
   skinClass="test.skin.CustomButtonBarSkin"

            dataProvider="{arr}"

            height="64" width="100%"

   />





自定义ButtonBarSkin   CustomButtonBarSkin源代码如下：






  xmlns:fx="http://ns.adobe.com/mxml/2009"

  xmlns:s="library://ns.adobe.com/flex/spark"

  alpha.disabled="0.5">

 

 

 

 

 

 

 

 
   [HostComponent("spark.components.ButtonBar")]

  ]]>

 

 

 

 

  

 

 

 

 

 

  

 

 

 





自定义ButtonBarButtonSkin  CustomButtonBarButtonSkin源代码如下：








    xmlns:fx="http://ns.adobe.com/mxml/2009"

    xmlns:s="library://ns.adobe.com/flex/spark"

    minWidth="21" minHeight="21"

    alpha.disabledStates="0.5">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
  [HostComponent("spark.components.ButtonBarButton")]

  ]]>

 

 

 

 
   import spark.components.ButtonBar;

   import mx.events.FlexEvent;

   import spark.components.ButtonBarButton;

  

   protected function gr_creationComplete(evt:FlexEvent):void {

    var dataObj:Object = hostComponent.data;

    img.source = dataObj.icon;

    hostComponent.toolTip = dataObj.label;

   }

  

   /* Define the skin elements that should not be colorized.

   For toggle button, the graphics are colorized but the label is not. */

   static private const exclusions:Array = ["labelDisplay"];

  

   override public function get colorizeExclusions():Array {return exclusions;}

  ]]>

 

 

 

 

 

  
        color.downStates="0xFFFFFF"

        alpha="0.07"

        alpha.downStates="0.5" />

 

 

 

 

 

 

  

   
         color.selectedUpStates="0xBBBDBD"

         color.overStates="0xBBBDBD"

         color.downStates="0xAAAAAA"

         alpha="0.85"

         alpha.overAndSelected="1" />

   
         color.selectedUpStates="0x9FA0A1"

         color.over="0x9FA0A1"

         color.overAndSelected="0x8E8F90"

         color.downStates="0x929496"

         alpha="0.85"

         alpha.overAndSelected="1" />

  

 

 

 

 

 

 

  

   

   

  

 

 

 

 

 

 

  
        alpha="0.33"

        alpha.selectedUpStates="0.22"

        alpha.overStates="0.22"

        alpha.downStates="0.12" />

 

 

 

 

 
   excludeFrom="downStates">

 

  

   
         alpha.overStates="0.22"

         alpha.selectedUpStates="0.33" />

   
         alpha.overStates="0.22"

         alpha.selectedUpStates="0.33" />

  

 

 

 

 

 
   includeIn="downStates, selectedUpStates, overAndSelected">

 

  

 

 

 
   includeIn="downStates, selectedUpStates, overAndSelected">

 

  

 

 

 
   includeIn="downStates, selectedUpStates, overAndSelected">

 

  

 

 

 
   includeIn="downStates, selectedUpStates, overAndSelected">

 

  

 

 

 

 

 
   width="69" height="20">

 

  

   
         alpha="0.5625"

         alpha.down="0.6375"

         alpha.selectedStates="0.6375" />

   
         alpha="0.75"

         alpha.down="0.85"

         alpha.selectedStates="0.85" />

  

 

 

 

 

 
      creationComplete="gr_creationComplete(event);"

      horizontalCenter="0" verticalCenter="0">

 

 

 

 
    textAlign="center"

    verticalAlign="middle"

    maxDisplayedLines="1"

    horizontalCenter="0" verticalCenter="{gr.height}"

    left="10" right="10" top="2" bottom="2">

 





运行效果图如下：