實現一個自定義組件

如果要創建一個自定義組件，你需要重寫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.
               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