Setting the label placement on a TabNavigator container in Flex

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>

2 thoughts on “Setting the label placement on a TabNavigator container in Flex

  1. I’m using Flex3.3, but the above example does not work. The getTabAt(index) seems not to work for me.

    Any idea why?

  2. This is also buggy here, using Flex 3.3, FP 10, and Firefox 3.0.7. Has strange redraw issues when clicking the tabs.

Comments are closed.