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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

5 Responses to Setting a Flex Button control’s border color and theme color

  1. Jacob P says:

    what are the hex number for the haloColors?

  2. Peter deHaan says:

    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

  3. Benny says:

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

  4. KJ says:

    is it possible to give the whole button a color instead of just the border?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree