[Flex] ButtonBar系列——皮肤和外观设置

<?xml version="1.0" encoding="utf-8"?>
<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">
    <s:layout>
        <s:VerticalLayout gap="3" />
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            /* import spark.components.ButtonBarButton;  */
            import mx.controls.buttonBarClasses.ButtonBarButton;
            private function toggleButton(idx:uint, selected:Boolean):void {
                var b3:ButtonBarButton = buttonBar.getChildAt(idx) as ButtonBarButton;
                b3.enabled = selected;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        <fx:Array id="arr">
            <fx:Object label="Button"/>
            <fx:Object label="ButtonBar"/>
            <fx:Object label="ColorPicker"/>
            <fx:Object label="ComboBox"/>
        </fx:Array>
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|ButtonBar{
            buttonStyleName:myCustomButtonStyleName;
        }
        .myCustomButtonStyleName{
            cornerRadius:10;
        }
    </fx:Style>
    <s:controlBarContent>
        <s:Form styleName="plain">
            <s:FormItem label="Button enabled:"  height="20">
                <s:CheckBox id="che1" selected="true" click="toggleButton(0,che1.selected)"/>
            </s:FormItem>
            <s:FormItem label="ButtonBar enabled:"  height="20">
                <s:CheckBox id="che2" selected="true" click="toggleButton(1,che2.selected)"/>
            </s:FormItem>
            <s:FormItem label="ColorPicker enabled:" height="20">
                <s:CheckBox id="che3" selected="true" click="toggleButton(2,che3.selected)"/>
            </s:FormItem>
            <s:FormItem label="ComboBox enabled:" height="20">
                <s:CheckBox id="che4" selected="true" click="toggleButton(3,che4.selected)"/>
            </s:FormItem>
        </s:Form>

    </s:controlBarContent>
    <mx:ButtonBar id="buttonBar" dataProvider="{arr}" itemClick="lbl.text = event.label" />
    <s:Label id="lbl"/>
</s:Application>