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