Setting the tab width on an MX TabNavigator container in Flex 3

In a previous example, “Setting the tab width on a TabBar control in Flex”, we saw how you could set the tab width on a Flex MX TabBar control by setting the aptly named tabWidth style.

The following example shows how you can can set the tab width on an MX TabNavigator container in Flex by setting the tabWidth style.

In the following example the first TabNavigator container, tn1, allows Flex to control how wide each tab should be. The second TabNavigator container, tn2, sizes each tab equally, regardless of label length by setting the tabWidth style to the TabNavigator width divided by the number of tabs. The third and fourth TabNavigator container, tn3 and tn4, set the TabNavigator container’s internal tab bar instance to the same width as the TabNavigator container. This allows the tabs to resize themselves based on the width of their content making it less likely that longer labels will truncate unnecessarily.

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/06/22/setting-the-tab-width-on-an-mx-tabnavigator-container-in-flex-3/ -->
<mx:Application name="MX_TabNavigator_tabWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:local="*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            protected function createCanvas(lbl:String):Canvas {
                var can:Canvas = new Canvas();
                can.label = lbl;
                return can;
            }
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                tn1.addChild(createCanvas("C"));
                tn2.addChild(createCanvas("C"));
                tn3.addChild(createCanvas("C"));
                tn4.addChild(createCanvas("C"));
 
                tn2.setStyle("tabWidth", tn2.width / tn2.numChildren);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add Tab" click="button1_clickHandler(event)" />
    </mx:ApplicationControlBar>
 
    <mx:Form>
        <mx:FormItem label="Default sizing:">
            <mx:TabNavigator id="tn1" width="240" height="100">
                <mx:Canvas label="Contacts">
                    <mx:Label id="lbl1" enterFrame="lbl1.text = tn1.getTabAt(0).width.toString();" />
                </mx:Canvas>
                <mx:Canvas label="SMS">
                </mx:Canvas>
                <mx:Canvas label="B">
                </mx:Canvas>
            </mx:TabNavigator>
        </mx:FormItem>
 
        <mx:FormItem label="Equal sizing:">
            <mx:TabNavigator id="tn2"
                    tabWidth="{tn2.width/tn2.numChildren}"
                    width="240" height="100">
                <mx:Canvas label="Contacts">
                    <mx:Label id="lbl2"
                            enterFrame="lbl2.text = tn2.getTabAt(0).width.toString();" />
                </mx:Canvas>
                <mx:Canvas label="SMS">
                </mx:Canvas>
                <mx:Canvas label="B">
                </mx:Canvas>
            </mx:TabNavigator>
        </mx:FormItem>
 
        <mx:FormItem label="Content sizing:" direction="horizontal">
            <mx:TabNavigator id="tn3" width="240" height="100"
                             resize="event.currentTarget.mx_internal::getTabBar().width = event.currentTarget.width;">
                <mx:Canvas label="Contacts">
                    <mx:Label id="lbl3" enterFrame="lbl3.text = tn3.getTabAt(0).width.toString();" />
                </mx:Canvas>
                <mx:Canvas label="SMS">
                </mx:Canvas>
                <mx:Canvas label="B">
                </mx:Canvas>
            </mx:TabNavigator>
 
            <local:ResizerTabNavigator id="tn4" width="240"  height="100">
                <mx:Canvas label="Contacts">
                    <mx:Label id="lbl4" enterFrame="lbl4.text = tn4.getTabAt(0).width.toString();" />
                </mx:Canvas>
                <mx:Canvas label="SMS">
                </mx:Canvas>
                <mx:Canvas label="B">
                </mx:Canvas>
            </local:ResizerTabNavigator>
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

And the custom MX TabNavigator container, ResizerTabNavigator.as, is as follows:

/** http://blog.flexexamples.com/2010/06/22/setting-the-tab-width-on-an-mx-tabnavigator-container-in-flex-3/ */
package {
    import mx.containers.TabNavigator;
    import mx.events.ResizeEvent;
 
    public class ResizerTabNavigator extends TabNavigator {
        public function ResizerTabNavigator() {
            super();
            addEventListener(ResizeEvent.RESIZE, resizeEventListener);
        }
 
        protected function resizeEventListener(evt:ResizeEvent):void {
            tabBar.width = this.width;
        }
    }
}

View source is enabled in the following example.

[GoogleAdsWide]

Or you can create the custom MX TabNavigator container in MXML as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/22/setting-the-tab-width-on-an-mx-tabnavigator-container-in-flex-3/ -->
<mx:Application name="MX_TabNavigator_tabWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:local="*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <local:ResizerTabNavigatorMXML id="tn5" width="240"  height="100">
        <mx:Canvas label="Contacts">
            <mx:Label id="lbl5" enterFrame="lbl5.text = tn5.getTabAt(0).width.toString();" />
        </mx:Canvas>
        <mx:Canvas label="SMS">
        </mx:Canvas>
        <mx:Canvas label="B">
        </mx:Canvas>
    </local:ResizerTabNavigatorMXML>
 
</mx:Application>

And the custom MX TabNavigator container, ResizerTabNavigatorMXML.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/22/setting-the-tab-width-on-an-mx-tabnavigator-container-in-flex-3/ -->
<mx:TabNavigator name="ResizerTabNavigatorMXML"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        resize="resizeEventListener(event);">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
 
            protected function resizeEventListener(evt:ResizeEvent):void {
                tabBar.width = this.width;
            }
        ]]>
    </mx:Script>
 
</mx:TabNavigator>

3 thoughts on “Setting the tab width on an MX TabNavigator container in Flex 3

  1. Hi,
    I noticed whenever this page is loading, the Tab Navigator’s 1st Tab text is truncating. If I will mouse over to the particular tab it’s showing the complete text.

    Can you put some light to this, as I am also facing the same issue in my app.

    Thanks

Comments are closed.