Disabling a Tab in a Flex TabNavigator

I’ve been asked a few times about programmatically disabling individual Tabs from a TabNavigator in Flex.  This behavior isn’t natively supported in Flex, although it seems like it would be a useful addition to the language.  There is built in support to disable the contents of  the tabs, but not to prevent the user from actually clicking on the tab itself.  In fact, there is no supported way to disable an individual tab.  However, there is an unsupported way to do it.  Be aware, using unsupported code like this is not guaranteed to work in future releases, and could have unintended consequences, and cause your immortal soul to be damned to hell.  If knowing this you still want to try it, read on.

The TabNavigator has a private property named tabBar, which contains a property for each of the tabs (first is _tab0, then _tab1, etc.).  If this were a public property, disabling an individual tab would be as simple as

yourTabNav.tabBar._tab1.enabled = false;

However, since it’s a private property, we need to trick the compiler into letting us access it.   The reality is that public and private designations are only enforced at compile time, not at run time, so, if we can make it compile… 

One ‘quirk’ of the flash compiler, is that it will only validate properties of an object when they are referenced with ‘.’ syntax.  Referencing the same property with ["…"] syntax skips any checks from the compiler.  The nice side effect of this quirk is that if you really, really need to access a private property, even though you never should, you can.  So, with the example from above, we can get past the compiler using this syntax:

yourTabNav["tabBar"]._tab1.enabled = false;

Again, I’ll reiterate, you shouldn’t do this.  Private properties should remain private.  However, if you absolutely need to disable a tab, and not just the content on the tab, this little trick will work for you.  The code below shows this in action.  Remember, no guarantee this will continue to work in future versions…

    <?xml version="1.0" encoding="iso-8859-1"?> 
<mx:Application width="800" height="600" xmlns:mx="
http://www.macromedia.com/2003/mxml" creationComplete="appInit()">
        <mx:TabNavigator id="testNav" width="100%">
                <mx:HBox label="tab 1">
                        <mx:Text text="aaa"/>
                </mx:HBox>
                <mx:HBox label="tab 2">
                        <mx:Text text="bbb"/>
                </mx:HBox>
                <mx:HBox label="tab 3">
                        <mx:Text text="ccc"/>
                </mx:HBox>
        </mx:TabNavigator>
        
        
     <mx:Script>
         function appInit() {
                // ugly hack to disable tab 1
                testNav["tabBar"]._tab1.enabled=false;
         }
     </mx:Script>

</mx:Application>

 

There are no comments.

Leave a Reply