Setting a Flex Button control’s border color and theme color at Flex Examples

The following example shows how you can change the Button control’s borderColor and themeColor properties to one of the special Flex “halo” colors (”haloBlue”, “haloGreen”, “haloOrange” or “haloSilver”). Note that you can also use any other named or hex color as well, such as “red” or 0xFF0000.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/17/setting-a-flex-button-controls-border-color-and-theme-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function comboBox_change(value:String):void {
                myButton.label = value;
                myButton.setStyle("borderColor", value);
                myButton.setStyle("themeColor", value);
            }
        ]]>
    </mx:Script>

    <mx:ComboBox id="comboBox"
            prompt="Please select a color..."
            selectedIndex="-1"
            change="comboBox_change(event.currentTarget.selectedLabel)">
        <mx:dataProvider>
            <mx:Object label="haloBlue" />
            <mx:Object label="haloGreen" />
            <mx:Object label="haloOrange" />
            <mx:Object label="haloSilver" />
        </mx:dataProvider>
    </mx:ComboBox>

    <mx:Button id="myButton"
            emphasized="true"
            fontSize="16"
            width="{comboBox.width}"
            height="{int(comboBox.width * 0.5)}" />

</mx:Application>

View source is enabled in the following example.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.controls.Label; private function getHex(evt:Event):void { var lbl:Label = evt.currentTarget as Label; lbl.text += "#" + ("000000" + lbl.getStyle("color").toString(16)).substr(-6).toUpperCase(); } ]]> </mx:Script> <mx:Label id="haloBlueLabel" text="haloBlue = " color="haloBlue" initialize="getHex(event);" /> <mx:Label id="haloGreenLabel" text="haloGreen = " color="haloGreen" initialize="getHex(event);" /> <mx:Label id="haloOrangeLabel" text="haloOrange = " color="haloOrange" initialize="getHex(event);" /> <mx:Label id="haloSilverLabel" text="haloSilver = " color="haloSilver" initialize="getHex(event);" /> </mx:Application>