Flex4新推出了skin/换肤/外观设计的功能, adobe网站的flex开发人员中心有篇很好的文章介绍了这一功能, 介绍 Flex 4 beta 中的外观设计.

我们这里通过设计一个简单的TitleWindow皮肤来了解一下skin以及对skin中的相关component添加事件处理, 我们先来看一下最终效果图.

我们来看一下该窗口的右上角相关按钮的皮肤代码

				<s:SkinnableContainer id="btnMin" skinClass="RIA_Desktop.skins.appwin.ButtonMinSkin" toolTip="最小化"
						  width="12" height="12" right="60" top="10" />
				<s:SkinnableContainer id="btnMax" skinClass="RIA_Desktop.skins.appwin.ButtonMaxSkin" toolTip="最大化"
									  width="12" height="12" right="40" top="10" />
				<s:SkinnableContainer id="btnRestore" skinClass="RIA_Desktop.skins.appwin.ButtonRestoreSkin" toolTip="还原" visible="false"
						  width="12" height="12" right="40" top="10" />
				<s:SkinnableContainer id="btnClose" skinClass="RIA_Desktop.skins.appwin.ButtonCloseSkin" toolTip="关闭"
						  width="12" height="12" right="20" top="10" />

然后我们需要新建一个基于TitleWindow的自定义组件, 设置其skinClass为刚才设计的skin.

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="800" height="500" skinClass="RIA_Desktop.skins.appwin.TitleWindowSkin"
			   >

重点在这里, 在自定义组件中添加相关按钮

// skin中的变量, 名称必须相同
[SkinPart(required="false")]
public var btnMin:SkinnableContainer;
[SkinPart(required="false")]
public var btnMax:SkinnableContainer;
[SkinPart(required="false")]
public var btnRestore:SkinnableContainer;
[SkinPart(required="false")]
public var btnClose:SkinnableContainer;

override protected function createChildren():void
{
	super.createChildren();

	//
	// 监听按钮事件
	//
	btnClose.addEventListener(MouseEvent.CLICK, onBtnClose);
	btnMax.addEventListener(MouseEvent.CLICK, onBtnMax);
	btnMin.addEventListener(MouseEvent.CLICK, onBtnMin);
	btnRestore.addEventListener(MouseEvent.CLICK, onBtnRestore);
}

// ....

/**
 * 自身关闭按钮处理, 同时派发关闭事件, 以便和项目应用程序相结合
 **/
protected function onBtnClose(event:MouseEvent):void
{
	btnMax.visible = true;
	btnRestore.visible = false;
	theStatus = 0;
	this.dispatchEvent(new AppWindowEvent('myClose', this));
}