Hiding a tab in a Spark TabBar

Question

I have a spark TabBar and I want to hide and show some elements of it from an external user input (namely a checkbox check)

I am having trouble changing the tabs visibility. They are currently always shown.

Does anyone have any idea? I have seen a getTabAt on the mx TabBar but the look of the tab is important and the requirement is for it to look like a tab bar rather than a button bar.

My code for the tabs and for hiding and showing is below:

<fx:Script>
    <![CDATA[
    import mx.containers.VBox;
    import mx.controls.Label;

    private function onCreationComplete():void {
        var vbox1:VBox = new VBox();
        vbox1.label = "Tab 1";
        var lbl1:Label = new Label()
        lbl1.text = "Panel1";
        vbox1.addChild(lbl1);
        dp.addChild(vbox1);

        var vbox2:VBox = new VBox();
        vbox2.label = "Tab 2";
        var lbl2:Label = new Label()
        lbl2.text = "Panel 2";
        vbox2.addChild(lbl2);
        dp.addChild(vbox2);
    }

    private function showTab(event:MouseEvent):void {
        makeVisible(true);
    }

    private function hideTab(event:MouseEvent):void {
        makeVisible(false);
    }

    private function makeVisible(vis:Boolean):void {
        VBox(dp.getChildAt(0)).visible = vis;
        VBox(dp.getChildAt(0)).enabled = vis;
        VBox(dp.getChildAt(0)).includeInLayout = vis;
    }
    ]]>
</fx:Script>
<s:VGroup>
    <s:TabBar id="tabNavigator" width="100%" height="100%" dataProvider="{dp}"/>
    <mx:ViewStack width="100%" height="100%" id="dp" borderStyle="solid"/>

    <s:Button click="showTab(event)" label="show Tab"/>
    <s:Button click="hideTab(event)" label="hide Tab"/>
</s:VGroup>

Any advice greatly received

Thanks

Answer 1

This function will hide a tab at a particular index. If you do not have the includeInLayout then the tab disappears and leaves a hole.

private function setTabEnabled(index:int, enabled:Boolean):void {
    var theTab:UIComponent = tabNavigator.dataGroup.getElementAt(index) as UIComponent;
    if (theTab)
        theTab.visible = enabled;
        theTab.includeInLayout = enabled;
    }
}