Flex源码学习心得【原创】
- 组件化开发
- as游戏开发
- UI生命周期
- 绘图对象相互添加原则
1.Flex组件化开发
编写flex组件需要有一定的组件接口设计,并严格遵循UI的延时刷新视图机制.
最初第一次设计实现组件的时候,没有考虑过构造函数里传参的问题,觉得有没有都没什么关系,但是后来看了flex源码的组件,没有一个带参数的,而且源码的组件和界面皮肤都是分离的.
接口设计一定要考虑到绘图创建、绘图刷新、绘图摧毁,尽可能把变动的信息作为参数传递进来或者是写入配置文件.
2.as游戏开发
第一次用as3.0开发一个简单的立方体用的是Away3D,Away3D的核心渲染机制是利用显卡渲染,开发项目过程中需要将渲染机制改为DirectX渲染,做立方体也是利用帧频事件EnterFrame不停的刷新视图.
3.UI生命周期
updateDisplayList方法：
你当然不会直接调用此方法，当component 被某个容器调用addChild()方法添加，同时component 的invalidateDisplayList()方法被调用，然后Flex 会调用updateDisplayList() 方法。
如果此component 没有children，此时updateDisplayList()方法会在你在此component 的Graphics object （图形对象）使用如graphics.drawRect（）做纲领性的绘画时调用。
如果此component 有children，此方法会在你将调用move()和setActualSize()作用于他的子集上时调用。
这是一个advanced method ，当你创建UIComponent的子类时可能需要重写。
createChildren () 方法：
Flex调用作为回调函数的createChildren () 方法用来调用addChild()方法添加一个组件到他的父级容器。这是一个 advanced method ，当你创建UIComponent的子类时可能需要重写。
------------------------------------官方文档-----------------------------------
The component instantiation life cycle describes the sequence of steps that occur when you create a component object from a component class. As part of that life cycle, Flex automatically calls component methods, dispatches events, and makes the component visible.
The following example creates a Button control in ActionScript and adds it to a container:
// Create a Box container.var boxContainer:Box = new Box();// Configure the Box container. // Create a Button control. var b:Button = new Button()// Configure the button control.b.label = "Submit";...// Add the Button control to the Box container.boxContainer.addChild(b);The following steps show what occurs when you execute the code to create the Button control, and add the control to the Box container:
You call the component's constructor, as the following code shows:
// Create a Button control. var b:Button = new Button()You configure the component by setting its properties, as the following code shows:
// Configure the button control.b.label = "Submit";Component setter methods might call the invalidateProperties(), invalidateSize(), or invalidateDisplayList() methods.
You call the addChild() method to add the component to its parent, as the following code shows:
// Add the Button control to the Box container.boxContainer.addChild(b);Flex performs the following actions:
Sets the parent property for the component to reference its parent container.
Computes the style settings for the component.
Dispatches the preinitialize event on the component.
Calls the component's createChildren() method.
Calls the invalidateProperties(), invalidateSize(), and invalidateDisplayList() methods to trigger later calls to the commitProperties(), measure(), or updateDisplayList() methods during the next render event.
The only exception to this rule is that Flex does not call the measure() method when the user sets the height and width of the component.
Dispatches the initialize event on the component. At this time, all of the component's children are initialized, but the component was not sized or processed for layout. You can use this event to perform additional processing of the component before it is laid out.
Dispatches the childAdd event on the parent container.
Dispatches the initialize event on the parent container.
During the next render event, Flex performs the following actions:
Calls the component's commitProperties() method.
Calls the component's measure() method.
Calls the component's layoutChrome() method.
Calls the component's updateDisplayList() method.
Dispatches the updateComplete event on the component.
Flex dispatches additional render events if the commitProperties(), measure(), or updateDisplayList() methods call the invalidateProperties(), invalidateSize(), or invalidateDisplayList() methods.
After the last render event occurs, Flex performs the following actions:
Makes the component visible by setting the visible property to true.
Dispatches the creationComplete event on the component. The component is sized and processed for layout. This event is only dispatched once when the component is created.
Dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the layout, position, size, or other visual characteristic of the component changes and the component is updated for display.
Most of the work for configuring a component occurs when you add the component to a container by using the addChild() method. That is because until you add the component to a container, Flex cannot determine its size, set inheriting style properties, or draw it on the screen.
You can also define your application in MXML, as the following example shows:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Box> <mx:Button label="Submit"/> </mx:Box></mx:Application>The sequence of steps that Flex executes when creating a component in MXML are equivalent to the steps described for ActionScript.
You can remove a component from a container by using the removeChild() method. If there are no references to the component, it is eventually deleted from memory by the garbage collection mechanism of Macromedia Flash Player 9 from Adobe.
-------------------------------------------翻译-----------------------------------------
组件实例化的生命周期描述了当你创建一个组件对象时的一连串的步骤，作为生命周期的一部分，Flex自动调用组件的方法，分发事件，使组件可见。
接下来的例子在AS中控制创建一个按钮并把它添加到容器的过程。
//创建一个Box容器
var boxContainer:Box=new Box();
//配置Box容器，创建一个Button
var b:Button=new Button();
//配置按钮
b.label="submit"; ...
//将按钮添加到Box容器中
boxContainer.addChild(b);
//接下来的步骤展示了当你执行代码创建按钮，并且添加按钮到Box容器时的过程。
你调用组件的构造方法，如下面的代码所示：
//创建一个按钮
var b:Button=new Button();
//通过设置组件属性配置组件，如下：
//配置按钮
b.label="submit";
//组件的setter方法可能会调用invalidateProperties(), invalidateSize(), 或者 invalidateDisplayList() 方法。
调用addChild()方法添加组件到父级容器，如下：
//添加按钮到Box容器
boxContainer.addChild(b);
//Flex执行下面的步骤：
为组建设置parent属性关联一个父级容器
为组件计算style设置
派发组件的preinitialize 事件
调用组件的createChildren() 方法
为触发调用invalidateProperties(), invalidateSize(), 和invalidateDisplayList() 来触发后续在下个渲染事件期间去调用commitProperties(), measure(), or updateDisplayList() 。
此规则仅有的例外是当用户设置组件的height and width 时Flex不会调用measure()方法。
派发组件的initialize 事件，同时，此组件的所有子集也被initialized，但是组件尚未为布局而被设定大小或进行其他处理，你可以在布局之前使用此事件执行组件的附加。
派发父级容器的addChild事件，派发父级容器的initialize 事件
在下个渲染事件期间，Flex执行如下的动作：
调用组件的commitProperties()方法，调用组件的measure()方法，调用组件的layoutChrome()方法，调用组件的updateDisplayList()方法。
派发组件的updateComplete 事件。
Flex 派发额外提供的事件如果commitProperties(), measure(), or updateDisplayList() 方法调用了invalidateProperties(), invalidateSize(), or invalidateDisplayList() 方法.
在最后的渲染事件发生时，Flex执行如下动作：
设置组件的visible 属性使其可见。派发组件的creationComplete 时间；为布局对组件进行设置大小和其他处理；当组件创建时，此事件仅被派发一次。
派发组件的updateComplete 事件，每当组件的layout, position, size或者其他可视特性改变并且组件被更新显示时Flex会派发额外的updateComplete 事件。
大多数的配置组件工作发生在当你通过使用addChild()方法向容器添加组件时，应为在你向容器添加组件之前，Flex不能 决定他的size、设定继承的style，properties，或者在屏幕上画出它。
You can also define your application in MXML, as the following example shows:
你也可以在MXML中定义你的application ，如下：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Box>
<mx:Button label="Submit"/>
</mx:Box>
</mx:Application>
Flex在MXML 中执行创建一个组件的步骤等同于在ActionScript中的描述。
你可以通过removeChild()方法从容器中删除一个组件，如果没有引用组件，它最终被从内存中删除通过来自Adobe的Flash Player 9的垃圾收集机制。
4.绘图对象相互添加原则
-Navigator children must be Containers (INavigatorContent in 4.x)
-Container children must be IUIComponents
-UIComponent children can be anything
-UIComponent parents must be UIComponents
