像IE7一样的Flex TabBar 小控件

本文为原创文章,如果转载请注明出处:[url]http://summerofthatyear-gmail-com.iteye.com/blog/352348[/url]
Flex自带的TabBar只是单纯的显示一排Tab，它没有提供IE7那样后面有一个小Tab，点击后自动新建一个。
我写一个类似IE7 tab的控件，此控件继承自mx.controls.TabBar。功能就是TabBar里始终有一个Tab可供新建Tab页;
控件代码IE7TabBar .as:

package com.montage.controls
{
	import com.montage.events.IE7TabBarEvent;

	import flash.events.MouseEvent;

	import mx.controls.Button;
	import mx.controls.TabBar;

	/**
	 * 点击新建tab时所要派发的事件
	 */
	[Event(name="newItemClick", type="com.montage.events.IE7TabBarEvent")]

	/**
	 * 
	 * @author Montage
	 */	
	public class IE7TabBar extends TabBar
	{
		public function IE7TabBar()
		{
			super();
		}

		[Embed(source="/com/montage/icons/tab_add.png")]
		public var addIcon:Class;

		private var _newTab:Button;

		protected function mouseOutHandler( event:MouseEvent ):void
		{
			var but:Button = Button( event.currentTarget );
			but.setStyle("icon", null);
		}

		protected function mouseOverHandler( event:MouseEvent ):void
		{
			var but:Button = Button( event.currentTarget );
			but.setStyle("icon", addIcon);
		}

		override protected function createChildren():void
		{
			super.createChildren();
			_newTab = createNavItem("") as Button;
			_newTab.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
			_newTab.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
		}

		override protected function commitProperties():void
		{
			super.commitProperties();
			if( !contains(_newTab) )
				addChild(_newTab);
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			if( _newTab )
			{
				_newTab.toggle = false;
				_newTab.setStyle("paddingLeft", 5);
				_newTab.setStyle("paddingRight", 5);
				_newTab.width = 30;
			}
		}

		override protected function clickHandler(event:MouseEvent):void
		{
			if( event.currentTarget == _newTab )
			{
				var evt:IE7TabBarEvent = new IE7TabBarEvent( IE7TabBarEvent.NEW_ITEM_CLICK );
				dispatchEvent(evt);
				return;
			}
			super.clickHandler(event);
		}

	}
}

自定义事件IE7TabBarEvent.as

package com.montage.events
{
	import flash.events.Event;

	/**
	 * 给IE7TabBar提供事件支持
	 * @author Montage
	 */	
	public class IE7TabBarEvent extends Event
	{
		public static const NEW_ITEM_CLICK:String = "newItemClick";

		public function IE7TabBarEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}

	}
}

使用范例：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:controls="com.montage.controls.*">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import com.montage.events.IE7TabBarEvent;
			import mx.events.ItemClickEvent;

			[Bindable]
			public var dataSource:Array = ["AAA", "BBB", "CCC", "DDD"];

			/**
			 * 侦听到点击新建tab的事件
			 */
			public function newItemClickHandler( event:IE7TabBarEvent ):void
			{
				Alert.show("sdssd");
			}

		]]>
	</mx:Script>
	<controls:IE7TabBar id="tabBar" dataProvider="{dataSource}" newItemClick="newItemClickHandler( event )"/>
</mx:Application>