Styling the Selected Button of a ButtonBar (Flex 3 vs Gumbo)

Styling the ‘selected’ button for a Flex ButtonBar in Flex 3 isn’t that straightforward, in my opinion. You need to write some code on the itemClick handler to cycle through the buttons of the ButtonBar to see if each button is selected or not. If it is selected, set some styles. If its not selected, set some other styles. The code will look something like this:

private function changeHandler(): void
{
for(var i:int=0; i < bb.dataProvider.length; i++)
{
var button1:Button = Button(bb.getChildAt(i));
if(button1.selected)
{
button1.styleName=”selectedStyle”;
}
else
{
button1.styleName=”unselectedStyle”;
}
}

}

You can view the example code and check out the swf here:

Flex 3 Sample code: ButtonBar_selectedStyle.mxml

Flex 3 Sample swf: ButtonBar_selectedStyle.swf

In Flex 4, styling just the selected button of a Gumbo ButtonBar is much easier using a combination of the new Advanced CSS selector types: descendant and pseudo selectors.  With descendant selectors, you can specify a style for any child of a given parent type (at any level). For example, for a ToggleButton in a ButtonBar, we are going to use:

FxButtonBar FxToggleButton { someStyle: #598800; }

The selector above will affect all the FxToggleButtons that are children of FxButtonBars. Since we only want to change buttons in a selected state, we will use the pseudo selector which you use with Gumbo states. To see what states you can reference for the FxToggleButtons, you can look at its skin FxToggleButtonSkin. In the skin, you have the following states:

<states>
<State name=”up” />
<State name=”over” stateGroups=”overStates” />
<State name=”down” stateGroups=”downStates” />
<State name=”disabled” stateGroups=”disabledStates” />
<State name=”upAndSelected” stateGroups=”selectedStates, selectedUpStates” />
<State name=”overAndSelected” stateGroups=”overStates, selectedStates” />
<State name=”downAndSelected” stateGroups=”downStates, selectedStates” />
<State name=”disabledAndSelected” stateGroups=”selectedUpStates, disabledStates, selectedStates” />
</states>

So, using  a pseudo selector, you can set styles associated with any of these states using a “:” before a state. We will create the following CSS Selector:

FxButtonBar FxToggleButton:upAndSelected,
FxButtonBar FxToggleButton:overAndSelected,
FxButtonBar FxToggleButton:downAndSelected{
baseColor: #FF9933;
}

That is all you need to do to style the selected button of a Gumbo ButtonBar. You don’t have to write any Actionscript (as in Flex 3). You can just use a CSS selector. Ah the beauty of easier styling in Flex 4!

Flex 4 Sample code: FxButtonBar_selectedStyle.mxml

Flex 4 Sample swf: FxButtonBar_selectedStyle.swf

To find out more about the new Advanced CSS Selectors, check out the spec on opensource.adobe.com.

4 responses

  1. Roberto Kalili | Reply

    Thank you for your post. Congratulations…

  2. Hey pals,

    good work ya.. Can u also tell me, how to get the last button get selected on load… This one auto selects the 1st Button on Load.

  3. Everything is very open with a very clear explanation of the issues.

    It was really informative. Your website is very helpful. Many
    thanks for sharing!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: