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

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.

5 thoughts on “Setting a Flex Button control’s border color and theme color

  1. Jacob P,

    haloBlue = #009DFF
    haloGreen = #80FF4D
    haloOrange = #FFB600
    haloSilver = #AECAD9

    You can convert other named colors to hex values using the following:

    <?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>
    

    Peter

  2. Thanks ~~ is that any method to remove the border and hover effect? In fact, I’m working on a button which is circle. I use a PNG with transparent background. When I use

    I can see the border and the background color is in light grey~ Any way to customize a button for different status such as mouse over, mouse click, release ? Thanks so much~~

Comments are closed.