Applying custom skins and styles to ToggleButtonBar buttons independently

I recently had a requirement to apply custom skins and styles to a set of ToggleButtonBar buttons. The thing was, each button had a different icon and style to apply. The Flex framework makes it easy to style the first and last buttons with the firstButtonStyleName and lastButtonStyleName attributes, but these didn’t go quite far enough.

It’s easy to handle this by a function similar to the one below:

<pre><code>private function styleMyToggleButtons():void{    
  var btn1:Object = Object( myToggleButtonBar.getChildAt( 0 ) );    
  var btn2:Object = Object( myToggleButtonBar.getChildAt( 1 ) );    
  var btn3:Object = Object( myToggleButtonBar.getChildAt( 2 ) );    
  var btn4:Object = Object( myToggleButtonBar.getChildAt( 3 ) );    
  var btn5:Object = Object( myToggleButtonBar.getChildAt( 4 ) );

  btn1.styleName = "firstButtonStyleName";          
  btn2.styleName = "secondButtonStyleName";          
  btn3.styleName = "thirdButtonStyleName";          
  btn4.styleName = "fourthButtonStyleName";          
  btn5.styleName = "fifthButtonStyleName";
}


Note: Why cast each button as “Object” rather than “Button”? Because the actual under-the-covers type is “ToggleBarButton” (I think that was the name – you can see for yourself in debugger). When cast as button, the resulting variable is not a handle to the button, but to a copy of it. Because of this, the style changes never appear in the layout because they belong to components in memory that are not present on the screen.

Next, create CSS styles for each button (and name accordingly), then flesh out each one using normal CSS syntax (ie. up/over/down/selected skins, icon, etc).

Then, just figure out where/when to call your method. UpdateDisplayList() or commitProperties() are probably some of the most common places to do this.

I realize that this isn’t rocket science, nor is it hard. Hopefully though, this will give you some ideas for creating a quick solution to a challenge with ToggleButtonBar buttons.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: