Monthly Archives: April, 2009

Speaking at Flex 360 Indianapolis

Ryan Frishberg and I will be speaking at Flex 360 in Indianapolis. It will be my first big speaking engagement 😮  We’ll be talking about creating custom ItemRenderers. We actually gave this talk at 360 MAX, but, that was a small unconference, but, I’d say it was good practice.  We will likely change our talk to include more about Flex 4 and how itemRenderers will work in the upcoming release. Most of the talk will still revolve around Flex 3 itemRenderers though. The conference runs from May 18-20. We are on the schedule for speaking Monday afternoon.

If you are coming to the conference, you should also come join us on Sunday for another BugQuash. Matt Chotin, myself, Ryan and Vera Carr should be there in person trying to help answer questions and get through more bugs! Details about the time and location of the bugquash can be found here:

See you in Indy!

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 id=”middleButton” >
<s:ButtonBarButton skinClass=”spark.skins.default.ButtonBarMiddleButtonSkin”
textAlign=”right” width=”100%” height=”100%” />

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

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

Sample SWF: textAlignButtonBarSample.swf