flex的组件的初始化顺序原理及实例

组件的初始化顺序：（前言：先执行script中的成员变量，再开始初始化组件）

preinitialize
在所有的初始化之前触发,没有子组件的定义,但是可以引用组件的变量.

initialize
当所有子组件生成完成后触发,在这个时间点还没有组件被渲染出来.但还未对这些子组件进行布局.

creationComplete
组件定义完成并已经在显示列表.

applicationComplete
所有的组件初始化完成并显示；只适用于Application组件。

先考虑四个关键字，在考虑组件的内外层关系。
preinitialize按组件从外向内执行。
initialize、creationComplete按组件从内向外执行。
某组件的preinitialize事件发生后其id才能被其他的组件使用(即id的构造从外向里)。
某组件的initialize事件发生后才给此组件的其他属性赋值。



看下面的例子：输出结果为：
===null===
呵呵呵1
a1
a2
+++null+++
a3
***ss.ApplicationSkin2._ApplicationSkin_Group1.contentGroup.Panel5.labelID***
b3
===ss.ApplicationSkin2._ApplicationSkin_Group1.contentGroup.Panel5.labelID===
呵呵呵2
b2
b1
c3
c2
c1
d1

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/halo"
			   minWidth="1024" minHeight="768"
			   preinitialize="a1();" initialize="b1();" creationComplete="c1();" applicationComplete="d1();">
	
	<fx:Script>
		<![CDATA[
			
			private var i:int = 0;
				private function a1():void{
				    trace("a1");
				}
				private function a2():void{
					trace("a2");
					trace("+++" + labelID + "+++");
				}
				private function a3():void{
					trace("a3");
					trace("***" + labelID + "***");
				}
				private function b3():void{
					trace("b3");	
				}
				private function b2():void{
					trace("b2");
				}
				private function b1():void{
					trace("b1");
				}
				private function c3():void{
					trace("c3");	
				}
				private function c2():void{
					trace("c2");
				}
				private function c1():void{
					trace("c1");
				}
			    private function d1():void{
				    trace("d1");
				}
			    public function text3():String{
					trace("==="+labelID+"===");
					i++;
					trace("呵呵呵" + i);
				    return "哈哈" + i;
				}
			
		]]>
	</fx:Script>
	
	<mx:Panel  preinitialize="a2();" initialize="b2();" creationComplete="c2();" >
			<mx:Label id="labelID" text="{text3()}" preinitialize="a3();" initialize="b3();" creationComplete="c3();"/>
	</mx:Panel>
	
</s:Application>