FLEX自定义皮肤1_自定义圆形和方形节点

1.概述

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

 

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

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

 

 

显示和逻辑分离

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

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

 
     节点效果如下，可以用于Petri网的节点表示等。

 

2.开发过程
2.1创建一个节点类
      节点类必须继承SkinnableComponent，这样才能设置皮肤
代码如下

1. package nodeexam
   
2. {
   
3.     import spark.components.supportClasses.SkinnableComponent;
   
4.     public class Node extends SkinnableComponent {
   
5.         public function Node() {
   
6.             super();
   
7.         }
   
8.     }
   
9. }

2.2 定义Skin类
      这里定义了两个皮肤，代码如下
PlaceSkin.mxml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
   
3.         xmlns:s="library://ns.adobe.com/flex/spark"
   
4.         xmlns:mx="library://ns.adobe.com/flex/mx"
   
5.         width="400" height="300">
   
6.     <s:Ellipse id="ellipse" top="0" right="0" bottom="0" left="0">
   
7.         <s:fill>
   
8.             <s:SolidColor color="0x77CC22" />
   
9.         </s:fill>
   
10.         <s:stroke>
    
11.             <s:SolidColorStroke color="0x131313" weight="2"/>
    
12.         </s:stroke>
    
13.     </s:Ellipse>
    
14. </s:Skin>

注：s :Ellipse：表示画椭圆
       s:stroke：表示画线条
       s:fill：表示填充的颜色和透明度
       s:Rect：表示画矩形，可以带圆角

TransitionSkin.mxml

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

2.3应用程序
代码如下

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <s:Application
   
3.     xmlns:fx="http://ns.adobe.com/mxml/2009"
   
4.     xmlns:s="library://ns.adobe.com/flex/spark"
   
5.     xmlns:mx="library://ns.adobe.com/flex/halo"
   
6.     xmlns:skinsample="nodeexam.*">
   
7. 
   
8.     
   
9.     <skinsample:Node skinClass="nodeexam.TransitionSkin" x="10" y="30" width="50" height="50"/>
   
10.     <skinsample:Node skinClass="nodeexam.PlaceSkin" x="80" y="30" width="50" height="50"/>
    
11. </s:Application>