Home > flex > Coloring the selected button on a ToggleButtonBar

Coloring the selected button on a ToggleButtonBar

February 2nd, 2010 Adam Leave a comment Go to comments

Surprisingly, the only special highlighting options for Flex’s ToggleButtonBar is for the button text. There is no way to inherently change the background color of the selected button.

Here’s a component that lets you specify the button highlight color. It overrides the hiliteSelectedNavItem function. I used this function because I needed to be able to set the bar’s selectedIndex programmatically, so I coldn’t use any sort of click events.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

main.mxml:

1
2
3
4
5
6
7
8
9
10

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:ColoredToggleButtonBar selectedButtonColor="#d9b993" 
		selectedButtonBorderColor="#7f6e63">
		<mx:dataProvider>
			<mx:String>Button 1</mx:String>
			<mx:String>Button 2</mx:String>
			<mx:String>Button 3</mx:String>
		</mx:dataProvider>
	</mx:ColoredToggleButtonBar>
</mx:Application>

ColoredToggleButtonBar.as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

package{
	import mx.controls.Button;
	import mx.controls.ToggleButtonBar;
 
	public class ColoredToggleButtonBar extends ToggleButtonBar{
		public function ColoredToggleButtonBar(){
			super();
		}
 
		public var selectedButtonColor:String;
		public var selectedButtonBorderColor:String;
 
		override protected function hiliteSelectedNavItem(index:int):void{
			var child:Button;
 
			// remove hilite
			if(selectedIndex > -1){
				child = Button(getChildAt(selectedIndex));
				child.clearStyle('fillColors');
				child.clearStyle('themeColor');
			}
 
			// run old hilite handler
			super.hiliteSelectedNavItem(index);
 
			// add new hilite
			if (index > -1){
				child = Button(getChildAt(selectedIndex));
				if(selectedButtonColor)
					child.setStyle('fillColors', [selectedButtonColor, selectedButtonColor]);
				if(selectedButtonBorderColor)
					child.setStyle('themeColor', selectedButtonBorderColor);
			} 
 
		}
	}
}
Categories: flex Tags: , , , , , ,
  1. Vincent
    May 18th, 2010 at 13:15 | #1
    Reply | Quote

    Hey,

    thanks a lot for this post.
    But I have a problem, where do you have to save the “ColoredToggleButtonBar.as”, or how do you import it.

    Because I have the following error:
    “Could not resolve to a component implementation.”

    Thanks a lot.
    Vincent

  2. nancy
    June 17th, 2011 at 08:23 | #2
    Reply | Quote

    I am getting the same above error,
    How to fix this?

  3. Adam
    June 20th, 2011 at 08:57 | #3
    Reply | Quote
  1. No trackbacks yet.
CAPTCHA Image
*