Hiding a tab in a Spark TabBar - apache-flex

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

Yea, it's really nasty to not be documented such a trivial task. I come upon this post but i'm on Flex builder 4.6 and targeting mobile application (flex mobile). There is Spark TabbedViewNavigatorApplication which has TabbedViewNavigator as its child. The adobe forums and help show only how to hide the entire tabBar, which is really obvious, but not how to hide distinct options inside the tabBar.
Some places i visited suggested to remove items from the TabbedViewNavigator when you want to hide them, and then put them back again with removeItemAt, addItemAt combination ... but you really don't want to do that.
The first reason is that with removing items from tabBar you are removing ViewNavigators which form the View stack of certain section.
With removing one of the navigators, you are messing with this stack, and if your application tends to be on the complex side, or tends to grow that way, you will find yourself in trouble writing code that manages all those removal and adding processes, keeping in mind that your indexes in the navigators Vector in TabbedViewNavigator don't get messed.
Furthermore, if you do some caching, or custom handle navigator properties, restoring them to the state where they been in the moment you removed them from the tab stack will give you a lot of headache.
Following the solution from the original post, and with little experimenting the solution is quite simple:
// let say that the instance of Tabbed view navigator look like this:
// appRef is reference to TabbedViewNavigatorApplication (if you are in the main mxml, just put "this" as reference)
....
var myTabbedViewNavigator : TabbedViewNavigator = appRef.tabbedNavigator;
var index : int = 0; // we take item at index 0 for example (1st option in tabBar)
var dg : DataGroup = myTabbedViewNavigator.tabBar.dataGroup;
dg.getElementAt(index).visible = false;
dg.getElementAt(index).includeInLayout = false;
....
To show the tab again put true, and that's it, your navigators will still be there inside your TabbedViewNavigator but their visual representation in the tabBar will be invisible.

Answer 2

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