Flex Examples » TabBar

Changing the label placement on an MX TabBar control in Flex

Peter deHaan — Wed, 10 Nov 2010 02:41:44 +0000

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.

"1.0" encoding="utf-8"?>

 name="MX_TabBar_navItemFactory_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
     id="tb"
            dataProvider="{viewstack}"
            labelField="label"
            iconField="icon"
            width="300" />
 
     id="viewstack"
            backgroundColor="white"
            width="300" height="100">
         id="tab_1"
                label="Tab 1"
                icon="@Embed('Assets.swf#CloseButtonUp')">
             />
        >
         id="tab_2"
                label="Tab 2"
                icon="@Embed('Assets.swf#CloseButtonOver')">
             />
        >
         id="tab_3"
                label="Tab 3"
                icon="@Embed('Assets.swf#CloseButtonOver')">
             dataProvider="[red,orange,yellow,green,blue]" />
        >
    >
 
>

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";
        }
    }
}

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

Peter deHaan — Tue, 22 Jun 2010 20:05:12 +0000

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.

"1.0" encoding="utf-8"?>

 name="MX_TabNavigator_tabWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:local="*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            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);
            }
        ]]>
    
 
     dock="true">
         label="Add Tab" click="button1_clickHandler(event)" />
    >
 
    >
         label="Default sizing:">
             id="tn1" width="240" height="100">
                 label="Contacts">
                     id="lbl1" enterFrame="lbl1.text = tn1.getTabAt(0).width.toString();" />
                >
                 label="SMS">
                >
                 label="B">
                >
            >
        >
 
         label="Equal sizing:">
             id="tn2"
                    tabWidth="{tn2.width/tn2.numChildren}"
                    width="240" height="100">
                 label="Contacts">
                     id="lbl2"
                            enterFrame="lbl2.text = tn2.getTabAt(0).width.toString();" />
                >
                 label="SMS">
                >
                 label="B">
                >
            >
        >
 
         label="Content sizing:" direction="horizontal">
             id="tn3" width="240" height="100"
                             resize="event.currentTarget.mx_internal::getTabBar().width = event.currentTarget.width;">
                 label="Contacts">
                     id="lbl3" enterFrame="lbl3.text = tn3.getTabAt(0).width.toString();" />
                >
                 label="SMS">
                >
                 label="B">
                >
            >
 
             id="tn4" width="240"  height="100">
                 label="Contacts">
                     id="lbl4" enterFrame="lbl4.text = tn4.getTabAt(0).width.toString();" />
                >
                 label="SMS">
                >
                 label="B">
                >
            >
        >
    >
 
>

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:

"1.0" encoding="utf-8"?>

 name="MX_TabNavigator_tabWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:local="*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
     id="tn5" width="240"  height="100">
         label="Contacts">
             id="lbl5" enterFrame="lbl5.text = tn5.getTabAt(0).width.toString();" />
        >
         label="SMS">
        >
         label="B">
        >
    >
 
>

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

"1.0" encoding="utf-8"?>

 name="ResizerTabNavigatorMXML"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        resize="resizeEventListener(event);">
 
    
        
            import mx.events.ResizeEvent;
 
            protected function resizeEventListener(evt:ResizeEvent):void {
                tabBar.width = this.width;
            }
        ]]>
    
 
>

Setting the label placement on a TabBar control in Flex

Peter deHaan — Tue, 07 Oct 2008 06:43:27 +0000

In a previous example, “Styling individual tabs in a TabBar control”, we saw how you could style individual tabs in a Flex TabBar control by calling the getChildAt() method on the tab bar, and then calling setStyle() on the returned Tab reference.

The following example shows how you can loop over the tabs in a Flex TabBar control and set each tab’s labelPlacement property.

Full code after the jump.

Flex Examples » TabBar

Changing the label placement on an MX TabBar control in Flex

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

Setting the label placement on a TabBar control in Flex

Setting the text alignment on a TabBar control in Flex

Setting the tab width on a TabBar control in Flex

Using an embedded font with the TabBar control in Flex

Vertically aligning tabs within a TabBar control in Flex

Horizontally aligning tabs within a TabBar control in Flex

Styling individual tabs in a TabBar control

Controlling the distance between tabs in a TabBar control using the horizontalGap style