Flex Examples » TabNavigator 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 label placement on a TabNavigator container in Flex http://blog.flexexamples.com/2008/10/07/setting-the-label-placement-on-a-tabnavigator-container-in-flex/ http://blog.flexexamples.com/2008/10/07/setting-the-label-placement-on-a-tabnavigator-container-in-flex/#comments Wed, 08 Oct 2008 05:25:22 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/07/setting-the-label-placement-on-a-tabnavigator-container-in-flex/ In a previous example, “Setting the label placement on a TabBar control in Flex”, we saw how you could loop over the tabs in a Flex TabBar control and set each tab’s labelPlacement property using the getChildAt() method.

The following example shows how you can loop over the tabs in a Flex TabNavigator container [...]]]> In a previous example, “Setting the label placement on a TabBar control in Flex”, we saw how you could loop over the tabs in a Flex TabBar control and set each tab’s labelPlacement property using the getChildAt() method.

The following example shows how you can loop over the tabs in a Flex TabNavigator container and set each tab’s labelPlacement property using the getTabAt() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/07/setting-the-label-placement-on-a-tabnavigator-container-in-flex/ -->
<mx:Application name="TabNavigator_getTabAt_labelPlacement_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.tabBarClasses.Tab;

            private function init():void {
                var tab:Tab;
                var idx:uint;
                var len:uint = tabNavigator.numChildren;
                for (idx=0; idx<len; idx++) {
                    tab = tabNavigator.getTabAt(idx) as Tab;
                    tab.labelPlacement = tab.label;
                }
            }
        ]]>
    </mx:Script>

    <mx:TabNavigator id="tabNavigator"
            tabWidth="150"
            tabHeight="60"
            height="100%"
            creationComplete="init();">
        <mx:VBox label="left"
                icon="@Embed('assets/arrow_left.png')">
            <mx:Label text="labelPlacement = 'left'" />
        </mx:VBox>
        <mx:VBox label="right"
                icon="@Embed('assets/arrow_right.png')">
            <mx:Label text="labelPlacement = 'right'" />
        </mx:VBox>
        <mx:VBox label="top"
                icon="@Embed('assets/arrow_up.png')">
            <mx:Label text="labelPlacement = 'top'" />
        </mx:VBox>
        <mx:VBox label="bottom"
                icon="@Embed('assets/arrow_down.png')">
            <mx:Label text="labelPlacement = 'bottom'" />
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/07/setting-the-label-placement-on-a-tabnavigator-container-in-flex/feed/ 2 Changing the padding between the tabs and content in a Flex TabNavigator control http://blog.flexexamples.com/2007/12/14/changing-the-padding-between-the-tabs-and-content-in-a-flex-tabnavigator-control/ http://blog.flexexamples.com/2007/12/14/changing-the-padding-between-the-tabs-and-content-in-a-flex-tabnavigator-control/#comments Sat, 15 Dec 2007 07:55:38 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/14/changing-the-padding-between-the-tabs-and-content-in-a-flex-tabnavigator-control/ The following example shows how you can adjust the amount of padding that appears between the tabs and the content of a TabNavigator control in Flex by setting the paddingTop style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/14/changing-the-padding-between-the-tabs-and-content-in-a-flex-tabnavigator-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form [...]]]> The following example shows how you can adjust the amount of padding that appears between the tabs and the content of a TabNavigator control in Flex by setting the paddingTop style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/14/changing-the-padding-between-the-tabs-and-content-in-a-flex-tabnavigator-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="paddingTop:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="10"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TabNavigator width="360"
            height="120"
            paddingTop="{slider.value}"
            backgroundColor="#666666">
        <mx:VBox id="vb1" label="Red" backgroundColor="red">
            <mx:Label text="width:{vb1.width}, height:{vb1.height}" />
        </mx:VBox>
        <mx:VBox id="vb2" label="Orange" backgroundColor="haloOrange">
            <mx:Label text="width:{vb2.width}, height:{vb2.height}" />
        </mx:VBox>
        <mx:VBox id="vb3" label="Yellow" backgroundColor="yellow">
            <mx:Label text="width:{vb3.width}, height:{vb3.height}" />
        </mx:VBox>
        <mx:VBox id="vb4" label="Green" backgroundColor="haloGreen">
            <mx:Label text="width:{vb4.width}, height:{vb4.height}" />
        </mx:VBox>
        <mx:VBox id="vb5" label="Blue" backgroundColor="haloBlue">
            <mx:Label text="width:{vb5.width}, height:{vb5.height}" />
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

View source is enabled in the following example.

You can also set the paddingTop style in an external CSS file, or in an <mx:Script /> block using the following snippet:

<mx:Style>
    TabNavigator {
        paddingTop: 0;
    }
</mx:Style>

Or, you can set the style in a <mx:Script /> block using ActionScript, using any of the following snippets:

<mx:Script>
    <![CDATA[
        private function init():void {
            /* Assuming you set an "id" of tabNavigator on the
               TabNavigator control. */
            tabNavigator.setStyle("paddingTop", 0);
        }
    ]]>
</mx:Script>

<mx:Script>
    <![CDATA[
        import mx.styles.StyleManager;

        private function init():void {
            var styleObj:CSSStyleDeclaration;
            styleObj = StyleManager.getStyleDeclaration("TabNavigator");
            styleObj.setStyle("paddingTop", 0);
        }
    ]]>
</mx:Script>

StyleManager.getStyleDeclaration("TabNavigator").setStyle("paddingTop", 30);
 
]]> http://blog.flexexamples.com/2007/12/14/changing-the-padding-between-the-tabs-and-content-in-a-flex-tabnavigator-control/feed/ 1 Styling the Flex TabNavigator control http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/ http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/#comments Wed, 26 Sep 2007 08:05:27 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/ The following example shows how you can style the TabNavigator control in Flex using the tabStyleName, firstTabStyleName, lastTabStyleName, and selectedTabTextStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> TabNavigator { backgroundColor: black; cornerRadius: 0; tabStyleName: "MyTabs"; firstTabStyleName: "MyFirstTab"; lastTabStyleName: "MyLastTab"; selectedTabTextStyleName: [...]]]> The following example shows how you can style the TabNavigator control in Flex using the tabStyleName, firstTabStyleName, lastTabStyleName, and selectedTabTextStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TabNavigator {
            backgroundColor: black;
            cornerRadius: 0;
            tabStyleName: "MyTabs";
            firstTabStyleName: "MyFirstTab";
            lastTabStyleName: "MyLastTab";
            selectedTabTextStyleName: "MySelectedTab";
        }

        .MyTabs {
            backgroundColor: black;
            cornerRadius: 0;
            color: black;
        }

        .MyFirstTab,
        .MyLastTab {
            backgroundColor: black;
            cornerRadius: 0;
            color: black;
        }

        .MySelectedTab {
            backgroundColor: haloBlue;
            color: haloBlue;
            textRollOverColor: haloBlue;
        }
    </mx:Style>

    <mx:TabNavigator id="tabNavigator"
            width="100%"
            height="100%"
            tabHeight="40">
        <mx:VBox label="Panel 1" backgroundColor="haloOrange">
            <mx:Label text="TabNavigator container panel 1"/>
        </mx:VBox>
        <mx:VBox label="Panel 2" backgroundColor="haloGreen">
            <mx:Label text="TabNavigator container panel 2"/>
        </mx:VBox>
        <mx:VBox label="Panel 3" backgroundColor="haloBlue">
            <mx:Label text="TabNavigator container panel 3"/>
        </mx:VBox>
        <mx:VBox label="Panel 4" backgroundColor="haloSilver">
            <mx:Label text="TabNavigator container panel 4"/>
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/26/styling-the-flex-tabnavigator-control/feed/ 29 Using the TabNavigator control’s tabOffset style in Flex 3 http://blog.flexexamples.com/2007/09/25/using-the-tabnavigator-controls-taboffset-style-in-flex-3/ http://blog.flexexamples.com/2007/09/25/using-the-tabnavigator-controls-taboffset-style-in-flex-3/#comments Wed, 26 Sep 2007 01:54:54 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/25/using-the-tabnavigator-controls-taboffset-style-in-flex-3/ The following example shows how you can control the horizontal offset of the tabs in a TabNavigator control by setting the tabOffset style.

Full code after the jump.

View MXML

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2007/09/25/using-the-tabnavigator-controls-taboffset-style-in-flex-3/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form> <mx:FormItem label="tabOffset:"> <mx:HSlider id="slider" minimum="-100" maximum="100" value="0" snapInterval="1" tickInterval="10" [...]]]> The following example shows how you can control the horizontal offset of the tabs in a TabNavigator control by setting the tabOffset style.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/09/25/using-the-tabnavigator-controls-taboffset-style-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="tabOffset:">
                <mx:HSlider id="slider"
                        minimum="-100"
                        maximum="100"
                        value="0"
                        snapInterval="1"
                        tickInterval="10"
                        dataTipPrecision="0"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="horizontalAlign:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>left</mx:String>
                            <mx:String>center</mx:String>
                            <mx:String>right</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TabNavigator id="tabNavigator"
            width="100%"
            height="100%"
            tabOffset="{slider.value}"
            horizontalAlign="{comboBox.selectedItem}">
        <mx:VBox label="Panel 1" backgroundColor="haloOrange">
            <mx:Label text="TabNavigator container panel 1"/>
        </mx:VBox>
        <mx:VBox label="Panel 2" backgroundColor="haloGreen">
            <mx:Label text="TabNavigator container panel 2"/>
        </mx:VBox>
        <mx:VBox label="Panel 3" backgroundColor="haloBlue">
            <mx:Label text="TabNavigator container panel 3"/>
        </mx:VBox>
        <mx:VBox label="Panel 4" backgroundColor="haloSilver">
            <mx:Label text="TabNavigator container panel 4"/>
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/25/using-the-tabnavigator-controls-taboffset-style-in-flex-3/feed/ 2 Changing tab alignment within a Flex TabNavigator container http://blog.flexexamples.com/2007/09/09/changing-tab-alignment-within-a-flex-tabnavigator-container/ http://blog.flexexamples.com/2007/09/09/changing-tab-alignment-within-a-flex-tabnavigator-container/#comments Mon, 10 Sep 2007 01:05:38 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/09/changing-tab-alignment-within-a-flex-tabnavigator-container/ The following example shows how you can change the horizontal alignment of tabs within a TabNavigator container so that the tabs are left, center, or right aligned within the container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/09/changing-tab-alignment-within-a-flex-tabnavigator-container/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="left" [...]]]> The following example shows how you can change the horizontal alignment of tabs within a TabNavigator container so that the tabs are left, center, or right aligned within the container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/09/changing-tab-alignment-within-a-flex-tabnavigator-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="left" />
        <mx:Object label="center" />
        <mx:Object label="right" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="horizontalAlign:" />
        <mx:ComboBox id="comboBox"
                dataProvider="{arr}" />
    </mx:ApplicationControlBar>

    <mx:TabNavigator id="tabNavigator"
            width="100%"
            height="100%"
            horizontalAlign="{comboBox.selectedItem.label}">

        <mx:VBox label="Tab 1">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

        <mx:VBox label="Tab 2">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

        <mx:VBox label="Tab 3">
            <mx:Label text="The quick brown fox..." />
        </mx:VBox>

    </mx:TabNavigator>

</mx:Application>

View source is enabled in the following example.

Essentially, what the previous code snippet is doing is using binding to detect when the selected item in the ComboBox changes, and then sets the horizontalAlign style to the selected value. So, for example, if you selected “center” from the ComboBox control’s drop down menu, Flex would interpret it as:

<mx:TabNavigator id="tabNavigator"
        width="100%"
        height="100%"
        horizontalAlign="center">

    <VBox />

</mx:TabNavigator>

You could also set the horizontalAlign style within a <mx:Style /> block using the following snippet:

<mx:Style>
    TabNavigator {
        horizontalAlign: center;
    }
</mx:Style>

The above snippet sets the style globally for all TabNavigator containers. If you wanted to set the style on a single TabNavigator container you could change the “TabNavigator” style name to something like “.MyTabNavigator” (with a leading period), and then set the styleName property witin the desired TabNavigator container to “MyTabNavigator” (with no leading period).
Also note that you could use either the “horizontalAlign” style name or “horizontal-align” style name in the CSS.

Finally, you could also set the horizontalAlign style in ActionScript using the setStyle() method, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        private function init():void {
            tabNavigator.setStyle("horizontalAlign", "center");
        }
    ]]>
</mx:Script>

For the previous snippet to work, you’d need to call the init() method from somewhere in your MXML, such as your main <mx:Application /> tag’s creationComplete event handler.

 
]]> http://blog.flexexamples.com/2007/09/09/changing-tab-alignment-within-a-flex-tabnavigator-container/feed/ 5 Adding icons to a Flex TabNavigator control http://blog.flexexamples.com/2007/08/16/adding-icons-to-a-flex-tabnavigator-control/ http://blog.flexexamples.com/2007/08/16/adding-icons-to-a-flex-tabnavigator-control/#comments Fri, 17 Aug 2007 05:36:10 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/16/adding-icons-to-a-flex-tabnavigator-control/ I was trying to figure out how to add icons to a TabNavigator control today and ended up making this. The trick is that you actually add the icon on the TabNavigator control’s child containers and not on the TabNavigator itself. The example also has three tabs which each look at a different filtered view [...]]]> I was trying to figure out how to add icons to a TabNavigator control today and ended up making this. The trick is that you actually add the icon on the TabNavigator control’s child containers and not on the TabNavigator itself. The example also has three tabs which each look at a different filtered view of an XML document (filtered using E4X).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="model">
        <records>
            <record uuid="1" status="check" name="User 1" data="Data 1" />
            <record uuid="2" status="warning" name="User 2" data="Data 2" />
            <record uuid="3" status="warning" name="User 3" data="Data 3" />
            <record uuid="4" status="critical" name="User 4" data="Data 4" />
            <record uuid="5" status="check" name="User 5" data="Data 5" />
            <record uuid="6" status="check" name="User 6" data="Data 6" />
            <record uuid="7" status="warning" name="User 7" data="Data 7" />
            <record uuid="8" status="critical" name="User 8" data="Data 8" />
        </records>
    </mx:XML>

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            private var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletWarning.png")]
            private var BulletWarning:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            private var BulletCritical:Class;

            private const CHECK:String = "check";
            private const WARNING:String = "warning";
            private const CRITICAL:String = "critical";
        ]]>
    </mx:Script>

    <mx:TabNavigator width="400" height="200">
        <mx:VBox label="Check" icon="{BulletCheck}">
            <mx:DataGrid id="gridCheck"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == CHECK)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox label="Warnings" icon="{BulletWarning}">
            <mx:DataGrid id="gridWarning"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == WARNING)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox label="Errors" icon="{BulletCritical}">
            <mx:DataGrid id="gridCritical"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == CRITICAL)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/16/adding-icons-to-a-flex-tabnavigator-control/feed/ 19 Modules and singleton manager classes http://blog.flexexamples.com/2007/08/06/modules-and-singleton-manager-classes/ http://blog.flexexamples.com/2007/08/06/modules-and-singleton-manager-classes/#comments Tue, 07 Aug 2007 00:06:51 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/06/modules-and-singleton-manager-classes/ This is a bit more of a “gotcha” than a tip, but it is something I’ve run into twice in the past week or so. When working with application domains and singletons (such as the DragManager or PopUpManager). I’ve been playing with modules the past couple days and ran into an issue when trying to [...]]]> This is a bit more of a “gotcha” than a tip, but it is something I’ve run into twice in the past week or so. When working with application domains and singletons (such as the DragManager or PopUpManager). I’ve been playing with modules the past couple days and ran into an issue when trying to drag items from a DataGrid in one module to a DataGrid in the second module. When trying to select an item in one of the data grids, I’d get strange run-time errors. The solution? Create a reference in my main application to a dummy DragManager or PopUpManager instance.

Hopefully this will save somebody a little bit of a headache in the future.

Full code after the jump.

View MXML (main.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.managers.DragManager;

            /* Create dummy variables. */
            private var dragManager:DragManager;
            private var popUpManager:PopUpManager;
        ]]>
    </mx:Script>

    <mx:TabNavigator id="tabNavigator" width="300" height="200">
        <mx:ModuleLoader id="module1" url="dataGrid_module.swf" label="Tab 1" />
        <mx:ModuleLoader id="module2" url="comboBox_module.swf" label="Tab 2" />
    </mx:TabNavigator>

</mx:Application>

View MXML (dataGrid_module.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%">

    <mx:Style>
        Module {
            padding-bottom: 5px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>

    <mx:VBox height="100%">
        <mx:DataGrid id="dataGrid" width="100%" height="100%">
            <mx:dataProvider>
                <mx:Object data="1" label="one" />
                <mx:Object data="2" label="two" />
                <mx:Object data="3" label="three" />
                <mx:Object data="4" label="four" />
            </mx:dataProvider>
        </mx:DataGrid>
    </mx:VBox>

    <mx:HRule width="100%" />

    <mx:Button label="Alert.show(...)" click="Alert.show('Alert from the dataGrid_module.')" />

</mx:Module>

View MXML (comboBox_module.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%">

    <mx:Style>
        Module {
            padding-bottom: 5px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>

    <mx:VBox height="100%">
        <mx:ComboBox id="comboBox">
            <mx:dataProvider>
                <mx:Object data="1" label="one" />
                <mx:Object data="2" label="two" />
                <mx:Object data="3" label="three" />
                <mx:Object data="4" label="four" />
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:VBox>

    <mx:HRule width="100%" />

    <mx:Button label="Alert.show(...)" click="Alert.show('Alert from the comboBox_module.')" />

</mx:Module>

View source is enabled in the following example.

For more information see the following bugs in the public Flex Bugbase: SDK-9354 and SDK-11272.

 
]]> http://blog.flexexamples.com/2007/08/06/modules-and-singleton-manager-classes/feed/ 7