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.
<?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 }
what are the hex number for the haloColors?
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
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~~