如果要创建一个自定义组件,你需要重写UIComponent类的某些方法,最少需要重写如下方法:构造函数, createChildren(), commitProperties(), measure(), layoutChrome(), updateDisplayList() 。
基础语句结构如下:
- package myComponents
- {
- public class MyComponent extends UIComponent
- { .... }
- }
注意包名与你的磁盘目录结构一致。接下来一一讲解每个方法的重写。
构造函数
示例如下:
public function 类名() {
super();
}
注意,AS3中构造函数不支持重载。
createChildren()
此方法的作用是在此自定义组件中创建子组件。
此方法不用你去调用,Flex在你将此自定义组件使用addChild方法加入到父组件时自动调用。示例如下:
- // Declare two variables for the component children.
- private var text_mc:TextArea;
- private var mode_mc:Button;
- override protected function createChildren():void {
- // Call the createChildren() method of the superclass.
- super.createChildren();
- // Test for the existence of the children before creating them.
- // This is optional, but do this so a subclass can create a different
- // child.
- if (!text_mc) {
- text_mc = new TextArea();
- text_mc.explicitWidth = 80;
- text_mc.editable = false;
- text_mc.addEventListener("change", handleChangeEvent);
- // Add the child component to the custom component.
- addChild(text_mc);
- }
- // Test for the existence of the children before creating them.
- if (!mode_mc) {
- mode_mc = new Button();
- mode_mc.label = "Toggle Editing";
- mode_mc.addEventListener("click", handleClickEvent);
- // Add the child component to the custom component.
- addChild(mode_mc);
- }
- }
上例使用createChildren()在此自定义组件中加入了一个Label和一个Button。
commitProperties()
此方法是在修改组件属性时使用。
此方法不用你去调用。当你调用invalidateProperties()(刷新属性)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的属性来显示。
此方法还有一个作用是为measure()方法提供最新的属性信息。
measure()
此方法的作用是设置组件的默认尺寸。
此方法不用你去调用。当你调用invalidateSize ()(刷新尺寸)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以默认尺寸来显示。
如果你显式的设置了组件的尺寸,如<mx:Button height="10" width="10"/>,Flex就不用调用此方法了。要注意,measure()方法只是设置组件的默认尺寸,在 updateDisplayList()方法中,组件具备的实际尺寸(actual size)与默认尺寸可能不同。
Flex中的每个组件都是有默认尺寸的。如这样写:<mx:Button />,Flex就会自动给一个尺寸。如果你想重写默认尺寸,可以重新设置measuredHeight 、measuredWidth、measuredMinHeight、measuredMinWidth。如下例:
- package myComponents
- {
- // asAdvanced/myComponents/DeleteTextArea.as
- import mx.controls.Button;
- public class BlueButton extends Button {
- public function BlueButton() {
- super();
- }
- override protected function measure():void {
- super.measure();
- measuredWidth=100;
- measuredMinWidth=50;
- measuredHeight=50;
- measuredMinHeight=25;
- }
- }
- }
然后在MXML中使用:
- <?xml version="1.0"?>
-
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- xmlns:MyComp="myComponents.*" >
- <mx:VBox>
- <MyComp:BlueButton/>
- <mx:Button/>
- </mx:VBox>
- </mx:Application>
此中的BlueButton就会以默认值100宽,50高来显示。
layoutChrome()
一些容器类(Container)或其子类采用此方法设置组件的border Area(边框区域)。
此方法不用你去调用。当你调用invalidateDisplayList ()(刷新显示)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的边框来显示。
典型的用法是你可以重写RectangularBorder类。
一个将组件的边框区域(border Area)和内容区域(content area)分开处理的原因是当Container.autoLayout=false时。
总括的来讲,layoutChrome()是用来处理边框区域的刷新显示,而updateDisplayList()用来处理内容区域的刷新显示。
updateDisplayList()
此方法不用你去调用。当你调用invalidateDisplayList ()(刷新显示)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的样子来显示。其实类似VC++中的PAINT消息处理。
此方法的主要作用为:
A.更改组件的尺寸和位置。要改变尺寸,在此方法中使用setActualSize()方法,而不是使用width和height属性来完成。要改变位置,在此方法中使用move()方法,而不是使用x和y属性来完成。
B.绘制可视元素,如皮肤、样式、边框。你可以使用Flash Drawing API来完成。
函数的原型为:
protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
两个参数分别为此自定义组件的宽度和高度。当然如果设置父容器设置scaleY=2,你设置unscaledHeight=100,那么最终呈现的是200高度的组件。
第一个功能示例:
- package myComponents
- {
- // asAdvanced/myComponents/BottomUpVBox.as
- import mx.containers.VBox;
- import mx.core.EdgeMetrics;
- import mx.core.UIComponent;
- public class BottomUpVBox extends VBox
- {
- public function BottomUpVBox() {
- super();
- }
- override protected function updateDisplayList(unscaledWidth:Number,
- unscaledHeight:Number):void {
- super.updateDisplayList(unscaledWidth, unscaledHeight);
- // Get information about the container border area.
- // The usable area of the container for its children is the
- // container size, minus any border areas.
- var vm:EdgeMetrics = viewMetricsAndPadding;
- // Get the setting for the vertical gap between children.
- var gap:Number = getStyle("verticalGap");
- // Determine the y coordinate of the bottom of the usable area
- // of the VBox.
- var yOfComp:Number = unscaledHeight-vm.bottom;
- // Temp variable for a container child.
- var obj:UIComponent;
- for (var i:int = 0; i < numChildren; i++)
- {
- // Get the first container child.
- obj = UIComponent(getChildAt(i));
- // Determine the y coordinate of the child.
- yOfCompyOfComp = yOfComp - obj.height;
- // Set the x and y coordinate of the child.
- // Note that you do not change the x coordinate.
- obj.move(obj.x, yOfComp);
- // Save the y coordinate of the child,
- // plus the vertical gap between children.
- // This is used to calculate the coordinate
- // of the next child.
- yOfCompyOfComp = yOfComp - gap;
- }
- }
- }
- }
第二个功能示例:
- override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
- super.updateDisplayList(unscaledWidth, unscaledHeight);
- // Draw a simple border around the child components.
- graphics.lineStyle(1, 0x000000, 1.0);
- graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
- }
出自:http://www.ebibi.com/i/experience/2011/0307/3512.html
分享到:
相关推荐
基于canvas 2D(高性能)实现微信小程序自定义组件-环形进度条 可定义大小,颜色,渐变等,也可自行扩展更多属性
资源为Winform用户自定义组件库,是自己平时做项目...改库包含了常用的,按钮,圆角按钮,复选框,单选框,滚动条,带标题的Panel,Label,圆角窗口等等,基本项目用到的组件覆盖完了,能够实现一个软件的扁平化设计。
使用微搭自定义组件实现搜索组件
一个小程序用的双指缩放组件,相关文章地址见博客《微信小程序使用自定义组件实现图片双指缩放效果》。(现在资源怎么不可以设置为不要积分了0.)
使用QtQuick做开发,会大量使用自定义的组件,但自定义组件如何在QtCreate的designer的库面板中显示并使用?本人查阅了大量资料,并摸索后将实现过程详细记录,通过一个小工程来做一示范
创建JSF自定义组件
小程序自定义组件扩展 behavior, watch 属性实现
6.2 自定义组件的基本结构 164 6.3 重写onMeasure方法 166 6.4 组件属性 175 6.4.1 属性的基本定义 175 6.4.2 读取来自style和theme中的属性 181 6.5 案例1:圆形ImageView组件 186 6.6 案例2:验证码组件CodeView ...
一步一步教你如何在jsf中自定义组件,简单易学,有程序完整代码。通过这个小demo你可以进一步开发复杂的组件。
主要介绍了微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递 ,需要的朋友可以参考下
datePicker日期组件-使用ts,tsx完成的自定义组件,
二、如何实现自定义组件 步骤1:写 attrs.xml 资源文件 1、attrs.xml 文件 和 R 文件对应关系 2、attrs.xml 文件重点注意 (1)declare-styleable子元素 (2)attrs.xml 文件只做属性的描述 步骤2:写自定义类 步骤3...
2.通过继承Preference类,来实现自定义preference组件类; 3.通过xml文件引用自定义preference组件,res->xml->xml文件; 下面通过实例来实现: 1.需求:本实例主要实现一个LinearLayout包含ImageView,Button,...
实现炫酷的获取本地图片和相机拍照图片-自定义组件
场景: 当项目中多处出现相同的模块时,此时的正常考虑是将其做成公共...--组件文件 比如说这个组件叫 vSelect 下面会用--> v-model=value placeholder=请选择> <el-option v-for=(item,index) in options
winform自定义打印设计工具实现,windows打印组件,可自定义设计,静态文本,动态文本,图片,二维码等,代码动态调用进行打印操作,提供入门思路,有兴趣的朋友可以自行修改拓展。
自定义组件实现可插拔功能样例
里面是一个自定义尺子控件,可实现拖动显示,自定义距离等.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
功能描述: ...组件名称是 CouterBtn 最终效果如下 ... 这是一个利用 v-model实现的自定义的表单组件 <h6>CouterBtn组件的值 <i> {{ btnValue }} </i></h6> 5. <counter v-model=btnValue></counter-btn