Flex4中的皮肤(1): 自定义SkinnableComponent

Flex4提供了一组Spark组件，实现了全新的组件皮肤自定义（Gumbo Skinning ），从而将组件灯显示和功能逻辑完全分离。
本文以PetriNet 中的节点为例，展现Flex4为编程带来的便利。

PetriNet中的节点

下图是一个PetriNet的示例。在PetriNet中有两种节点：库所（Place）和变迁(Transition)。库所和变迁都可以容纳令牌（Token）。如果一个变迁的每个输入库所 （input place）都拥有令牌，该变迁即为被允许(enable) 。

PetriNet

在Flex3中，我们要实现这两种节点，通常会采取继承的方式：

众所周知继承和类膨胀会带来一些问题，如果仅仅因为显示的不同而实现两个不同的组件类并不是一个很好的解决办法。

在Flex4中，我们完全可以只定义一个组件类来实现功能逻辑，而把显示交给Skin去处理：

显示和逻辑分离

spark组件都继承自SkinnableComponent，而SkinnableComponent继承子UIComponent并扩展了Skin相关的功能；同样Skin类也继承自UIComponent。

通过这样的方式，spark组件在原有的组件架构基础上，实现了显示和逻辑的分离。

构建自定义的SkinnableComponent和Skin

直接继承SkinnableComponent就可以实现一个自定义的组件：

Node.as

package skinsample { import spark.components.supportClasses.SkinnableComponent; public class Node extends SkinnableComponent { public function Node() { super(); } } }

使用SkinnableComponent时，必须定义skinClass样式，否则会发生错误。skinClass的定义如下：

/** * Name of the skin class to use for this component. The skin must be a class that extends * the spark.components.supportClasses.Skin class. * * @langversion 3.0 * @playerversion Flash 10 * @playerversion AIR 1.5 * @productversion Flex 4 */ [Style(name="skinClass", type="Class")]

所以在使用自定义组件之前，还要先定义Skin类。这里定义了两个皮肤：

PlaceSkin.mxml

<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300"> <s:Ellipse id="ellipse" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x77CC22" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Ellipse> </s:Skin>

TransitionSkin.mxml

<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300"> <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x131313" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Rect> </s:Skin>

其中的s:Ellipse, s:Rect等元素来自Flex4中的FXG 。

有了Skin后，就可以使用SkinnableComponent组件了：

NodeSample.mxml

<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:skinsample="skinsample.*"> <fx:Script>  </fx:Script> <skinsample:Node skinClass="skinsample.TransitionSkin" x="10" y="30" width="50" height="50"/> <skinsample:Node skinClass="skinsample.PlaceSkin" x="80" y="30" width="50" height="50"/> </s:WindowedApplication>

运行效果如下：