Flex Examples » tabWidth http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the tab width on an MX TabNavigator container in Flex 3 http://blog.flexexamples.com/2010/06/22/setting-the-tab-width-on-an-mx-tabnavigator-container-in-flex-3/ http://blog.flexexamples.com/2010/06/22/setting-the-tab-width-on-an-mx-tabnavigator-container-in-flex-3/#comments Tue, 22 Jun 2010 20:05:12 +0000 Peter deHaan http://blog.flexexamples.com/?p=3185 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 [...]]]> 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>
 
]]> http://blog.flexexamples.com/2010/06/22/setting-the-tab-width-on-an-mx-tabnavigator-container-in-flex-3/feed/ 3 Setting the tab width on a TabBar control in Flex http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/#comments Sun, 05 Oct 2008 05:25:19 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ The following example shows how you can set the tab width on a Flex TabBar control by setting the aptly named tabWidth style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ --> <mx:Application name="TabBar_tabWidth_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Red" /> <mx:Object label="Orange" /> <mx:Object label="Yellow" [...]]]> The following example shows how you can set the tab width on a Flex TabBar control by setting the aptly named tabWidth style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_tabWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Red" />
        <mx:Object label="Orange" />
        <mx:Object label="Yellow" />
        <mx:Object label="Green" />
        <mx:Object label="Blue" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="tabWidth:">
                <mx:HSlider id="slider"
                        minimum="40"
                        maximum="120"
                        value="100"
                        snapInterval="1"
                        tickInterval="10"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TabBar id="tabBar"
            dataProvider="{arr}"
            tabWidth="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

You can also set the tabWidth style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_tabWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TabBar {
            tabWidth: 120;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Red" />
        <mx:Object label="Orange" />
        <mx:Object label="Yellow" />
        <mx:Object label="Green" />
        <mx:Object label="Blue" />
    </mx:Array>

    <mx:TabBar id="tabBar"
            dataProvider="{arr}" />

</mx:Application>

Or, you can set the tabWidth style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_tabWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                tabBar.setStyle("tabWidth", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red" />
        <mx:Object label="Orange" />
        <mx:Object label="Yellow" />
        <mx:Object label="Green" />
        <mx:Object label="Blue" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="tabWidth:">
                <mx:HSlider id="slider"
                        minimum="40"
                        maximum="120"
                        value="100"
                        snapInterval="1"
                        tickInterval="10"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TabBar id="tabBar"
            dataProvider="{arr}"
            tabWidth="100" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_tabWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.HSlider;
            import mx.controls.TabBar;
            import mx.events.SliderEvent;

            private var arr:Array;
            private var slider:HSlider;
            private var tabBar:TabBar;

            private function init():void {
                arr = [];
                arr.push({label:"Red"});
                arr.push({label:"Orange"});
                arr.push({label:"Yellow"});
                arr.push({label:"Green"});
                arr.push({label:"Blue"});

                slider = new HSlider();
                slider.minimum = 40;
                slider.maximum = 120;
                slider.value = 100;
                slider.snapInterval = 1;
                slider.tickInterval = 10;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE,
                            slider_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "tabWidth:";
                formItem.addChild(slider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                tabBar = new TabBar();
                tabBar.dataProvider = arr;
                tabBar.setStyle("tabWidth", slider.value);
                addChild(tabBar);
            }

            private function slider_change(evt:SliderEvent):void {
                tabBar.setStyle("tabWidth", evt.value);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/feed/ 5