Thanks in advance…

waiting for your reply.

Regards
-Bechar

    TabNavigator {
       tabStyleName:myTabStyle;
    }
 
    .myTabStyle {
       fillColors: #006699, #cccc66;
       upSkin: ClassReference("CustomSkinClass");
       overSkin: ClassReference("CustomSkinClass");
       downSkin: ClassReference("CustomSkinClass");
    }

http://livedocs.adobe.com/flex/gumbo/langref/mx/containers/TabNavigator.html

I have task to show bottom faced tab navigation, i mean opposite view of normal tab navigation. It depends on style of tab or i have to change codes in normal Tab navigation itself….?

Thanks in Advance….
deenalex

This “works” but feels a bit hacky. The trick seems to be calling TabNavigator.getChildIndex() and getting an instance of the specific tab/button, then calling the setStyle() method and setting the fontStyle style to “normal” or “italic” depending on whether the tab is being enabled or disabled:

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Button;
            import mx.core.UIComponent;

            private function checkBox_change(evt:Event):void {
                var checkBox:CheckBox = evt.currentTarget as CheckBox;
                var tabNavChild:UIComponent = checkBox.data as UIComponent;
                tabNavChild.enabled = checkBox.selected;
                var idx:int = tabNav.getChildIndex(tabNavChild) as int;
                var tab:Button = tabNav.getTabAt(idx);
                var normalOrItalic:String = (checkBox.selected) ? "normal" : "italic";
                tab.setStyle("fontStyle", normalOrItalic);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:VBox>
            <mx:CheckBox id="checkBox1"
                    label="Toggle ONE"
                    selected="true"
                    data="{vBox1}"
                    change="checkBox_change(event);" />
            <mx:CheckBox id="checkBox2"
                    label="Toggle TWO"
                    selected="true"
                    data="{vBox2}"
                    change="checkBox_change(event);" />
            <mx:CheckBox id="checkBox3"
                    label="Toggle THREE"
                    selected="true"
                    data="{vBox3}"
                    change="checkBox_change(event);" />
        </mx:VBox>
    </mx:ApplicationControlBar>

    <mx:TabNavigator id="tabNav" width="200" height="100">
        <mx:VBox id="vBox1" label="ONE" />
        <mx:VBox id="vBox2" label="TWO" />
        <mx:VBox id="vBox3" label="THREE" />
    </mx:TabNavigator>

</mx:Application>

Actually, looking at the problem again, this may be the better approach/solution. The following example listens for the enabledChanged event on the TabNavigator container’s VBox children and then toggles the fontStyle style accordingly:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        initialize="init();">

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

            private function init():void {
                vBox1.addEventListener("enabledChanged",
                            vBox_enabledChange);
                vBox2.addEventListener("enabledChanged",
                            vBox_enabledChange);
                vBox3.addEventListener("enabledChanged",
                            vBox_enabledChange);
            }

            private function vBox_enabledChange(evt:Event):void {
                var vBox:VBox = evt.currentTarget as VBox;
                var idx:int = tabNav.getChildIndex(vBox);
                var btn:Button = tabNav.getTabAt(idx) as Button;
                var normalOrItalic:String = (vBox.enabled) ? "normal" : "italic";
                btn.setStyle("fontStyle", normalOrItalic);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:VBox>
            <mx:CheckBox id="checkBox1"
                    label="Toggle ONE"
                    selected="true" />
            <mx:CheckBox id="checkBox2"
                    label="Toggle TWO"
                    selected="true" />
            <mx:CheckBox id="checkBox3"
                    label="Toggle THREE"
                    selected="true"/>
        </mx:VBox>
    </mx:ApplicationControlBar>

    <mx:TabNavigator id="tabNav" width="200" height="100">
        <mx:VBox id="vBox1"
                label="ONE"
                enabled="{checkBox1.selected}" />
        <mx:VBox id="vBox2"
                label="TWO"
                enabled="{checkBox2.selected}" />
        <mx:VBox id="vBox3"
                label="THREE"
                enabled="{checkBox3.selected}" />
    </mx:TabNavigator>

</mx:Application>

Hope that helps,

Peter