Changing the label placement on an MX TabBar control in Flex

In a previous example, “Changing the label placement on an MX ButtonBar control in Flex (redux)”, we saw how you could set the label/icon placement on an MX ButtonBar control in Flex by extending the MX ButtonBar class and setting the navItemFactory property in the mx_internal namespace to a custom class.

The following example shows how you can set the label/icon placement on an MX TabBar control in Flex by extending the MX TabBar class and setting the navItemFactory property in the mx_internal namespace to a custom Tab button class.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ -->
<mx:Application name="MX_TabBar_navItemFactory_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <comps:CustomTabBar id="tb"
            dataProvider="{viewstack}"
            labelField="label"
            iconField="icon"
            width="300" />
 
    <mx:ViewStack id="viewstack"
            backgroundColor="white"
            width="300" height="100">
        <mx:Canvas id="tab_1"
                label="Tab 1"
                icon="@Embed('Assets.swf#CloseButtonUp')">
            <mx:Button />
        </mx:Canvas>
        <mx:Canvas id="tab_2"
                label="Tab 2"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ColorPicker />
        </mx:Canvas>
        <mx:Canvas id="tab_3"
                label="Tab 3"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ComboBox dataProvider="[red,orange,yellow,green,blue]" />
        </mx:Canvas>
    </mx:ViewStack>
 
</mx:Application>

The custom MX TabBar control, comps/CustomTabBar.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ */
package comps {
    import mx.controls.TabBar;
    import mx.core.ClassFactory;
    import mx.core.mx_internal;
 
    public class CustomTabBar extends TabBar {
        public function CustomTabBar() {
            super();
            mx_internal::navItemFactory = new ClassFactory(CustomTab);
        }
    }
}

And the custom nav item factory, comps/CustomTab.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ */
package comps {
    import mx.controls.tabBarClasses.Tab;
 
    public class CustomTab extends Tab {
        public function CustomTab() {
            super();
            labelPlacement = "top";
        }
    }
}

4 thoughts on “Changing the label placement on an MX TabBar control in Flex

Comments are closed.