Setting a label function on a LinkBar control in Flex

The following example shows how you can set a label function on a Flex LinkBar control to change each link’s label to uppercase by setting the labelFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/ -->
<mx:Application name="LinkBar_labelFunction_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.Container;

            private function linkBar_labelFunc(item:Container):String {
                return item[linkBar.labelField].toUpperCase();
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr1">
        <mx:Object label="One fish" />
        <mx:Object label="Two fish" />
    </mx:Array>

    <mx:Array id="arr2">
        <mx:Object label="Red fish" />
        <mx:Object label="Blue fish" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{viewStack}"
            labelFunction="linkBar_labelFunc" />

    <mx:ViewStack id="viewStack" width="200">
        <mx:VBox label="VBox One">
            <mx:DataGrid id="dataGrid1"
                    dataProvider="{arr1}"
                    draggableColumns="false"
                    width="100%"
                    height="100%" />
        </mx:VBox>
        <mx:VBox label="VBox Two">
            <mx:DataGrid id="dataGrid2"
                    dataProvider="{arr2}"
                    draggableColumns="false"
                    width="100%"
                    height="100%" />
        </mx:VBox>
    </mx:ViewStack>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/08/setting-a-label-function-on-a-linkbar-control-in-flex/ -->
<mx:Application name="LinkBar_labelFunction_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.VBox;
            import mx.containers.ViewStack;
            import mx.controls.DataGrid;
            import mx.controls.LinkBar;
            import mx.core.Container;

            private var arr1:Array;
            private var arr2:Array;
            private var dataGrid1:DataGrid;
            private var dataGrid2:DataGrid;
            private var linkBar:LinkBar;
            private var vBox1:VBox;
            private var vBox2:VBox;
            private var viewStack:ViewStack;

            private function init():void {
                arr1 = [];
                arr1.push({label:"One fish"});
                arr1.push({label:"Two fish"});

                arr2 = [];
                arr2.push({label:"Red fish"});
                arr2.push({label:"Blue fish"});

                dataGrid1 = new DataGrid();
                dataGrid1.dataProvider = arr1;
                dataGrid1.draggableColumns = false;
                dataGrid1.percentWidth = 100;
                dataGrid1.percentHeight = 100;

                dataGrid2 = new DataGrid();
                dataGrid2.dataProvider = arr2;
                dataGrid2.draggableColumns = false;
                dataGrid2.percentWidth = 100;
                dataGrid2.percentHeight = 100;

                vBox1 = new VBox();
                vBox1.label = "VBox One";
                vBox1.addChild(dataGrid1);

                vBox2 = new VBox();
                vBox2.label = "VBox Two";
                vBox2.addChild(dataGrid2);

                viewStack = new ViewStack();
                viewStack.addChild(vBox1);
                viewStack.addChild(vBox2);
                viewStack.width = 200;

                linkBar = new LinkBar();
                linkBar.dataProvider = viewStack;
                linkBar.labelFunction = linkBar_labelFunc;
                addChild(linkBar);

                addChild(viewStack);
            }

            private function linkBar_labelFunc(item:Container):String {
                return item[linkBar.labelField].toUpperCase();
            }
        ]]>
    </mx:Script>

</mx:Application>