Tuesday, June 9, 2009

Flex - Hide and show tab in tabnavigator

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


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;


Cyrus the virus said...

Hi ,
Nice post Thanks for the Information
it surely helped me optimising my code and also made my work less.

Anonymous said...

It works. Thanks a lot.

Vengu said...


Nice post. And thanks for referring to my post.


..:: AvIzOnE™ ::.. said...

Thanks!! It worked.

Anonymous said...

Great! It helped me a lot!

Sanjeev said...

This is really nice. I had looking to achieve this all over the web with little help.

Thank you vm.

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

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"

< 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

Gurjaspal Singh 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?

..:: AvIzOnE™ ::.. said...

Hi Gurjaspal,
Did you use includeInLayout ?

tabNav.getTabAt(1).includeInLayout = false;