实现一个自定义组件
2010-07-13 17:34
375 查看
如果要创建一个自定义组件,你需要重写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"?> <!-- asAdvanced/ASAdvancedMainBlueButton.mxml --> <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. yOfComp = 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. yOfComp = 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); } |
相关文章推荐
- 利用Vue v-model实现一个自定义的表单组件
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- 实现一个自定义组件
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- 利用vue组件自定义v-model实现一个Tab组件方法示例
- Vue.js实现一个自定义分页组件vue-paginaiton
- 实现一个自定义组件
- Flex 实现一个自定义组件
- Flex 实现一个自定义组件
- 工作笔记五——自己实现一个Vue的下拉刷新组件
- Android 自定义组件成JAR包的实现方法
- 一个简单的组件开发源码(自定义Picturebox)
- 一个流行且实用的JS表单验证提示,演示了怎么自定义错误信息的显示方式,同时通过写FormValid.showError类方法来实现错误显示方式自定义: errMsg 是一个错误消息的数组,这样方便自定
- 自定义TabHost 一个avtiviy 多个标签 ,实现背景图片随选项卡切换滑动效果
- shell脚本中使用自定义命令之三---通过加载一个envsetup.sh实现
- 自定义组件实现三种进度条
- iOS中实现一个支持小数的星星评分组件
- jQueryUI如何自定义组件实现代码
- React Native -20.React Native 自定义组件(跨文件,类似创建一个类)
- springboot配置文件中使用配置信息自定义注入哪一个类名(比如多个类实现一个接口,使用resource(name=${配置文件的key}”))