FLEX4 TitleWindow 添加帮组按钮（最大化、最小化相同）使用皮肤更改

最近发现需求需要在每个flex弹出框口上有一个“问号”按钮，实现帮助功能。在网上搜了一下，对于flex3版本的通过override createChildren 方法来添加，但是由于项目是flex4版本的。因此开始寻找了一下皮肤的使用。

把使用的流程记录下来，以便以后查阅。

首先，查看flex4的TitleWindow.as 发现里面没有createChildren 只有override protected function partAdded(partName:String, instance:Object) : void和override protected function partRemoved(partName:String, instance:Object):void。

发现partAdded是继承自panel后又继承自SkinnableContainer，想到这个应该是在皮肤中添加，因此新建一个titleWindowSkin，找到其中的closeButton组件。模仿着抄一个。TitleWindowHelpButtonSkin当然是抄TitleWindowCloseButtonSkin的啦，自己换个就可以。

            

到此皮肤文件就写完啦。

接下来是写一个继承titleWindow的类 HSTitleWindow

package com.component
{
	import com.events.HSHelpEvent;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import spark.components.Button;
	import spark.components.TitleWindow;
	
	[Event(name="help", type="com.events.HSHelpEvent")]
	
	public class HSTitleWindow extends TitleWindow
	{

		[SkinPart(required="false")] 
		public var helpButton:Button;
		
		public function HSTitleWindow()
		{
			//TODO: implement function
			super();
		}
		/**
		 *  @private
		 */
		override protected function partAdded(partName:String, instance:Object) : void
		{
			super.partAdded(partName, instance);
			
			if (instance == helpButton)
			{
				helpButton.focusEnabled = false;
				helpButton.addEventListener(MouseEvent.CLICK, helpMe);   
			}
		}
		
		/**
		 *  @private
		 */
		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);
			
			if (instance == helpButton)
			{
				helpButton.removeEventListener(MouseEvent.CLICK, helpMe);   
			}
		}
		
		protected function helpMe(event:MouseEvent):void{
			dispatchEvent(new HSHelpEvent(HSHelpEvent.HS_HELP));
		}
	}
	
}

然后写一下 HSHelpEvent

package com.events
{
	import flash.events.Event;
	
	public class HSHelpEvent extends Event
	{
		public static const HS_HELP:String = "help";
		
		public function HSHelpEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		
		override public function clone():Event
		{
			return new HSHelpEvent(type, bubbles, cancelable);
		}
	}
}

下面来看下测试代码

到此就完工啦。最后来看看效果图。