Flex组件生命周期

 

(图片来源于jexchan)

Flex的根对象就是SystemManager，而不是我们平常看到的Application。

SystemManager是第一个在Flex应用中被创建的Display Class，继承自flash.dispaly.MovieClip，所以才能实现Preloader和Application的2个frame。

SystemManager有一个topLevelSystemManager对象，指向一个SystemManager实例，是所有当前在flash player运行的任何东西的根（root），如果flex被作为主应用加载到flash player则上述属性将指向其本身（self-refrencing），但当flex应用是被另一flex应用载入的，其自身的SystmenManager的topLevelSystemManager属性则不是自引用了，而是指向其父应用的SystemManager实例。所有UIComponent的子类都有一个systemManager属性指向应用的SystemManager实例，在被SystemManger实例监听的component的事件发生冒泡时，其将拥有事件处理链上最后的处理权。

Preloader
Preloader是一个轻量级的类，在systemManager的第一帧被实例化，preloader会dispatch出一系列的事件，由progress bar监听实现loading界面，一旦应用进入第二帧待application初始化后会借由system manager通知preloader初始化进度，preloader通知system manager其准备待删除，主要是一些初始化设定和下载runtime share library。
Preloader的事件： 
progress
Indicates download progress
complete
Indicates that the download is complete
rslError
Indicates that a runtime shared library could not load
rslProgress
Indicates the download progress for a runtime shared library
rslComplete
Indicates that the download is complete for runtime shared libraries
initProgress
Indicates that the application is initializing
initComplete
Indicates that the application has initialized
在理解Preloader的同时也要反方向思考纯AS工程中如何做Preloader，以前就写过AS3工程 Custom Preloader 動態加載 Application可以进行思考。

Application
Application是我们平日用到的最多的类，在systemManager的第二帧被实例化，它是一个单例化的类，因此无论你new多少个Class它都会指向同一个instance实体，根据创建时间的进度，它同样会dispatch出一系列的事件。
Application的事件：
preinitialize
application已经实例化但尚未创建任何child component
initialize
已经创建child component但未对其进行布局（lay out）
creationComplete
application已经完成实例化并完成所有child component的布局
applictionComplete
已经准备完成Flex SWF必要的初始化

上述就是整个Adobe Flex Application LifeCycle的内容整理。

 

 

(图片来源于jexchan)

重写Flex组件AS方式和MXML方式的采用推荐规则

MXML文件和AS文件最后都会被编译成AS类，只不过MXML编译速度稍慢一些 如果MXML和AS都能完成的一个简单Flex组件，MXML更容易被创建和控制布局 当要覆盖Flex组件的某些方法时只能用AS方式 创建非可视化Flex组件比如Formatter、validator、Effect……时，只能用AS 要为Flex组件添加日志功能时，只能用AS.

参考代码推荐：mx.controls.Button，在SDK里面，现在都是openSouce的，所以可以参考Adobe是怎么写的。

createChildren()
可在自身内部创建其它组件或对象的组件。
无需直接调用此方法，addChild() 方法时，Flex 将调用 createChildren () 方法。也这是因为这种特性，如果UIComponent没有被加载到舞台上，它里面的children是不会被实例化的，也正是新手常常碰到错误的情况之一。

commitProperties()
提交Flex组件所有的属性变化，设置measure()方法可能使用的属性值。绝大多数情况下，都是对影响Flex组件如何在屏幕上显示的属性使用这个方法。
无需直接调用此方法，addChild() 或 invalidateProperties () 方法时，Flex 将调用 commitProperties () 方法。
应在调用 measure() 方法之前调用 commitProperties() 方法。这允许您设置 measure() 方法可能会用到的属性值。

measure()
计算组件的默认大小和（可选）默认最小大小。
measuredWidth measuredHeight measuredMinWidth measuredMinHeight
无需直接调用此方法，addChild() 或 invalidateSize() 方法时，Flex 将调用 measure() 方法。

Container. layoutChrome()
layoutChrome是Container特有的生命周期，主要是跟容器边框有关系。
通过设置此容器边框的位置和大小响应大小更改。用于定义容器的边框区域和确定边框区域的位置，以及确定要在边框区域中显示的附加元素。
通常，使用RectangularBorder类来定义容器区域的边框，而不是用图片资源去包围Flex组件。比如创建一个RectangularBorder对象，然后在重载的createChildren()方法中,将其作为一个内容子控件添加到Flex组件中，再用updateDisplayList()方法来确定其位置。
将容器的内容区域和容器边框区域分开处理的主要原因是为了应对Container.autoLayout属性被设置为false的这种情况。当autoLayout（自动布局）属性使用默认值true时，只要容器子控件的大小和位置发生变化，容器及子控件就会进行度量和布局。而当其为false时，度量和布局只在子控件被添加或移出容器时才执行。分开处理让Flex在这两种情况下都执行layoutChrome()，从而在autoLayout属性为false的情况下，容器仍能够更新它的边框区域。

updateDisplayList()
绘制对象和/或设置其子项的大小和位置。
无需直接调用此方法，addChild() 或 invalidateDisplayList () 方法时，Flex 将调用 updateDisplayList () 方法。
根据以前所设置的属性和样式来确定Flex组件的子Flex组件在屏幕上的大小（size）及位置（position），并且画出Flex组件所使用的所有皮肤（skins）及图形化元素。Flex组件的父容器负责确定Flex组件本身大小（size）。
要在updateDisplayList()方法中确定一个Flex组件的大小，当子Flex组件是UICOMPONENT时使用setActualSize()方法，而不是UICOMPONENT则使用与Flex组件大小相关的属性width和height。要确定Flex组件的位置，当子Flex组件是UICOMPONENT时使用move() 方法，而不是UICOMPONENT则使用x和y属性。一个区别就是move() 方法不仅改变了Flex组件位置，而且在调用这个方法之后立即分发了一个move事件，设置x和y属性也更改Flex组件的位置，但却在下一个屏幕更新事件中才会分发move事件。

在上述任一操作中，您都应使用组件的 unscaledWidth 和 unscaledHeight 作为其边界，而不是 width 和 height 属性，这很重要。
以像素为单位的Flex组件坐标系中，unscaledWidth和unscaledHeight是由父容器确定的Flex组件大小，而不管Flex组件的scaleX,scaleY是多少。缩放发生在FlashPlayer或者AIR中，发生时机是在updateDisplayList()执行之后。比如一个Flex组件的unscaledHeight属性是100，而其scaleY属性是2.0,那么它在FlashPlayer或AIR中出现的高度为200像素。

深入Flex生命周期

调用Flex组件构造函数。构造函数没有返回类型，没有参数，使用super()调用父类的构造器。 使用set,get设置Flex组件属性，常在set方法内监控一个布尔变量来实现失效机制。 调用addChild()方法将Flex组件添加到父Flex组件显示列表中，Flex将自动调用createChildren()，invalidateProperties()，invalidateSize()，invalidateDisplayList()。只有将Flex组件添加到父容器中，Flex才能确定它的大小(size)，设置它所继承样式(style)属性，或者在屏幕上画出它。 Flex组件的parent属性设置为对父容器的引用。 样式(style)设置。 Flex组件分发preinitialize事件。 调用Flex组件createChildren()方法。 调用invalidateProperties()，invalidateSize()，invalidateDisplayList()失效方法，Flex将在下一个“渲染事件”(renderevent)期间对相应的commitProperties()，measure()，updateDisplayList()方法进行调用。
这个规则唯一例外就是当用户设置Flex组件的height和width属性时,Flex不会调用measure()方法。也就是说，只有当Flex组件的explicitWidth和explicitHeight属性是NaN时Flex才会调用measure()方法。 Flex组件分发initialize事件。此时Flex组件所有的子Flex组件初始化完成，但Flex组件尚未更改size和布局，可以利用这个事件在Flex组件布局之前执行一些附加的处理。 在父容器上分发childAdd事件。 在父容器上分发initialize事件。 在下一个“渲染事件”(renderevent)中,Flex执行以下动作：
调用Flex组件的commitProperties()方法
调用Flex组件的measure()方法
调用Flex组件的layoutChrome()方法
调用Flex组件的updateDisplayList()方法
在Flex组件上分发updateComplete事件 如果commitProperties()，measure()，updateDisplayList()方法调用了invalidateProperties()，invalidateSize()，invalidateDisplayList()方法，则Flex会分发另外一个render事件 在最后的render事件发生后,Flex执行以下动作：
设置Flex组件visible属性使其可视
Flex组件分发creationComplete事件，Flex组件的大小(size)和布局被确定，这个事件只在Flex组件创建时分发一次
Flex组件分发updateComplete事件。无论什么时候，只要Flex组件的布局(layout)，位置，大小或其它可视的属性发生变化就会分发这事件，然后更新Flex组件来正确地显示。

失效机制（invalidation mechanism)
原理请看Essential.ActionScript.3.0(ActionScript.3.0 编程精髓)第二十三章的Event.RENDER部分。
一种情况是，当设置了Flex组件的多个属性后，
比如
Button控件的label和icon属性，我们需要所有属性被设置后一次性执行commitProperties(),measure(),updateDisplayList()方法，而不是设置过label属性后执行一遍这些方法，然后在设置icon属性后又执行一次这些方法。
另一种情况是几个Flex组件同时更改了它们的字体大小。程序更改字体大小的执行速度大大快于Flex更新应用的速度，因此要在确定最终更改字体之后才开始更新布局。
另外，Flex需要协调布局操作以消除任何冗余过程，而不是在每个Flex组件更新它的字体大小之后都执行一次布局操作。
Flex使用“失效机制（invalidation mechanism）”来同步Flex组件的更改。Flex用一系列方法的调用，比如在setter方法内监控一个变更变量来标记Flex组件的某些东西已经发生变化，然后在下一个“渲染事件（renderevent）”中触发Flex组件的commitProperties(),measure(),layoutChrome()，updateDisplayList()检查这些布尔变量来完成最终的变更逻辑。这样做的额外好处就是setter方法可以更迅速地返回，把对新属性值的处理留给了commitProperties()方法。

失效方法及其对应的触发函数如下：
invalidateProperties()通知Flex组件，以使下次屏幕更新时，它的commitProperties()方法被调用。
invalidateSize()通知Flex组件，以使下次屏幕更新时，它的measure()方法被调用。
invalidateDisplayList()通知Flex组件，以使下次屏幕更新时它的layoutChrome()方法和updateDisplayList()方法能被调用。
当Flex组件调用一个“失效”方法时，它就通知Flex该Flex组件已经被更新。当多个Flex组件调用失效方法，Flex会在schedules中协调这些更新，以使这些更新操作在下一次屏幕更新时一起执行。注意，createChildren()没有对应的失效方法，它会在调用后被立即执行。

*名词解释
width : Number
指定组件在父坐标中的宽度的数字（以像素为单位）。
height : Number
指定组件在父坐标中的高度的数字（以像素为单位）。explicitWidth : Number
指定该组件在组件坐标中显式宽度（以像素为单位）的数字。
explicitHeight : Number
指定该组件在组件坐标中显式高度（以像素为单位）的数字。

measuredWidth : Number
组件的默认宽度（以像素为单位）。
measuredHeight : Number
组件的默认高度（以像素为单位）。percentWidth : Number
以组件父项大小百分比形式指定其宽度的数字。
percentHeight : Number
以组件父项大小百分比的方式指定组件高度的数字。

上述就是整个Adobe Flex UIComponent LifeCycle的内容整理。