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.
<?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.
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.
Share
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~~
to remove border, see:
http://www.rozengain.com/blog/2008/10/21/removing-a-button-border-linkbuttons-background-flex/
is it possible to give the whole button a color instead of just the border?