Hiding a Tab in a TabNavigator

Posted 6 August 2009 by Russ in Adobe Flex. Tags: TabNavigator, ViewStack.

You can easily disable a tab by disabling the associated child object in the TabNavigator, which is fair enough. So you might think that altering the child’s visibile and includeInLayout properties would impact the tab too, but it doesn’t and that’s because only the child that’s currently in view has its visible. The solution is simply to bind the visibility and includeInLayout properties to another property of the child. The enabled property is a good start but then you’re saying that all disabled elements are invisible, which you might not want. So we go with a custom property.

Create a custom property on the child

This is dead easy. The class below is simply a Box that has a public var added to it that defaults to true, and it’s this we’ll use for binding.

package com.russback
{
	import mx.containers.Box;

	public class ExtendedBox extends Box
	{

		/**
		 * Used for binding the visible and includeInLayout properties
		 * of the TabNavigator
		 */
		[Bindable]
		public var tabVisible:Boolean = true;

		/**
		 * Constructor
		 */
		public function ExtendedBox()
		{
			super();
		}

	}
}

Creating the Tab binding

All we need here is one method that creates the binding. We fire this method once the CREATION_COMPLETE FlexEvent has fird and it’s job is simply to bind the visibility and includeInLayout properties to the tabVisible variable we created in our custom Box:

package com.russback
{
	import flash.display.DisplayObject;

	import mx.binding.utils.BindingUtils;
	import mx.containers.TabNavigator;
	import mx.controls.Button;
	import mx.events.FlexEvent;

	public class ExtendedTabNavigator extends TabNavigator

	{

		/**
		 * Constructor adds event listener
		 */
		public function ExtendedTabNavigator()
		{
			super();
			addEventListener(FlexEvent.CREATION_COMPLETE, createTabBindings);
		}

		/**
		 * event handler binds each tab's visible and inludeInLayout properties to the
		 * custom "tabVisible" property of the related child
		 */
		private function createTabBindings(event:FlexEvent):void
		{
			for (var i:uint; i < childDescriptors.length; i++)
			{
				var tab:Button = getTabAt(i);
				var child:DisplayObject = getChildAt(i);

				BindingUtils.bindProperty(tab, "visible", child, "tabVisible");
				BindingUtils.bindProperty(tab, "includeInLayout", child, "tabVisible");
			}
		}

	}
}

Putting it all together

The MXML for this is simple. We simply create an instance of our ExtendedTabNavigator and populate it with some child objects, which are ExtendedBox objects. We can then set the visibility of each associated Tab by setting the tabVisible property on each.

The example below shows the four states you could have:

1. Enabled and tab visible
2. Enabled and tab hidden
3. Disabled and tab hidden
4. Disabled and tab visible

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:russback="com.russback.*"
	layout="absolute"
	width="553"
	height="320"
	viewSourceURL="srcview/index.html"
	>

	<russback:ExtendedTabNavigator width="100%" height="100%">
		<russback:ExtendedBox label="1: Enabled and tab visible" />
		<russback:ExtendedBox label="2: Enabled and tab hidden" tabVisible="false" />
		<russback:ExtendedBox label="3: Disabled and tab hidden" enabled="false" tabVisible="false" />
		<russback:ExtendedBox label="4: Disabled and tab visible" enabled="false" />
	</russback:ExtendedTabNavigator>

</mx:Application>

You can download and edit the source code, or right-click on the demo below and choose View Source to see how it all fits together.