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.

Tagged as: describeType(), labelFunction