实现一个自定义组件

如果要创建一个自定义组件，你需要重写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);             }