Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        .buttonBarButtonStyles {
            skin: ClassReference("skins.CustomButtonBarButtonSkin");
        }
    </fx:Style>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            buttonStyleName="buttonBarButtonStyles"
            firstButtonStyleName="buttonBarButtonStyles"
            lastButtonStyleName="buttonBarButtonStyles"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

The custom ButtonBar button skin class, skins/CustomButtonBarButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:SparkSkin name="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">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
 
    <!-- layer 1: shadow -->
    <s:Rect left="0" right="0" bottom="-1" height="1">
        <s:fill>
            <s:SolidColor color="black" 
                    color.downStates="white" 
                    alpha="0.07"
                    alpha.downStates="0.5" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" alpha="0.6">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_149.gif')" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="black" alpha="0.0099" />
                <s:GradientEntry color="black" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9">
        <s:fill>
            <s:SolidColor color="white" 
                    alpha="0.33" 
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22" 
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="white" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="black" 
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry color="black" 
                        alpha="0.75" 
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
</s:SparkSkin>

You can also set the buttonStyleName style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|ButtonBar {
            buttonStyleName: buttonBarButtonStyles;
            firstButtonStyleName: buttonBarButtonStyles;
            lastButtonStyleName: buttonBarButtonStyles;
        }
 
        .buttonBarButtonStyles {
            skin: ClassReference("skins.CustomButtonBarButtonSkin");
        }
    </fx:Style>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, you can set the buttonStyleName style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonBarButtonSkin;
 
            private function init():void {
                var buttonBarButtonStyles:CSSStyleDeclaration = new CSSStyleDeclaration(".buttonBarButtonStyles");
                buttonBarButtonStyles.setStyle("skin", CustomButtonBarButtonSkin);
 
                var buttonBarStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.ButtonBar");
                buttonBarStyles.setStyle("buttonStyleName", "buttonBarButtonStyles");
                buttonBarStyles.setStyle("firstButtonStyleName", "buttonBarButtonStyles");
                buttonBarStyles.setStyle("lastButtonStyleName", "buttonBarButtonStyles");
            }
        ]]>
    </fx:Script>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonBarButtonSkin;
            import mx.controls.ButtonBar;
 
            private var btnBar:ButtonBar;
 
            private function init():void {
                var buttonBarButtonStyles:CSSStyleDeclaration = new CSSStyleDeclaration(".buttonBarButtonStyles");
                buttonBarButtonStyles.setStyle("skin", CustomButtonBarButtonSkin);
 
                btnBar = new ButtonBar();
                btnBar.dataProvider = ["The", "Quick", "Brown", "Fox", "Jumps", "Over", "The", "Lazy", "Dog"];
                btnBar.setStyle("buttonStyleName", "buttonBarButtonStyles");
                btnBar.setStyle("firstButtonStyleName", "buttonBarButtonStyles");
                btnBar.setStyle("lastButtonStyleName", "buttonBarButtonStyles");
                btnBar.horizontalCenter = 0;
                btnBar.verticalCenter = 0;
                addElement(btnBar);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/28/styling-the-last-button-in-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_lastButtonStyleName_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .lastButton {
            color: red;
            cornerRadius: 10;
            fontWeight: normal;
            themeColor: haloGreen;
        }
    </mx:Style>

    <mx:ButtonBar id="buttonBar"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            lastButtonStyleName="lastButton" />

</mx:Application>

You can also set the lastButtonStyleName style in an external .CSS file or <Style> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/28/styling-the-last-button-in-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_lastButtonStyleName_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .lastButton {
            color: red;
            cornerRadius: 10;
            fontWeight: normal;
            themeColor: haloGreen;
        }

        ButtonBar {
            lastButtonStyleName: lastButton;
        }
    </mx:Style>

    <mx:ButtonBar id="buttonBar"
            dataProvider="[Red,Orange,Yellow,Green,Blue]" />

</mx:Application>

Or, you can set the lastButtonStyleName style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/28/styling-the-last-button-in-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_lastButtonStyleName_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                buttonBar.setStyle("lastButtonStyleName", "lastButton");
            }
        ]]>
    </mx:Script>

    <mx:Style>
        .lastButton {
            color: red;
            cornerRadius: 10;
            fontWeight: normal;
            themeColor: haloGreen;
        }
    </mx:Style>

    <mx:ButtonBar id="buttonBar"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            initialize="init();" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/28/styling-the-last-button-in-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_lastButtonStyleName_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonBar;

            private var arr:Array;
            private var lastButtonStyle:CSSStyleDeclaration;
            private var buttonBar:ButtonBar;

            private function init():void {
                arr = [];
                arr.push("Red");
                arr.push("Orange");
                arr.push("Yellow");
                arr.push("Green");
                arr.push("Blue");

                lastButtonStyle = new CSSStyleDeclaration(".lastButton");
                lastButtonStyle.setStyle("color", "red");
                lastButtonStyle.setStyle("cornerRadius", 10);
                lastButtonStyle.setStyle("fontWeight", "normal");
                lastButtonStyle.setStyle("themeColor", "haloGreen");

                buttonBar = new ButtonBar();
                buttonBar.dataProvider = arr;
                buttonBar.setStyle("lastButtonStyleName", "lastButton");
                addChild(buttonBar);
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .buttonBarButtonStyles {
            textAlign: left;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Red"
                icon="@Embed('assets/bullet_red.png')" />
        <mx:Object label="Orange"
                icon="@Embed('assets/bullet_orange.png')" />
        <mx:Object label="Yellow"
                icon="@Embed('assets/bullet_yellow.png')" />
        <mx:Object label="Green"
                icon="@Embed('assets/bullet_green.png')" />
        <mx:Object label="Blue"
                icon="@Embed('assets/bullet_blue.png')" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="buttonHeight:">
                <mx:HSlider id="slider"
                        minimum="16"
                        maximum="48"
                        value="24"
                        snapInterval="1"
                        tickInterval="2"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[horizontal,vertical]" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            buttonHeight="{slider.value}"
            direction="{comboBox.selectedItem}"
            buttonStyleName="buttonBarButtonStyles" />

</mx:Application>

View source is enabled in the following example.

You can also set the buttonHeight style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ButtonBar {
            buttonHeight: 16;
            buttonStyleName: buttonBarButtonStyles;
        }

        .buttonBarButtonStyles {
            textAlign: left;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Red"
                icon="@Embed('assets/bullet_red.png')" />
        <mx:Object label="Orange"
                icon="@Embed('assets/bullet_orange.png')" />
        <mx:Object label="Yellow"
                icon="@Embed('assets/bullet_yellow.png')" />
        <mx:Object label="Green"
                icon="@Embed('assets/bullet_green.png')" />
        <mx:Object label="Blue"
                icon="@Embed('assets/bullet_blue.png')" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[horizontal,vertical]" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            direction="{comboBox.selectedItem}" />

</mx:Application>

Or, you can set the buttonHeight style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ButtonBar {
            buttonHeight: 24;
            buttonStyleName: buttonBarButtonStyles;
        }

        .buttonBarButtonStyles {
            textAlign: left;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                buttonBar.setStyle("buttonHeight", evt.value);
            }

            private function comboBox_change(evt:ListEvent):void {
                buttonBar.direction = comboBox.selectedItem.toString();
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red"
                icon="@Embed('assets/bullet_red.png')" />
        <mx:Object label="Orange"
                icon="@Embed('assets/bullet_orange.png')" />
        <mx:Object label="Yellow"
                icon="@Embed('assets/bullet_yellow.png')" />
        <mx:Object label="Green"
                icon="@Embed('assets/bullet_green.png')" />
        <mx:Object label="Blue"
                icon="@Embed('assets/bullet_blue.png')" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="buttonHeight:">
                <mx:HSlider id="slider"
                        minimum="16"
                        maximum="48"
                        value="24"
                        snapInterval="1"
                        tickInterval="2"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="direction:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[horizontal,vertical]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/30/setting-the-button-height-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_buttonHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.BoxDirection;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ButtonBar;
            import mx.controls.ComboBox;
            import mx.controls.HSlider;
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            [Embed("assets/bullet_red.png")]
            private const BulletRedIcon:Class;

            [Embed("assets/bullet_orange.png")]
            private const BulletOrangeIcon:Class;

            [Embed("assets/bullet_yellow.png")]
            private const BulletYellowIcon:Class;

            [Embed("assets/bullet_green.png")]
            private const BulletGreenIcon:Class;

            [Embed("assets/bullet_blue.png")]
            private const BulletBlueIcon:Class;

            private var buttonBarButtonStyles:CSSStyleDeclaration;
            private var arr:Array;
            private var slider:HSlider;
            private var comboBox:ComboBox;
            private var buttonBar:ButtonBar;

            private function init():void {
                arr = [];
                arr.push({label:"Red", icon:BulletRedIcon});
                arr.push({label:"Orange", icon:BulletOrangeIcon});
                arr.push({label:"Yellow", icon:BulletYellowIcon});
                arr.push({label:"Green", icon:BulletGreenIcon});
                arr.push({label:"Blue", icon:BulletBlueIcon});

                buttonBarButtonStyles = new CSSStyleDeclaration(".buttonBarButtonStyles");
                buttonBarButtonStyles.setStyle("textAlign", "left");

                slider = new HSlider();
                slider.minimum = 16;
                slider.maximum = 48;
                slider.value = 24;
                slider.snapInterval = 1;
                slider.tickInterval = 2;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE,
                            slider_change);

                comboBox = new ComboBox();
                comboBox.dataProvider = [BoxDirection.HORIZONTAL, BoxDirection.VERTICAL];
                comboBox.addEventListener(ListEvent.CHANGE,
                            comboBox_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "buttonHeight:";
                formItem1.addChild(slider);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "direction:";
                formItem2.addChild(comboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                buttonBar = new ButtonBar();
                buttonBar.dataProvider = arr;
                buttonBar.setStyle("buttonHeight", 24);
                buttonBar.setStyle("buttonStyleName", "buttonBarButtonStyles");
                addChild(buttonBar);
            }

            private function slider_change(evt:SliderEvent):void {
                buttonBar.setStyle("buttonHeight", evt.value);
            }

            private function comboBox_change(evt:ListEvent):void {
                buttonBar.direction = comboBox.selectedItem.toString();
            }
        ]]>
    </mx:Script>

</mx:Application>

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/27/setting-a-custom-tool-tip-field-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_toolTipField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Array id="arr">
        <mx:Object label="Accordion"
                toolTip="Le Accordion"
                icon="@Embed('assets/Accordion.png')" />
        <mx:Object label="ApplicationControlBar"
                toolTip="Le ApplicationControlBar"
                icon="@Embed('assets/ApplicationControlBar.png')" />
        <mx:Object label="Box"
                toolTip="Le Box"
                icon="@Embed('assets/Box.png')" />
        <mx:Object label="Canvas"
                toolTip="Le Canvas"
                icon="@Embed('assets/Canvas.png')" />
        <mx:Object label="ControlBar"
                toolTip="Le ControlBar"
                icon="@Embed('assets/ControlBar.png')" />
    </mx:Array>
 
    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            labelField="label"
            toolTipField="toolTip"
            iconField="icon"
            height="32" />
 
</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/11/setting-the-data-provider-of-a-flex-buttonbar-control-to-a-viewstack-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ButtonBar id="buttonBar"
            dataProvider="{viewStack}"
            buttonHeight="32" />

    <mx:ViewStack id="viewStack">
        <mx:VBox label="Button"
                icon="@Embed('assets/Button.png')"
                backgroundColor="white"
                width="480"
                height="60">
            <mx:Label text="Button..." />
        </mx:VBox>
        <mx:VBox label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')"
                backgroundColor="white"
                width="480"
                height="60">
            <mx:Label text="ButtonBar..." />
        </mx:VBox>
        <mx:VBox label="CheckBox"
                icon="@Embed('assets/CheckBox.png')"
                backgroundColor="white"
                width="480"
                height="60">
            <mx:Label text="CheckBox..." />
        </mx:VBox>
        <mx:VBox label="ColorPicker"
            icon="@Embed('assets/ColorPicker.png')"
                backgroundColor="white"
                width="480"
                height="60">
            <mx:Label text="ColorPicker..." />
        </mx:VBox>
    </mx:ViewStack>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/10/disabling-individual-buttons-on-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        ButtonBar {
            buttonStyleName: myCustomButtonStyleName;
        }
 
        .myCustomButtonStyleName {
            cornerRadius: 0;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.controls.buttonBarClasses.ButtonBarButton;
 
            private function toggleButton(idx:uint, selected:Boolean):void {
                var b3:ButtonBarButton = buttonBar.getChildAt(idx) as ButtonBarButton;
                b3.enabled = selected;
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Button enabled:">
                <mx:CheckBox id="ch1"
                        selected="true"
                        click="toggleButton(0, ch1.selected);" />
            </mx:FormItem>
            <mx:FormItem label="ButtonBar enabled:">
                <mx:CheckBox id="ch2"
                        selected="true"
                        click="toggleButton(1, ch2.selected);" />
            </mx:FormItem>
            <mx:FormItem label="ColorPicker enabled:">
                <mx:CheckBox id="ch3"
                        selected="true"
                        click="toggleButton(2, ch3.selected);" />
            </mx:FormItem>
            <mx:FormItem label="ComboBox enabled:">
                <mx:CheckBox id="ch4"
                        selected="true"
                        click="toggleButton(3, ch4.selected);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            itemClick="lbl.text = event.label;" />
 
    <mx:Label id="lbl" />
 
</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/10/setting-skins-on-the-the-flex-buttonbar-control/ -->
<mx:Application name="ButtonBar_buttonStyleName_skin_test "
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        ButtonBar {
            buttonStyleName: myCustomButtonStyleName;
            color: #999999;
        }
 
        .myCustomButtonStyleName {
            skin: Embed(source="assets/ButtonBarSkins.swf",
                        symbol="ButtonBarButton_skin");
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            private function slider_change(evt:SliderEvent):void {
                buttonBar.setStyle("buttonHeight", evt.value);
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="buttonHeight:">
                <mx:HSlider id="slider"
                        minimum="24"
                        maximum="64"
                        snapInterval="1"
                        tickInterval="4"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}" />
 
</mx:Application>

View source is enabled in the following example.

For simplicity sake, I only set the generic “skin” style which applies to all states (up, over, down, and disabled). You will also notice that we embedded a skin from a SWF file and the skins various scale grid settings (scaleGridTop, scaleGridBottom, scaleGridLeft, and scaleGridRight) are set in the FLA/SWF file and not in the MXML file itself. This allows you to resize the ButtonBar control without distorting the 2 pixel border on the bottom of the skin.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/09/creating-a-custom-label-function-on-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonBar;

            private var buttonBarXML:XML = describeType(ButtonBar);

            private function buttonBar_labelFunc(item:Object):String {
                var cat:String = item.category.toUpperCase();
                var len:uint = buttonBarXML.factory.child(item.data).length();
                return cat + " (" + len + ")";
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object category="Accessors" data="accessor" />
        <mx:Object category="Methods" data="method" />
    </mx:Array>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            labelFunction="buttonBar_labelFunc" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/09/determining-which-button-was-pressed-in-a-flex-buttonbar-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.buttonBarClasses.ButtonBarButton;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private function buttonBar_itemClick(evt:ItemClickEvent):void {
                var message:String = ObjectUtil.toString(evt.item);
                var title:String = "[" + evt.index + "] " + evt.label;
                Alert.show("item: " + message, title);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" data="15" />
        <mx:Object label="Two" data="12" custom="seven" />
        <mx:Object label="Three" data="9" />
        <mx:Object label="Four" custom="eleven" />
        <mx:Object label="Five" name="Peter" />
    </mx:Array>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            itemClick="buttonBar_itemClick(event);" />

</mx:Application>

View source is enabled in the following example.

As you can see, you can use several different properties in the ItemClickEvent to determine which button was pressed:

• The index property is the zero-based index of the navigation item that was clicked.
• The label property is the label of the navigation item that was clicked.
• The item property is the item in the data provider of the navigation item that was clicked.

The following example shows how you can create the previous example using ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/09/determining-which-button-was-pressed-in-a-flex-buttonbar-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.ButtonBar;
            import mx.controls.buttonBarClasses.ButtonBarButton;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private var buttonBar:ButtonBar;
            private var arr:Array;

            private function init():void {
                arr = [];
                arr.push({label:"One", data:15});
                arr.push({label:"Two", data:12, custom:"seven"});
                arr.push({label:"Three", data:9});
                arr.push({label:"Four", custom:"eleven"});
                arr.push({label:"Five", name:"Peter"});

                buttonBar = new ButtonBar();
                buttonBar.dataProvider = arr;
                buttonBar.addEventListener(ItemClickEvent.ITEM_CLICK, buttonBar_itemClick);
                addChild(buttonBar);
            }

            private function buttonBar_itemClick(evt:ItemClickEvent):void {
                var message:String = ObjectUtil.toString(evt.item);
                var title:String = "[" + evt.index + "] " + evt.label;
                Alert.show("item: " + message, title);
            }
        ]]>
    </mx:Script>

</mx:Application>