Archive

Archive for February, 2010

Coloring the selected button on a ToggleButtonBar

February 2nd, 2010 Adam 3 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: , , , , , ,