Styling the last button in a ButtonBar control in Flex

The following example shows how you can style the last button in a Flex ButtonBar control by setting the lastButtonStyleName style.

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>

Tagged as: lastButtonStyleName