Flex学习笔记4——自定义组件

原因

         更改已有组件的可视化外观

         继承UIComponent创建新组件

         组合两个或多个组件

步骤

1.       如果有必要，为组件创建所需的皮肤

2.       扩展基类，如UIComponent或其他组件类

3.       嵌入所有的图片和皮肤文件 [Embed]

4.       实现构造函数

                   只是设置属性的初始值或初始化某些数据结构，如数组。不要创建组件的内部对象。

5.       实现createChildren()方法

                   创建组件的内部对象，当将容器组件add时会自动调用。

                   对于重载函数，在写自己的代码前，调用 super.createChildren()

6.       实现commitProperties（）方法

                   计算屏幕显示的关联属性，通过invalidateProperties（）调用，用于协调多个属性的修改；协调对同一属性的多次修改

7.       实现measure()

                   作用：设置组件的默认大小

                   用于在运行时执行计算以确定组件的大小

                   通过invalidateSize()的调用，从而调用measure

                   当显式设置宽和高时，不会调用measure方法

8.       实现 layoutChrome()

                   作用：定义容器的边框区域

9.       实现 updateDisplayList()

                   通过createChildren创建内部对象，使用updateDisplayList确定内部对象的位置和尺寸.

                   作用：

                            使用setActualSize()确定尺寸，而不是width和height；使用move()而不是x,y确定组件位置。

                            画出需要的可视化元素，如皮肤或边框

10.   在组件中画图：

                   使用graphics属性添加矢量绘画

11.   注意：

                   不要在layoutChrome()和updateDisplayList中调用addChild，会形成循环

组件的失效机制

         使用一系列方法如 invalidateProperties()  invalidateSize() invalidatDisplayLIst() 标记组件中的某些东西已变化，然后将其延迟到下一次屏幕更新时通过布局管理器统一调用组件的commitProperties()  measure()   layoutChrome() 和updateDisplayList() 方法

生命周期和布局

         为了能够正确重写组件的public或protected方法，在事件监听器中写出合适的代码

创建组件并添加到容器

         作用：可视化组件一定要加入容器中才能显示。

         步骤：

• •   构造函数
  •   设置属性
  •   调用parent.addChild 将其添加到父组件
    •  设置子组件的通用属性,如document, fontContext  nestLevel等，调用stylesInitialized()方法
    •   调用容器组件自身的invalidateSize()标识容器组件的大小失效
    •  调用容器组件自身的invalidateDisplayList()标记容器组件的显示列表失效
    •   容器派发 CHILD_ADD事件
    •   子组件派发FlexEvent.ADD事件
    •   调用子组件的initialize()初始化组件的内部结构：1）派发FlexEvent.PREINITIALIZE事件；2）调用组件的createChildren()创建内部对象；3）调用childrenCreated()方法完成内部对象创建后的处理，其中会调用invalidateProperties()， invalidateSize，invalidateDisplayList  initializeAccessiblity(协助残障人士交互)   initializationComplete(完成组件内部结构初始化，应该就是creationComplete吧)
  •   对于invalidate标记内容，在下一帧处理

组件布局

         由全局唯一的实例 LayoutManager进行处理，分为三个阶段：

         提交阶段：提交已经变化的属性，并重新计算相关属性。在本阶段 LayoutManager从外到内调用每个组件的validateProperties()，在该函数中调用commitProperties() 完成相关属性的计算， commitProperties可以被重载。

         度量阶段：计算组件的默认尺寸。LayoutManager从内到外调用各组件的validateSize()方法，该函数中调用measure() 完成最小默认宽度、高度、默认宽度和高度的计算，mesure可以被子类重载。

         布局阶段：完成显示列表和自己的布局。LayoutMananger从外道内调用各组件的validateDisplayList()方法，该函数中调用updateDisplayList() 完成显示列表的更新处理，即确定内部对象的位置、尺寸以及画出组件使用的所有皮肤和图形化元素。

         相关的属性： width(实际宽度)、measuredWidth(默认宽度)、explicitWidth(以像素指定的宽度，主要区别于percentWidth)  percentWidth  scaleX