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

by Peter deHaan on August 17, 2007

in Button, Styles

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.

{ 3 comments… read them below or add one }

1 Jacob P April 17, 2009 at 10:09 am

what are the hex number for the haloColors?

Reply

2 Peter deHaan April 17, 2009 at 1:27 pm

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

Reply

3 Benny July 22, 2009 at 1:58 am

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

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: