An easy vertical Spark ButtonBar skin

The default skin for the Spark ButtonBar was not really created for a vertical layout. It is suited for a horizontal layout where the first button and the last button look mildly different. The middle buttons will be all the same. Therefore, when you use a Spark ButtonBar and assign a VerticalLayout:

<s:ButtonBar dataProvider=”{myData}”>

<s:layout> <s:VerticalLayout /> </s:layout>

</s:ButtonBar>

your components doesn’t look that great. You will get something like this:

verticalButtonBar1

Notice that the first button has rounded corners on the left side and the last button has rounded corners on the right.

For a vertical ButtonBar, you probably actually want all of your buttons to look identical. In this case, you would create a custom skin and remove the optional skin parts for ‘firstButton’ and ‘lastButton’. The skin part ‘middleButton’ is required. The ‘middleButton’ is used for all of the buttons in a ButtonBar if no ‘firstButton’ or ‘lastButton’ exist.

Here is the code for my custom vertical ButtonBar skin:
<?xml version=”1.0″ encoding=”utf-8″?>

<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243; xmlns:s=”library://ns.adobe.com/flex/spark” alpha.disabled=”0.5″>

<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.default.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.ButtonBar")]
]]>
</fx:Metadata>

<s:states>
<s:State name=”normal” />
<s:State name=”disabled” />
</s:states>

<fx:Declarations>
<!– There is no skin part declared for firstButton or lastButton –>
<fx:Component id=”middleButton” >
<s:ButtonBarButton skinClass=”CustomButtonSkin” left=”0″ right=”0″ >
<s:filters>
<s:GlowFilter color=”0xFFFF66″ strength=”5″ />
</s:filters>
</s:ButtonBarButton>
</fx:Component>

</fx:Declarations>

<!—
@copy spark.components.SkinnableDataContainer#dataGroup
–>
<s:DataGroup id=”dataGroup” width=”100%” height=”100%” />

</s:Skin>
The differences in this custom skin are:

1) There is no firstButton and lastButton skin part.

2) I have chosen to use a custom skin for my middleButton ButtonBarButton because I wanted to change the cornerRadius of the buttons.

3) I’ve added a yellow glow to each button using a GlowFilter.

4) I’ve removed the layout assignment in the DataGroup of this skin.

Here is the resulting vertical ButtonBar. All of the buttons have a cornerRadius of 10 and a yellow glow.

verticalButtonBar2

Run the sample: ButtonBarExample.swf

Download the application and custom skins: VerticalButtonBar.zip

Note, I’ve customized the colors on the buttons of the ButtonBar using Advanced CSS (pseudo selectors and descendant selectors).

About these ads

9 responses

  1. Thank you for this tutorials

  2. any idea on how to make set the button bar to not be able to be unselected? So buttonBar.selectedIndex != -1? I can’t find a property on it, I think I would have to extend it to add the functionality

    1. @Garth: Try setting requireSelection=true on the Spark ButtonBar. If this property is set, you won’t be able to unselect a Button because a selection is required.

      1. I swear that didn’t work the first time I tried it :)
        Thanks you saved my life.

  3. Thanks for saving my time.i have the same problem as Garth had.

  4. Hi,

    Is it possible to change the background color of the button in the button bar in flex 4.6 from gradient black-grey to just black? Thanks.

  5. I was struggling with this and finally got a solution. Thanks a million. Also please let us know how to skin the other mouse effects..

  6. link to download sources is broken…

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: