再论Flex中TitleWindow关闭按钮CloseButton的定制问题

问题：TitleWindow的关闭按钮不好看，能否自己定制？

方法：利用Flex的皮肤机制。

环境：Flex SDK 4.6

针对Flex中TitleWindow的关闭按钮修改问题，在前面的博文中sxy给出了一种解决方案，其主要思路是在TitleWindow上加一个关闭图标按钮，使其压盖原有的关闭按钮。这种方法可行但存在以下两个问题：

1. 新加的关闭按钮图标只能叠加在原有的关闭按钮上面，不能随便移动其位置。
2. 不能作为Flex界面定制的通用解决方案。

Flex组件的外观都是基于皮肤机制，而皮肤可以随意定制，换句话说Flex组件的外观你是可以随便修改的。这里我们以修改TitleWindow的关闭按钮为例，探讨下Flex的皮肤机制。

TitleWindow的皮肤机制

我们在Adobe Flash Builder中查看TitleWindow的源代码（spark.components.TitleWindow），发现其继承自Panel，而Panel最终继承自皮肤组件类SkinnableComponent，即该类可以应用皮肤，其默认皮肤为TitleWindowSkin(spark.skins.TitleWindowSkin)。

TitleWindowSkin类控制着TitleWindow的表现形式，其中名为closeButton的Button即为关闭按钮。其属性width=”15” height=”15” right=”7” top=”7”表示关闭按钮高宽都是15，距离右侧7，距离顶部7，和我们看到关闭按钮位于TitleWindow的左上角一致，修改这些属性可以调整关闭按钮的位置，而skinClass属性控制着SkinClass的外观，默认皮肤TitleWindowCloseButtonSkin。

查看TitleWindowCloseButtonSkin源码，我们发现其样式为X形状，而且up, over, down, disabled四种状态下颜色的apha值各不相同。正是基于这种机制来实现当鼠标移动到关闭按钮、点击关闭按钮时关闭按钮的不同变化。 

 

定制关闭按钮.

基于Flex的皮肤机制，我们来定制一个TitleWindow，主要是定制关闭按钮closeButton。

首先新建一个组件MyTitleWindow（文件->新建->MXML组件），该组件继承自TitleWindow。建立好后设置其skinClass属性，指向自己定义的皮肤类MyTitleWindowSkin。

然后新建一个类MyTitleWindowSkin类（文件->新建->MXML外观）,其中主机组件选择TitleWindow，创建以下项的副本会自动填写为TitleWindowSkin。 

建立好MyTitleWindowSkin类后，你会发现其代码和TitleWindowSkin的代码完全一样。这里我们仅仅修改closeButon，设置其skinClass属性为MyTitleWindowCloseButtonSkin。当然你如果想调整关闭按钮的位置，你可以修改其right，top等属性。 

最后我们来定制关闭按钮的外观，新建MyTitleWindowCloseButtonSkin（文件->新建->MXML外观），主机组件选择Button，创建以下项的副本选择TitleWindowCloseButtonSkin。 

新建好MyTitleWindowCloseButtonSkin后，基本删除继承来的所有代码，然后用一个关闭图标去替换原来的X样式，并设置鼠标移动上去和鼠标点击状态下图标不同的alpha值。

关闭图标为：

到此为止，我们就完成了关闭按钮的定制工作。最后将MyTitleWindow组件加到应用程序中，呈现出效果。 

最终效果图：此效果图，除了关闭按钮外，在MyTitleWindowSkin中对其他样式也进行了些定制。 

小结

通过Flex的皮肤机制，我们可以完全自由地掌控组件的外观，方便地设计出统一风格、美观的Flex组件。

实际应用中如果仅仅修改TitleWindow等组件的一些属性，是不用这么复杂的，毕竟这些组件本身提供了一些修改其样式的方法。

然而如果需要定制完全个性化的组件，上文的方法比较可取。设计好几组皮肤，以后就可以根据需要选择使用。