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

By Peter deHaan On June 22, 2010 · 3 Comments

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.

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>

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

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

Apoorv says:

June 22, 2010 at 9:14 pm

Hello peter , I was reading 1 of your old blog regarding tree control

http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/

while running the application i get two errors ..
1)Access of possibly undefined property dataDescriptor through a reference with static type Tree.
2)Access of possibly undefined property selectedItem through a reference with static type Tree.

Please help me out.

Apoorv

Reply
Satya says:

March 15, 2011 at 12:29 am

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

Reply
- Peter deHaan says:
  
  March 15, 2011 at 8:19 am
  
  @Satya,
  
  Good catch! Can you test this in the latest nightly Flex 3.x builds ( http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 ) and file a bug at http://bugs.adobe.com/flex if you are still seeing the issue.
  
  Thanks,
  Peter
  
  Reply

M	T	W	T	F	S	S
« May				Jul »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Just a bunch of Adobe Flex Examples

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

Peter deHaan

Add Widgets (Content Sidebar)

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

Leave a Reply Cancel reply

Categories

Articles

Calendar

Meta

Pages

The Latest

Setting the icon placement on a Spark Button control in Flex Hero

More