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);
		}
	}
}

下面來看下測試代碼

<?xml version="1.0" encoding="utf-8"?>

到此就完工啦。最後來看看效果圖。