Setting textAlign in a Spark ButtonBar

The new Spark ButtonBar is just a DataGroup that has itemRenderers that are of type ButtonBarButton. Since textAlign is a style on ButtonBar, you would think that simply setting this style inline would move all of your labels for each button.

<mx:ButtonBar dataProvider=”{blah}” textAlign=”right” />

However, this does not work as noted in bug SDK-18610. Apparently, the textAlign style is already set on the Buttons which are subcomponents of the ButtonBar. In Gumbo, styles set on a component cannot override styles set on a subcomponent.

Therefore, to change the textAlign for a ButtonBar, you will need to change the textAlign properties of each ButtonBarButton in the ButtonBar skin.  I don’t think this is that intuitive, but, so it goes. Luckily, you won’t run into this same issue of styles not working throughout the framework because we rarely set styles on components, we only set them globally. So, textAlign is an outlier.

Here is what you want your ButtonBar to look like (labels to the right):

bbbarSo, your ButtonBar will use a custom skin:

<s:ButtonBar creationComplete=”bb1.dataProvider=cityTours” id=”bb1″
width=”350″ x=”20″ y=”40″ skinClass=”CustomButtonBarSkin” />

And, your custom skin will have itemRenderers of ButtonBarButtons that set the textAlign style:

<fx:Component id=”firstButton”>
<s:ButtonBarButton skinClass=”spark.skins.default.ButtonBarFirstButtonSkin”
textAlign=”right” width=”100%” height=”100%” />
</fx:Component>

<fx:Component id=”middleButton” >
<s:ButtonBarButton skinClass=”spark.skins.default.ButtonBarMiddleButtonSkin”
textAlign=”right” width=”100%” height=”100%” />
</fx:Component>

<fx:Component id=”lastButton” >
<s:ButtonBarButton skinClass=”spark.skins.default.ButtonBarLastButtonSkin”
textAlign=”right” width=”100%” height=”100%”  />
</fx:Component>

Code for the example: textAlignButtonBarSample.mxml, CustomButtonBarSkin.mxml

Sample SWF: textAlignButtonBarSample.swf

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: