Flex Examples

In a previous example, “Setting the label placement on a TabBar control in Flex”, we saw how you could loop over the tabs in a Flex TabBar control and set each tab’s labelPlacement property using the getChildAt() method.

The following example shows how you can loop over the tabs in a Flex TabNavigator container and set each tab’s labelPlacement property using the getTabAt() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/07/setting-the-label-placement-on-a-tabnavigator-container-in-flex/ -->
<mx:Application name="TabNavigator_getTabAt_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function init():void {
                var tab:Tab;
                var idx:uint;
                var len:uint = tabNavigator.numChildren;
                for (idx=0; idx<len; idx++) {
                    tab = tabNavigator.getTabAt(idx) as Tab;
                    tab.labelPlacement = tab.label;
                }
            }
        ]]>
    </mx:Script>

    <mx:TabNavigator id="tabNavigator"
            tabWidth="150"
            tabHeight="60"
            height="100%"
            creationComplete="init();">
        <mx:VBox label="left"
                icon="@Embed('assets/arrow_left.png')">
            <mx:Label text="labelPlacement = 'left'" />
        </mx:VBox>
        <mx:VBox label="right"
                icon="@Embed('assets/arrow_right.png')">
            <mx:Label text="labelPlacement = 'right'" />
        </mx:VBox>
        <mx:VBox label="top"
                icon="@Embed('assets/arrow_up.png')">
            <mx:Label text="labelPlacement = 'top'" />
        </mx:VBox>
        <mx:VBox label="bottom"
                icon="@Embed('assets/arrow_down.png')">
            <mx:Label text="labelPlacement = 'bottom'" />
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>