谈谈flex自定义组件

谈谈flex自定义组件

Flex组件开发可分为两种. 一是在mxml中创建自定义组件.另一种则在actionscript class中创建. 总体说来其实大同小异. 首先我们要转换一种观点. mxml组件文件和ActionScript class文件一样都是类.开发者都可以在语法和机制上new 这个类的. 比如两个一模一样的组件.MyButton.mxml 和 MyButton.as. 当我们想要在某一个as函数中动态的创建这个自定义按钮时,都可以.
public var tempButton:MyButton = new MyButton();
parentPanel.addChild(tempButton);
当我们自定义组件时,有若干问题要注意.
1. 如果我们想要给这个新组件添加一个属性,只要在组件类中声明这个变量为public就可以了.
2. 如果想要给这个组件添加一个自定义事件,只要在组件类定义这个Event然后addEventListener就可以了.
3. 如果此组件需要一些Util工具函数,只要在组件定义类内部把这个工具函数public static就可以了.
4. 如果你的组件比较复杂并且存在数据相互依存,那么建议最好将组件的createPolicy设置为"all", default为"auto",

本人写的一个表盘小组件例子.

源文件下载请参考
http://blog.ccidnet.com/blog-htm-do-showone-uid-64654-type-blog-itemid-192891.html

测试程序源代码为

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.demo.component.*" layout="absolute" xmlns:scaler="com.demo.component.scaler.*">
    <mx:Script>
        <![CDATA[
            public function doRunner():void{
                //mx.controls.Alert.show(scalertest.currentvalue + '-2');
                //scalertest.maxvalue = Number(maxvalue.text)；
                scalertest.maxvalue = Number(maxvalue.text);
                scalertest.zonevalue1 = Number(zonevalue1.text);
                scalertest.zonevalue2 = Number(zonevalue2.text);
                scalertest.currentvalue = Number(currentvalue.text);
                scalertest.startvalue = Number(startvalue.text);
                scalertest.duration = Number(duration.text);
                scalertest.colorfills = colorfills.text ;
                //mx.controls.Alert.show(scalertest.currentvalue + '-2')
               
                scalertest.doInit();
                scalertest.runner.end();
                scalertest.runner.play();
            }
        ]]>
    </mx:Script>
    <mx:Panel width="496" height="529" layout="absolute" id="panel" title="Scale Demo by mervyn_lee">
        <mx:Canvas x="10" y="0" width="466" height="479">
            <mx:Button id="myButton"
               label="play"
               click="doRunner()" x="337" y="41" width="78" height="32"/>
            <scaler:Scaler id="scalertest" creationPolicy="all"
                maxvalue="1" currentvalue="0" duration="1" startvalue="0"
                zonevalue1="1" zonevalue2="1" colorfills="GYR"
                 x="84" y="10"/>
            <mx:Label x="34" y="171" text="maxvalue"/>
            <mx:TextInput x="142" y="169" id="maxvalue" text="1100"/>
            <mx:Label x="34" y="213" text="zonevalue1"/>
            <mx:TextInput x="142" y="211" id="zonevalue1" text="320"/>
            <mx:Label x="34" y="255" text="zonevalue2"/>
            <mx:TextInput x="142" y="253" id="zonevalue2" text="510"/>
            <mx:Label x="34" y="300" text="duration"/>
            <mx:TextInput x="142" y="298" id="duration" text="1300"/>
            <mx:Label x="34" y="342" text="currentvalue"/>
            <mx:TextInput x="142" y="340" id="currentvalue" text="550"/>
           
            <mx:Label x="34" y="385" text="colorfills"/>
            <mx:TextInput x="142" y="383" id="colorfills" text="GYR"/>
            <mx:TextInput x="142" y="429" text="0" id="startvalue"/>
            <mx:Label x="34" y="431" text="startvalue" />
        </mx:Canvas>
    </mx:Panel>
   
</mx:Application>
注意红色字体部分!