Flex自定义组件

项目中需要用到如下一个效果。下图中五个圆代表一个五孔的梅花管。客户在后台操作时需要编辑梅花管的每个子孔占用情况。
客户的要求是：点击某一个孔，小孔变黑，表明此孔被占用；再次点击，则小孔再变成透明圆形，表明此孔未被占用。

由于没学过flash或者其它相关功能，且还有七孔，五孔盘管等之分，我考虑用自定义组件来实现
学习Flex没有多久，还没接触过自定义组件，于是研究之，感谢这篇博文
http://www.cnblogs.com/xxcainiao/archive/2008/03/08/1096815.html

 

File->New->MXML Component新建一个组件，继承自：Canvas

在组件里我用五个Png图片拼成上图的五孔梅花管。代码如下：

<mx:Image x="31" y="2" source="Images/C.png" id="C1" click="switchImg(C1)"/>
    <mx:Image x="3" y="42" source="Images/C.png" id="C2" click="switchImg(C2)"/>
    <mx:Image x="35" y="79" source="Images/C.png" id="C3" click="switchImg(C3)"/>
    <mx:Image x="81" y="62" source="Images/C.png" id="C4" click="switchImg(C4)"/>
    <mx:Image x="77" y="14" source="Images/C.png" id="C5" click="switchImg(C5)"/>

switchImg方法是用来更换图片，C.png是一个空心的圆，而C2.png是一个实心的圆。代码如下：

 

<mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private var _ware_num:int;
            private function switchImg(img:Image):void
            {
                img.source = img.source.toString()=="Images/C.png"?"Images/C2.png":"Images/C.png";
            }
        ]]>
    </mx:Script>

 

 然后将这个组件直接拖到主页面即可运行了。后面的属性，方法的设置略去。由于多处重复用到这个操作，所以我把它定义为一个组件，并可以通过代码多次调用。
复杂功能逐步完善中，先记录之