认识自定义flex 3组件开发（和组件生命周期）

摘自：http://www.billdwhite.com/wordpress/?p=21

首先了解一下FLEX组件生命周期

The component lifcycle is a series of methods called by the Flex Framework that every component experiences. These methods include:

The component’s constructor

The commitProperties() method

The createChildren() method

The measure() method

The updateDisplayList() method

组件生命周期是每个组件都会经历的一系列被FLEX框架调用的方法，这些方法包括：

组件的构造、commitProperties() 方法、createChildren() 方法、measure() 方法、updateDisplayList() 方法  

Inside the component’s constructor you will setup the initial properties and do tasks which need to be done regardless if the component is ever shown on the screen. You will NOT do things like creating child components or positioning items because at this stage you do not have enough information to do this. The constructor is called whenever the component is created but the other lifecycle methods do not occur until a component is added to a container：

在组建的构造内你将要设置初始化属性并且执行无论之前是否在屏幕上显示或是出现的必须被执行的任务。你将不能执行诸如创建子组件或者定位一个项目的操作，因为在这一步，你没有足够的信息去完成这些。无论何时创建组件构造函数都将被调用，但其他生命周期方法不会发生，直到一个组件被添加到容器中：

var blah:Button = new Button(); // invokes the constructor
container.addChild(blah);       // adds the component to a container,
                                // triggering the other lifecycle methods

This method creates any visual children of the component. It only creates them but does NOT size or position them because at this point your component does not know how much screen space it has. You cannot tell your children how big they can be when you do not know how much space you have to work with. The same logic applies to positioning them.

createChildren()方法用来创建任何可见的子组件。它只会创建他们却不会规定它们的大小或是位置，因为这个时候你的组件并不知道他有多大的屏幕空间。当你不知道你将操作的屏幕空间的时候，你就不能定义你的子组件可能的大小,同样，这个逻辑也适用于他们的定位。

measure()

To determine how much screen space a component requires, it calls its measure() method.The measure method is responsible for setting four properties of the component:measuredMinWidth，measuredMinHeight，measuredWidth，measuredHeight，measuredHeight.

当决定一个组件将会占据多大的屏幕空间时，系统就将调用它的measure() 方法.measure()方法可以用来设置组件的四个属性：measuredMinWidth，measuredMinHeight，measuredWidth，measuredHeight，measuredHeight。

These values form the basis of a ’suggestion’ provided by the component to its parent about how big it would like to be.This is where the updateDisplayList() method comes in.

这些值形成了由组件提供给父组件的关于它将定义为多大的基础。

The measure method also involves the layout manager. The layout manager is responsible for, among other things, ensuring that the process of sizing your component is started. The layout manager always starts on the outer most component. To know how much space a component needs, you need to know how much space its children need.

measure方法还涉及到布局管理器。除此之外，布局管理还负责确保定义你的组件大小的过程已经开始。布局管理器总数先启动组件的最外层部分。要知道组件需要多少空间，你必须要知道它的子组件需要多少空间。

updateDisplayList()

When updateDisplayList() is called on a given component, it is passed an unscaledWidth parameter and an unscaledHeight parameter.

当updateDisplayList()被给定的组件调用时，它是通过unscaledWidth参数和一个unscaledHeight参数进行传递的

Basically, it is told ‘Regardless of what you requested, here is what you get’. While Flex containers never choose to size one of their children smaller than the minimum size, you can do whatever you want.You are free to ignore a component’s suggestion and make it any size you would like and when a Flex container realizes it cannot fit all of the components into the allotted space, it will add scrollbars.

基本上说就是“无论你需要什么，你都能从这儿得到”。当Flex容器定义的任一子组件不小于它的最小值，你就可以做任何你想做的。你可以自由地忽视一个组件所给你的建议使它成为你想要的大小，并且当一个Flex容器意识到它不能放进分配空间的组成部分，它会增加滚动条。

updateDisplayList() is also responsible for positioning its children.

updateDisplayList()方法也负责子组件的定位。

The method in which the Flex containers and components position their children is implicit in their type (ie. VBox-vertical, HBox-horizontal, DateField-Horizontal). For a custom component, the method in which it arranges its children can be based on an equation that is most suitable.

Flex 容器 和 组件定位它们的子组件的方法隐含在这种类型中(即ie. VBox-vertical, HBox-horizontal, DateField-Horizontal).对于一个自定义组件，它的排列子组件的方法基于一个方程式是最合适的。

 

commitProperties()

The commitProperties() method is responsible for coordinating property modifications.Why would you want to coordinate properties? Because there are times when you need to wait to act until more than one property upon which you are dependent is set/ready. There are also times when you do not want to do something complex every single time a change occurs.

commitProperties()方法负责协调属性修改。为什么想要协调属性？因为有时当你想操作你不得不等，直到你所依附的一个以上的属性被设置好或是准备好。也有些时候你不想要做一些复杂的、每次都发生变化的事情的时候。最终，commitProperties()方法允许你这些事情，知道屏幕需要重新绘制，因为commitProperties()（updateDisplayList()一样）是“预设”并且在Flex框架需要的时候被调用。

 

How do you tell the framework that they are needed? By calling the invalidate methods:invalidateDisplayList()、invalidateProperties()、invalidateSize(). These methods tell the framework to ensure the method is called at the next appropriate time. Notice that there is no invalidateChildren().This is because you only create children once and you do not recreate them for every property change.

你如何告诉框架你需要它们? 通过这些使组件失效的方法:invalidateDisplayList(),invalidateProperties(),invalidateSize()。这些方法告诉框架去确认它在下次合适的时候所需要调用的函数。注意，这里说的没有invalidateChildren()方法。这是因为你只是创建一次子组件并且在任何一个属性改变的时候你都没有重新创建它们。

 

So where does this leave us? Well, basically you have to remember these point:

我们只需要了解这些？是的，基本上你必须记住这些点：

Constructor() –set things up but do not create children or position things

createChildren() – create the children but do not position or size them

measure() – determines the required screen space; here you set measuredMinWidth, measuredMinHeight, measuredWidth, measuredHeight (these suggest how big the component should be)

invalidateSize() – tells Flex to re-measure things

updateDisplayList() – receives unscaledWidth and unscaledHeight, you can use or ignore this, and also position children

invalidateDisplayList() – tells Flex to call updateDisplayList()

commitProperties() – allows you to coordinate property modifications

invalidateProperties() – tells Flex to call invalidateProperties()

 

To show an example of how this all fits together, I’ll take a look at the Carousel example that was mentioned in the slide show.

The component’s lifecycle is as follows:

 

1. The user changes the selectedIndex/selectedChild property and we in turn set some internal values and ask for a commitProperties call.

Bindable("change")]
public function get selectedIndex():int
{
    return _selectedIndex;
}
 
public function set selectedIndex( value:int ):void
{
    if ( _selectedIndex == value )
    {
        return;
    }
    _selectedIndex = value;
    selectedIndexChanged = true;
    dispatchEvent( new Event( 'change' ) );
    this.invalidateProperties();
}

2. When commitProperties() is called we determine the difference between the newly selected item is and where it needs to be and we animate through the values from the currentPosition to the selectedIndex:

/** commitProperties starts the majority of the heavy lifting here. It is called by use when the selectedIndex or selectedChild
 *  changes. We create a new animation effect that moves us from the current selected index to the newly selectedIndex.
 *  Sometimes it is easier to move around the circle to the right, and sometimes to the left, to acheive this result. The
 *  commitProperties makes this determination and sets up the proper values and starts the effect playing.
 *  selectedChild changes
 **/
override protected function commitProperties():void
{
    super.commitProperties();
 
    if ( selectedIndexChanged )
    {
        selectedIndexChanged = false;
 
        if ( !animateProperty )
        {
            animateProperty = new AnimateProperty( this );
        }
 
        if ( !animateProperty.isPlaying )
        {
            //Current position can get bigger and bigger, let's ensure we stay real and realize that it is just a factor
            //of the number of children
            currentPosition %= numChildren;
 
            if ( currentPosition < 0 )
            {
                currentPosition = numChildren + currentPosition;
            }
        }
 
        //Determine if it is easier to move right or left around the circle to get to our new position
        var newPosition:Number;
        var moveVector:Number = selectedIndex-currentPosition;
        var moveScalar:Number = Math.abs( moveVector );
 
        if ( moveScalar > ( numChildren/2 ) )
        {
            if ( moveVector < 0 )
            {
                newPosition = numChildren + selectedIndex;
            }
            else
            {
                newPosition = ( selectedIndex - numChildren );
            }
        }
        else
        {
            newPosition = selectedIndex;
        }
 
        animateProperty.property = "currentPosition";
        animateProperty.fromValue = currentPosition;
        animateProperty.toValue = newPosition;
        //The duration of this effect is based on how far we must move. This way a one position move is not painfully slow
        animateProperty.duration = 700 * Math.abs( currentPosition-newPosition );
        animateProperty.easingFunction = Quadratic.easeInOut;
        animateProperty.suspendBackgroundProcessing = true;
        animateProperty.play();
    }
}

3. A the setting of the currentPosition property triggers an invalidateDisplayList() call:

/** When animating the change of position, current position contains the location (in radians) of the current position. This will likely be
 *  a numeric number between the integer selectedIndex values. So, when animating between selectedIndex 1 and 2, the currentPosition will
 *  move in tenths of a radian between those two values over a fixed amount of time. **/
[Bindable("currentPositionChanged")]
public function get currentPosition():Number
{
    return _currentPosition;
}
 
public function set currentPosition(value:Number):void
{
    _currentPosition = value;
 
    dispatchEvent( new Event( 'currentPositionChanged' ) );
 
    invalidateDisplayList();
 
    if ( currentPosition == selectedIndex )
    {
        dispatchEvent( new Event( 'animationComplete' ) );
    }
}

4. Finally, the updateDisplayList() method uses the currentPosition property to determine where each image should be moved and how it should be scaled:

/** updateDisplayList does the animation time heavy lifting. It determines the size of the circle that can be drawn.
 *  The padding between each child around the circle and then calls method to size, determine the position, scale and
 *  blur of each of the children. Those values are then applied. Note, updateDisplay list uses our orderedChildren
 *  array to ensure the original order of the children is preserved despite our manipulations of their order.
 **/
override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
    super.updateDisplayList( unscaledWidth, unscaledHeight );
 
    var centerOfCircle:Point = new Point( unscaledWidth/2, unscaledHeight/2 ); 
 
    //We resize the shadowContainer to the same size as our component.
    //This ensures that the x and y positions of the components moving around the carousel
    //track with the x and y of the shadows moving on this container
    shadowContainer.setActualSize( unscaledWidth, unscaledHeight );
 
    var maxChildWidth:Number = 0;
    var child:UIComponent;
    for ( var i:int=0; i<orderedchildren.length;>
    {
        child = orderedChildren[ i ] as UIComponent;
        child.setActualSize( child.getExplicitOrMeasuredWidth(), child.getExplicitOrMeasuredHeight() );
        maxChildWidth = Math.max( maxChildWidth, child.width );
    }
 
    radius = ( unscaledWidth /2 ) - ( maxChildWidth / 2 ) ;
 
    /** In a circle, we have a total of 2pi radians. So, in this case, we take the number of children present
     * and divide up those sizes that everything spaces evenly **/
    var childPaddingInRadians:Number;
    var childDistanceInRadians:Number;
    childPaddingInRadians = (2*Math.PI)/(numChildren);
 
    for ( var j:int=0; j<orderedchildren.length;>
    {
        child = orderedChildren[ j ] as UIComponent;
 
        childDistanceInRadians = (j*childPaddingInRadians) + radianOffset - ( currentPosition * childPaddingInRadians ) ;
        var newPoint:Point = getPointOnCircle( centerOfCircle, radius, childDistanceInRadians );
 
        //Set the appropriate scale of the children as the move backward in 3d space.
        var scale:Number =  getScale( centerOfCircle, radius, newPoint.y );
        child.scaleX = scale;
        child.scaleY = scale;
 
        //Reapply the blur to the child. The base amount is determined by a style
        var blur:Number = getBlur( centerOfCircle, radius, newPoint.y );
        ( blurEffectDictionary[ child ] as BlurFilter ).blurX = blur;
        ( blurEffectDictionary[ child ] as BlurFilter ).blurY = blur;
        ( blurEffectDictionary[ child ] as BlurFilter ).quality = 1;
        child.filters = [ blurEffectDictionary[ child ] ];
 
        childCenterMove( child, newPoint );
 
        //Position the hanging shadow below the child. The base distance is determined by a style
        //This only works as the shadowContainer is mapped to the same size as this component so the
        //x and y positions correspond 1 to 1
        var shadow:HangingShadow;
        shadow = ( shadowDictionary[ child ] as HangingShadow );
        shadow.setActualSize( child.width, getStyle("baseShadowHeight") );
        shadow.move( child.x, child.y + child.height + getShadowDistance( centerOfCircle, radius, newPoint.y ) );
        shadow.scaleY = scale;
    }
}
</orderedchildren.length;></orderedchildren.length;>

Thanks to folks over at DigitalPrimates for the code, slides and demo component

以上部分转自Bill White’s Blog

================================================================================================================================

下面看一下天地会的一个帖子：http://flash.9ria.com/thread-24175-1-1.html

Flex组件生命周期大概可以分为3步：
1. Initlization
Construction
Construction是组件构造阶段，组件的构造器不能有必须的参数。在构造函数中可以添加事件监听器，初始化属性。这个阶段只做很少的事情。
Configuration
Configuration是组件的配置阶段，组件的属性，事件回调函数，样式和效果定义都在这个阶段完成。你不应该把这些任务推迟到Attachment和Initlization阶段之后。
Attachment
Attachment阶段是把该组件追加到显示列表当中，一个Flex组件会被一个Flex容器IContianer以addChild方法添加到显示列表当中。
Initlization
在Initlization初始化阶段，组件会执行一次完整的invalidation/validation周期。这个阶段做的工作流程是：

• 发出preinitialize事件。
• 执行方法createChildren()
• 发出initialize事件。
• 行一次完整的invalidation/validation周期。
• 发出creationComplete事件。

2. Updating
用户可能会与组件产生交互，组件的位置大小可能改变，样式可能被重新赋值，也可能获得焦点或者被禁用等等。这些情况的发生都用影响到组件外观的变化。所以组件需要重绘自身来响应这些变化。
Invalidation
如果一个组件的属性改变，它可能就会标记组件为失效状态。
Validation
一个组件被标记失效后，会验证是否需要更新组件，如果需要会调用相关的方法来更新。组件有三个极其重要的方法来更新自己：

• commitProperties()
• measure()
• updateDisplayList(unscaledWidth,unscaledHeight)

除了这三个方法，还有一个重要的方法是styleChanged(styleName)，当某个样式改变时，styleChanged被调用，然后执行Invalidation标记组件。如果你有自定义一个组件，有一些法则必要得遵守：
不要在子类中显式调用commitProperties，measure和updateDisplayList这三个方法，你要做的是override，而不是call。如果你添加了新的样式，同样是要继承styleChanged方法，加入自己的逻辑。
3. Destruction
Detachment
当不需要这个组件时，把它从显示列表中移出。把组件从一个容器中移出再添加到另一个容器中比创建新的组件有更小的开销。

Garbage Collection
如果组件不再被引用时，它就成为符合垃圾回收的对象了，所以垃圾回收的第一条准则是不再有活动的引用。
更加值得注意的是第二条准则，即不包含使用了强引用的事件监听器，Dictionary和Timer。
所以尽量使用弱引用是多么重要，但是同样，小心你的弱引用在不该回收的时刻被回收了。例如对函数中的临时变量使用弱引用，你可能得不到你想要的异步结果。

================================================================================================================================