flex 自定义组件 (最好重写的方法)
如果要创建一个自定义组件，你需要重写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);????????????
}
