Setting skins on the the Flex ButtonBar control

The following example shows how you can skin the ButtonBar control in Flex by setting the buttonStyleName style and setting one or more of the following skin styles: skin, upSkin, overSkin, downSkin, disabledSkin.

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.

10 thoughts on “Setting skins on the the Flex ButtonBar control

  1. Hi!
    Thanks for your articles, they are great!

    I have a question:
    I need a ToggleButtonBar (or a ButtonBar) where I can define, that when a button is pressed that it will change its background color, so that it’s visible, which button was pressed.
    But I only can change the text color or the border.
    I tried it with: fillColors, backgroundColor, backgroundGradientColors, etc.
    Also with two different skins on buttonStyleName and selectedButtonTextStyleName (as you showed it in this article). Didn’t work.

    Do you know how I could do that?

    Thanks a lot,
    Fritz

  2. Fritz Dimmel,

    You need to use downSkin in the CSS. The button was ‘pressed’, so now it’s in the down position.

  3. Hi,

    I am battling with an extremely “simple” problem:
    How do I change the color of the text on the ButtonBar? I can initially set it to any color but the rollover and down colors of the text revert to black!
    Please help….

Comments are closed.