转自：http://blog.csdn.net/supperflex/article/details/6233850
?
如果要创建一个自定义组件，你需要重写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,unscaledWidth,unscaledHeight);??????????? }
