Article written 24/02/2007 13:57.
By iteratif ( Bugalotto Olivier ).

Let’s continue on this subject by creating a Tabs component which inherits the TabNavigator component by adding a close button to each tab. Here is a preview of the Tab component:

To start with we are going to carry out some corrections to the TabCloser component (see: The TabControl component). Here is the error that we need to correct:

To resolve the problem we will make the TabCloser component take into account the dimensions of the close button. To do this, we simply need to resize the label so that it takes into account the size of the close button and we will do this using the layoutContents method:

package net.iteratif.controls
{
	...
 
	use namespace mx_internal;
 
	public class TabCloser extends Tab
	{
		....
 
		mx_internal override function layoutContents(unscaledWidth:Number,
                                        unscaledHeight:Number,
                                        offset:Boolean):void {
                        super.layoutContents(unscaledWidth,unscaledHeight,offset);
 
			var viewWidth:Number = unscaledWidth;
 
			// Obtains the space between 2 components
			var horizontalGap:Number = getStyle("horizontalGap");
			// Obtains the space on the left
			var paddingLeft:Number = getStyle("paddingLeft");
			// Obtains the space on the right
			var paddingRight:Number = getStyle("paddingRight");
 
			// We verify that the icon is present
			// If it is present we get its width
			var iconWidth:Number = 0;
			if(currentIcon)
				iconWidth = currentIcon.width;
 
			// We resize the width of the button label
			// by taking into account the width of the close button
			textField.width = viewWidth - iconWidth - closeButton.width - horizontalGap -
                                                   paddingLeft - paddingRight;
 
			closeButton.x = viewWidth - closeButton.width - paddingRight;
                        // We position the close button
                        // at the same height as the label
                        closeButton.y = textField.y;
 
			setChildIndex(closeButton, numChildren - 1);
		}
                ...
}

We will also add a style to the close button by defining a style sheet that we will pass as a parameter to the compiler:

-theme CloseButtonSyle.css

The CloseButtonStyle stylesheet:

/* Style of the close button */
.closeButton {
	upSkin: Embed(source="upClose.png");	
	overSkin: Embed(source="downClose.png");
	downSkin: Embed(source="downClose.png");
}

Here is the result after correction:

Let’s go to the creation of the Tabs component. Firstly, a new Tabs class inherits from the TabNavigator :

package net.iteratif.controls
{
	import mx.containers.TabNavigator;
 
	public class Tabs extends TabNavigator
	{
		public function Tabs() {
			super();
		}
	}
}

After a quick study of the TabNavigator component, we see that it instantiates – as we would guess - a TabBar component. We therefore need to replace it with an instance of the TabControl and we will do this by redefining the createChildren method:

package net.iteratif.controls
{
	import mx.containers.TabNavigator;
 
	public class Tabs extends TabNavigator
	{
		public function Tabs() {
			super();
		}
 
		protected override function createChildren():void {
			super.createChildren();
 
			// Check that the TabBar component is created
			// Take it out and replace it by our
			// TabControl component.
			if(tabBar) {
				rawChildren.removeChild(tabBar);
 
				tabBar = new TabControl();
				tabBar.name = "tabBar";
	                        tabBar.focusEnabled = false;
                                // We apply the component style to our instance
	                        tabBar.styleName = this;
 
                                // We modify certain styles
	                        tabBar.setStyle("borderStyle", "none");
	                        tabBar.setStyle("paddingTop", 0);
	                        tabBar.setStyle("paddingBottom", 0);
 
                                // We add our component
	                        rawChildren.addChild(tabBar);
			}
		}
	}
}

Note: The rawChildren property is a property of the container class. It only stores the enumerable components which allows to not have to enumerate the corresponding parts to the appearance of the container.

Our TabControl component emits an event ITEM_CLOSE indicating the request to delete a tab, we just therefore need to listen to the event with our Tabs component to delete the selected tab:

package net.iteratif.controls
{
	import mx.containers.TabNavigator;
 
        // personalised event
	import net.iteratif.events.ItemCloseEvent;
 
	public class Tabs extends TabNavigator
	{
		...
 
		protected override function createChildren():void {
			super.createChildren();
 
			if(tabBar) {
				...
				// We listen to the event emitted by the TabControl
				// when a delete request is sent
				tabBar.addEventListener(ItemCloseEvent.ITEM_CLOSE,destroyItem);
	                        ...
			}
		}
 
		protected function destroyItem(e:ItemCloseEvent):void {
			// We take out the corresponding container from its index
			removeChildAt(e.index);
		}
	}
}

It is important to study a component before stretching it too much … ;)

Source code of the Tabs component: Tabs.zip

By ITERATIF - BUGALOTTO Olivier (2007) You can find this tutorial and its comments on my blog