Flex 给PopUpButton 设置皮肤

Flex PopUpButton组件是由一个"Label区域"和一个下拉箭头"Arrow区域"所组成的。如图

对我来说，PopUpButton默认的Style有几个地方不适合我：

1 点击Label区域不会弹出窗口

2 有时候我不想要"Arrow区域"，想把"Arrow区域"去掉

3 在开发过程中，都一般会给组件创建自己的皮肤。假如我给PopUpButton设置一个over-skin皮肤，当我鼠标移动到"Arrow区域"的时候over-skin的效果就不见了。

解决方法

1 把openAlways属性设定为"true"，这样点击Label区域也会弹出窗口

2,3都暂时没有单独的解决方法，但是2，3可以用点小技巧来联合解决

首先，因为没有直接的属性来去掉"Arrow区域"，那既然如此，我们就让Arrow区域占满整个PopUpButton，然后覆盖上我们自己的皮肤。这样Label区域就没有了。

方法： 设置让PopUpButton的arrow-button-width属性=PopUpButton的width属性。

这样第3个问题也就解决了，因为我们的鼠标永远只能移动到"Arrow区域"。但需要注意，这个时候皮肤我们就不能使用over-skin了，而要使用pop-up-over-skin属性来设定Arrow区域的皮肤，同样pop-up-down-skin也要设定

.facePopUpButton {

   arrow-button-width:25;            

   up-skin: Embed(source="assets/skin.swf",symbol="FacePupupButton_upSkin");

   pop-up-over-skin: Embed(source="assets/skin.swf",symbol="FacePupupButton_overSkin");

   pop-up-down-skin: Embed(source="assets/skin.swf",symbol="FacePupupButton_upSkin");

}

效果如下，图中最底下那个笑脸表情就是PopUpButton，点击后就弹出了显示上面一堆表情的窗口，现在鼠标在PopUpButton上移动，skin显示不会有任何问题了。