Creating a custom label function on a Flex ButtonBar control

The following example shows how you can use a custom label function to create button labels on a ButtonBar control in Flex by setting the labelFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/09/creating-a-custom-label-function-on-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonBar;

            private var buttonBarXML:XML = describeType(ButtonBar);

            private function buttonBar_labelFunc(item:Object):String {
                var cat:String = item.category.toUpperCase();
                var len:uint = buttonBarXML.factory.child(item.data).length();
                return cat + " (" + len + ")";
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object category="Accessors" data="accessor" />
        <mx:Object category="Methods" data="method" />
    </mx:Array>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            labelFunction="buttonBar_labelFunc" />

</mx:Application>

View source is enabled in the following example.

2 thoughts on “Creating a custom label function on a Flex ButtonBar control

  1. Great example – thanks.
    Is it possible to style the text?. In your example, “METHODS (91)”. Can the “91” be styled red, or bold, and the text “METHOD” would be left the way it is.

    Thanks

    1. @Brad,

      I believe the Button label only supports single style formatted text and not HTML formatted text. Although there may be a way to set the htmlText property using ActionScript or by creating a custom skin or something.

      Peter

Comments are closed.