flex系列文章4：谈谈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",

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



测试程序源代码为

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.colapht.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>

注意红色字体部分! 
 

Flex技术专栏 --by mervyn_lee