Flex - Hide and show tab in tabnavigator

-
I'm not sure why I didn't think of this myself...

http://techmytongue.blogspot.com/2008/11/hide-show-tab-on-tab-navigator.html

This becomes very important if you want to hide tabs in a tab navigator but you don't want to remove them from the interface completely. In my situation I wanted to hide tabs in a tab navigator based on what the user had selected in a data grid. If the user selected another row in the grid I may need to show a tab that I had previously hidden.

tabNav.getTabAt(1).visible = false;


Now to elaborate on Venkatesh's post...

To remove the tab stop, also disable it:
tabNav.getTabAt(1).enabled = false;

Now if you are hiding a tab before another tab (that is not hidden) there will be an empty gap where your tab should be. To fix this:
tabNav.getTabAt(1).includeInLayout = false;

And one final thing. If you're hiding your default tab (i.e. tab index 0) you will also need to set the selected index of the tabNav or else you will still see the contents of the default tab.
tabNav.selectedIndex = 2; //If you were hiding the first 2 tabs (tab 0 and tab 1)


Here is a code snip. In this example there are 3 tabs. Based on the user selection you hide/show the first 2 tabs.

if ( userSelection == "showTabs" )
{          
   tabNav.getTabAt(0).visible = true;
   tabNav.getTabAt(1).visible = true;
   tabNav.getTabAt(0).enabled = true;
   tabNav.getTabAt(1).enabled = true;
   tabNav.getTabAt(0).includeInLayout = true;
   tabNav.getTabAt(1).includeInLayout = true;
   tabNav.selectedIndex = 0;
}
else if ( userSelection == "hideTabs" )
{
   tabNav.getTabAt(0).visible = false;
   tabNav.getTabAt(1).visible = false;
   tabNav.getTabAt(0).enabled = false;
   tabNav.getTabAt(1).enabled = false;
   tabNav.getTabAt(0).includeInLayout = false;
   tabNav.getTabAt(1).includeInLayout = false;
   tabNav.selectedIndex = 2;
}

Comments

Unknown said…
Hi ,
Nice post Thanks for the Information
it surely helped me optimising my code and also made my work less.
January 16, 2010 at 8:10 AM
Anonymous said…
It works. Thanks a lot.
February 9, 2010 at 8:38 AM
Vengu said…
Angela,

Nice post. And thanks for referring to my post.


Venkatesh.
February 24, 2010 at 1:43 AM
Anonymous said…
Great! It helped me a lot!
July 18, 2010 at 10:01 PM
Sanjeev said…
This is really nice. I had looking to achieve this all over the web with little help.

Thank you vm.
September 1, 2010 at 9:38 PM
Jamal ali said…
some how my tabnavigator does not hide the content of the tab(0)

this is my code

mh_tab.getTabAt(0).visible = false;
mh_tab.getTabAt(0).enabled= false; mh_tab.getTabAt(0).includeInLayout = false; mh_tab.getTabAt(2).visible = false;
mh_tab.getTabAt(2).enabled = false; mh_tab.getTabAt(2).includeInLayout = false;
mh_tab.getTabAt(1).visible = true; mh_tab.getTabAt(1).includeInLayout = true; mh_tab.getTabAt(1).enabled = true; mh_tab.selectedIndex = 1;

somehow its show the content of tab(0) and the tab is hide
September 20, 2010 at 2:09 AM
Chaos7703 said…
For those who want an working answer for Flex 4.5 (probably Flex 4 also). I finally figured out a solution. It feels like a hack to me, but it's working for me. Here's a simplified example. (Note: I had to add a space after each < so that they would show.)

< !-- component that has the the TabBar in it... -->

< fx:Script>
< ![CDATA[
//imports here

import mx.core.UIComponent;

//other imports

private function setTabEnabled(index:int,enabled:Boolean):void{
var theTab:UIComponent = theTabBar.dataGroup.getElementAt(index) as UIComponent;
if(theTab){theTab.enabled = enabled;}
}
]]>
< /fx:Script>

< s:TabBar id="theTabBar"
dataProvider="{viewStack}"/>

< mx:ViewStack id="viewStack">
< s:NavigatorContent label="0th Tab">
< !-- ...Content -->
< /s:NavigatorContent>
< s:NavigatorContent label="1st Tab">
< !-- ...Content -->
< /s:NavigatorContent>
< s:NavigatorContent label="2nd Tab">
< !-- ...Content -->
< /s:NavigatorContent>
< /mx:ViewStack>

< !-- rest of the component that has the the TabBar in it... -->


Then you just call `setTabEnabled(theTabIndex,trueFalse)` in an event handler related to whatever decides why the tab is, or isn't, enabled.


I *should* extend the TabBar to support this, but I've already spent enough time trying to figure it out.


Happy Coding =D
October 9, 2011 at 5:02 AM
Unknown said…
Hi there,

I am able to hide the tab using this code but the child of that particular tab is still visible. Even setting enable = false doesn't hide it it just disable that child component. Any suggestions?
December 22, 2011 at 3:39 PM
..:: AvIzOnE™ ::.. said…
Hi Gurjaspal,
Did you use includeInLayout ?

tabNav.getTabAt(1).includeInLayout = false;
December 22, 2011 at 3:46 PM
Post a Comment

Popular posts from this blog

Flex Advanced Data Grid collapses on refresh

-
I was having this problem with my Advanced Data Grid. Every time the data refreshed the whole thing collapsed, which isn't a good thing when users have drilled down 3 levels. I know this is probably a bad way of doing this, but it is the only way I could get to work. All the examples I've seen of this say to just assign the saved openNodes Object to the openNodes property, like this... myOpenNodes = new Object(); myOpenNodes = IHierarchicalCollectionView(myADG.dataProvider).openNodes //refresh here IHierarchicalCollectionView(myADG.dataProvider).openNodes = myOpenNodes; but that doesn't work!! Here is what I did: On the refresh method set the following variables (these variables need to be accessible from all methods inside the component, so put them in your model or make them global, whatever). These variables hold the state of the ADG before the refresh. //Object holding all currently open nodes myOpenNodes = new Object(); myOpenNodes = IHierarchicalCollectionView(myADG.d
Read more

Add and remove lineseries - Flex LineChart

-
This took me some time to figure out so I thought I would post about it. Main objective is to toggle on and off lineseries based on user input. Usually this would mean editing the dataprovider, tricky thing here is that I need the color of each line to always be the same based on data, so instead I leave the dataprovider alone and actually add and remove LineSeries to/from the LineChart. This probably isn't the best way to do this, but hey, it works, and it may help someone else out. Here we go... First lets start with the MXML: Here I have a Panel with a LineChart and a Legend inside it, as well as 3 Toggle Buttons. You will notice that there are no series inside the LineChart. <mx:Panel title="LineChart Example" height="500" width="100%" layout="vertical"> <mx:HBox id="choices" horizontalGap="0"> <mx:Button id="Profit" label="Profit" toggle="true" click="upda
Read more

Flex TabNavigator - tab click event?

-
So there doesn't seem to be any item click or tab click event on the tab navigator in Flex. I find this sort of annoying, I mean surely this would be useful and should be included? When searching all I could find was people saying to either use the change event on the tab navigator, (which didn't help me because I wanted my method to run even if you clicked on the currently selected tab) or to use a tab bar instead (which also didn't help me because I am using the SuperTabNavigator from flexlib). What I am doing is basically maximizing the tab when it is clicked, and minimizing it if it is clicked again. I found a solution. http://www.actionscript.org/forums/showthread.php3?t=135539 (post by stburns). You basically get the tab's button. It sounds weird, here's the code to how it works. private function creationComplete():void { for (var i:int=0; i<myTabNav.getChildren().length; i++) { var tab:Button = myTabNav.getTabAt(i); tab.ad
Read more