UIComponent的生命周期(life cycle)

写flex组件,了解UIComponent的生命周期(life cycle)很重要,尤其是初始化(initialization)的过程很复杂,贴个文件可以很容易看清这个顺序

文件如下:

package
{
import flash.events.Event;

import mx.core.UIComponent;
import mx.events.FlexEvent;

public class UILifeCycle extends UIComponent
{
public function UILifeCycle()
{
super();
trace("***[ constructor ]");

//flash.events.Event
this.addEventListener(Event.ADDED,onAdded);
this.addEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
this.addEventListener(Event.REMOVED,onRemoved);
this.addEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStage);

//mx.events.FlexEvent;
this.addEventListener(FlexEvent.ADD,onAdd);
this.addEventListener(FlexEvent.REMOVE,onRemove);
this.addEventListener(FlexEvent.PREINITIALIZE,onPreinitialize);
this.addEventListener(FlexEvent.INITIALIZE,onInitialize);
this.addEventListener(FlexEvent.CREATION_COMPLETE,onCreationComplete);

}

//flash.events.Event
private function onAdded(eo:Event):void{trace(eo.toString())};
private function onAddedToStage(eo:Event):void{trace(eo.toString())};
private function onRemoved(eo:Event):void {trace(eo.toString())};
private function onRemovedFromStage(eo:Event):void {trace(eo.toString())};

//mx.events.FlexEvent;
private function onAdd(eo:FlexEvent):void {trace(eo.toString())};
private function onRemove(eo:FlexEvent):void{trace(eo.toString())};
private function onPreinitialize(eo:FlexEvent):void{trace(eo.toString())};
private function onInitialize(eo:FlexEvent):void{trace(eo.toString())};
private function onCreationComplete(eo:FlexEvent):void{trace(eo.toString())};

override protected function createChildren():void{trace("***[ createChildren ]")}
override protected function commitProperties():void{trace("***[ commitProperties ]")}
override protected function measure():void{trace("***[ measure ]")}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{trace("***[ updateDisplayList]")}

}
}

拖到舞台上发布就可以看到trace信息了：

***[ constructor ]
[Event type="added" bubbles=true cancelable=false eventPhase=2]
[Event type="add" bubbles=false cancelable=false eventPhase=2]
[Event type="preinitialize" bubbles=false cancelable=false eventPhase=2]
***[ createChildren ]
[Event type="initialize" bubbles=false cancelable=false eventPhase=2]
***[ commitProperties ]
***[ measure ]
***[ updateDisplayList]
[Event type="creationComplete" bubbles=false cancelable=false eventPhase=2]
[Event type="addedToStage" bubbles=false cancelable=false eventPhase=2]

如果想详细的了解各个部分请看

本站推荐过的<Programing Flex 2> 那本书的最后一章

或者在自带的帮助中找 Creating and Extending Flex 3 Components / Creating ActionScript Components / Creating Advanced Visual Components in ActionScript

偶简单总结了一下

组件的life cycle包含3个阶段:initialization, update, destruction.

initialization阶段又包括construction部分, attachment部分,和initialization部分,直接看偶下边画的图吧

keeping in mind what invalidation methods cause a call to what validation method

invalidateProperties( ) commitProperties( )
invalidateSize( ) measure( )
invalidateDisplayList( ) updateDisplayList( )

commitProperties()

This method’s purpose is to commit any values typically set by
using a setter function. Often the commitProperties( ) method is as simple as calling
super.commitProperties( ) and setting the cached values:

measure( )

The purpose of this method is to perform measurement calculation and define sizing
information for the framework.

As a general rule, you will typically use the children’s width and
height properties to retrieve the size values of children that do not inherit from
UIComponent. For children that do inherit from UIComponent, you will want to use the
getExplicitOrMeasuredWidth( ) and getExplicitOrMeasuredHeight( ) methods.

updateDisplayList( ) 设置位置和大小

In the measure( ) validation method we retrieved the size, and in the
updateDisplayList( ) method we will set the size and position the children. When
positioning and sizing children, if a child does not inherit from UIComponent you will
want to use the x and y properties for positioning and the width and height properties
for sizing. If a child does inherit from UIComponent, you should use the
setActualSize(width,height) method for sizing and the move(x,y) method for
positioning.