最近发现需求需要在每个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);
}
}
}
下面来看下测试代码
到此就完工啦。最后来看看效果图。