flex系列文章4:谈谈flex自定义组件

转载 2007年10月12日 10:44:00

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

flex自定义组件(mxml文件)

本来是每天写一点的,上次到现在差6篇,给自己提点醒,免得又忘了。今天本来是想看看TabNavigator中各个选项卡是一起初始化还是点开谁就初始化谁的,却莫名奇妙的看了一下自定义组件。关于选项卡的问题...
  • skyboy11yk
  • skyboy11yk
  • 2013年11月29日 14:30
  • 3712

FLEX4 设置全局样式 的方法

结果:   Using the Flex 4 StyleManager: Getting Style Declarations December 6 As you may know, ...
  • truelove12358
  • truelove12358
  • 2014年05月22日 11:40
  • 1241

使用bison和flex工具[zz]

这里有一个使用bison建立一个简单的计算器的例子: http://www.cs.berkeley.edu/~maratb/cs164/bison.html 使用bison和flex工具学习编译原理...
  • Chinamming
  • Chinamming
  • 2013年11月26日 22:56
  • 1544

Flex4开发的自定义输入框皮肤组件,代图标

  • 2012年04月07日 21:35
  • 3.15MB
  • 下载

Flex学习笔记4——自定义组件

原因          更改已有组件的可视化外观          继承UIComponent创建新组件          组合两个或多个组件 步骤 1.       如果有必要,为组件...
  • dananhai381
  • dananhai381
  • 2011年08月27日 15:23
  • 667

Flex4自定义分页组件

最近项目需要 需要写个分页组件,我这人比较懒 一般写出来之后 就记下来供以后粘贴复制了 哈哈,希望大家学习的时候不要这样搞啊下面贴出代码PagingBar.mxml ...
  • vipliyaohua
  • vipliyaohua
  • 2011年07月18日 10:38
  • 2689

flex4 自定义分页组件

  • u010395804
  • u010395804
  • 2014年06月23日 17:33
  • 540

Flex4组件教程:自定义两级导航菜单组件

Flex4组件教程:自定义两级导航菜单组件Posted 四月 8th, 2011 by 郭少瑞Flex4郭少瑞声明:本文为RIAMeeting原创文章,您可以自由转载,但请务必说明文章来源并保留原文链...
  • jakeorion
  • jakeorion
  • 2011年04月11日 09:39
  • 2902

Flex4组件教程:自定义两级导航菜单组件

Flex4组件教程:自定义两级导航菜单组件Posted 四月 8th, 2011 by 郭少瑞Flex4郭少瑞声明:本文为RIAMeeting原创文章,您可以自由转载,但请务必说明文章来源并保留原文链...
  • jakeorion
  • jakeorion
  • 2011年04月11日 09:41
  • 1024

自定义Flex4+的Spark组件part1:使用ActionScript3开发Spark组件Component类

前言 Flex开发移动应用时,出于性能考虑,需要使用AS3编写组件Skin,而不是使用MXML。实际上,通过使用AS3编写组件皮肤,开发者可以更深入的了解Flex的组件生命周期,无论是对于移动应用开...
  • gsh10zh
  • gsh10zh
  • 2013年12月16日 14:08
  • 720
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex系列文章4:谈谈flex自定义组件
举报原因:
原因补充:

(最多只允许输入30个字)