重写FLEX组件

 

一、为什么要重写组件

1 、在 FLEX 已有组件无法满足业务需求，或是需要更改其可视化外观等特性时，直接进行继承扩展。举例，继承 BUTTON 组件的长文本却不自动换行的自定义控件。

2 、为了模块化设计或进一步重用，需要对 FLEX 组件进行组合。比如一个包括 TEXTAREA,BUTTON 的复合控件。

二、重写组件需要经常换位思考的三个角色

1 、作为重写组件的使用者，有哪些需求。比如需要在 MXML 标签和 AS 代码中暴露哪些属性及对应默认值、事件和事件的处理逻辑。

2 、重写组件一般需要使用 FLEX 原有组件，要站在原有开发者的角度了解设计规则。

3 、作为重写组件的设计者，在满足需求的情况下尽量做到可复用、低耦合易扩展等设计原则，让新组件像 FLEX 原组件一样好用。

三、重写组件 AS 方式和 MXML 方式的采用规则

1 、 MXML 文件和 AS 文件最后都会被编译成 AS 类，只不过 MXML 编译速度稍慢一些

2 、如果 MXML 和 AS 都能完成的一个简单组件， MXML 更容易被创建和控制布局

3 、当要覆盖组件的某些方法时只能用 AS 方式

4 、创建一个直接继承 UIComponent 的子类时只能用 AS

5 、创建非可视化组件比如 Formatter 、 validator 、 Effect ……时，只能用 AS

6 、要为组件添加日志功能时，只能用 AS.

四、 AS 方式重写组件常规步骤

１、如果有必要，为组件创建所有基于标记（ tag-based ）的皮肤（ skins ）

２、创建 ActionScript 类文件

⑴ 从一个基类扩展，比如 UIComponent 或者其他的组件类

⑵指定使用者能够通过 MXML 标记进行设置的属性

⑶嵌入（ Embed ）所有的图片和皮肤文件，文件大小尽可能小

⑷实现构造器，可以设置属性和样式的缺省值，或者初始化数据结构，比如数组

⑸根据需要，确定是否覆盖以下五个方法：

(a)UIComponent.createChildren() 方法，创建组件的子组件

(b)UIComponent.commitProperties() 方法，提交组件所有的属性变化，设置 measure() 方法可能使用的属性值。绝大多数情况下，都是对影响组件如何在屏幕上显示的属性使用这个方法

(c)UIComponent.measure() 方法，设置组件的缺省 size （ measuredWidth 、 measuredHeight ）和缺省的最小 size （ measuredMinWidth 、 measuredMinHeight ）

(d)UIComponent.layoutChrome() 方法，用于定义容器的边框区域和确定边框区域的位置，以及确定要在边框区域中显示的附加元素。例如， Panel 容器使用 layoutChrome() 方法定义 panel 容器的 title 区域，这个区域用来包含 title 文本和 close 按钮。

通常，使用 RectangularBorder 类来定义容器区域的边框，而不是用图片资源去包围组件。比如创建一个 RectangularBorder 对象，然后在重载的 createChildren() 方法中 , 将其作为一个内容子控件添加到组件中，再用 updateDisplayList() 方法来确定其位置。

将容器的内容区域和容器边框区域分开处理的主要原因是为了应对 Container.autoLayout

属性被设置为 false 的这种情况。当 autoLayout （自动布局）属性使用默认值 true 时，只要容器子控件的大小和位置发生变化，容器及子控件就会进行度量和布局。而当其为 false 时，度量和布局只在子控件被添加或移出容器时才执行。分开处理让 Flex 在这两种情况下都执行 layoutChrome() ，从而在 autoLayout 属性为 false 的情况下，容器仍能够更新它的边框区域。

(e)UIComponent.updateDisplayList() 方法，根据以前所设置的属性和样式来确定组件的子组件在屏幕上的大小（ size ）及位置（ position ），并且画出组件所使用的所有皮肤（ skins ）及图形化元素。组件的父容器负责确定组件本身大小（ size ）。

要在 updateDisplayList() 方法中确定一个组件的大小，当子组件是 UICOMPONENT 时使用 setActualSize() 方法，而不是 UICOMPONENT 则使用与组件大小相关的属性 width 和 height 。要确定组件的位置，当子组件是 UICOMPONENT 时使用 move() 方法，而不是 UICOMPONENT 则使用 x 和 y 属性。一个区别就是 move() 方法不仅改变了组件位置，而且在调用这个方法之后立即分发了一个 move 事件，设置 x 和 y 属性也更改组件的位置，但却在下一个屏幕更新事件中才会分发 move 事件。

组件支持很多类型的可视元素，比如皮肤，样式和边框。在 updateDisplayList() 方法中，可以添加这些可视元素，并对它们进行一些控制。由于 UICOMPONENT 继承自 SPRITE ，所以可以使用 Graphics 对象中的 Flash 绘画 APIs 进行绘制图形，比如使用 Graphics 类去画边框水平线以及其他图形元素：

graphics.lineStyle(1, 0x000000, 1.0);

graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

updateDisplayList() 方法形式如下：

protected function updateDisplayList(unscaledWidth:Number ， unscaledHeight:Number):void

以像素为单位的组件坐标系中， unscaledWidth 和 unscaledHeight 是由父容器确定的组件大小，而不管组件的 scaleX,scaleY 是多少。缩放发生在 Flash Player 或者 AIR 中，发生时机是在 updateDisplayList() 执行之后。比如一个组件的 unscaledHeight 属性是 100 ，而其 scaleY 属性是 2.0, 那么它在 Flash Player 或 AIR 中出现的高度为 200 像素。

需要注意的是，定义新组件时不一定要重载所有的五个方法，只需重载实现组件功能所必需的即可。比如实现一个自定义的 Button 控件，该控件使用新的机制来定义缺省大小（ size ）。在这种情况下，只需要重载 measure() 方法。或者，要实现 VBox 容器的一个新子类。新子类利用 VBox 类已有的所有有关设定大小（ sizing ）的逻辑，但是变更了 VBox 类的布局逻辑以实现从底部到顶部的方式来布局容器中的子控件，而不是自顶向下的布局。在这种情况下，只需要重载 updateDisplayList() 方法。

(6) 增加属性（ properties ），方法（ methods ），样式（ styles ），事件（ events ）以及元数据

３、以 ActionScript 文件或者 SWC 文件的形式部署组件

五、深入组件生命周期

１、生命周期（ LifeCycle ）简述

⑴调用组件构造函数。构造函数没有返回类型，没有参数，使用 super() 调用父类的构造器

⑵使用 set,get 设置组件属性，常在 set 方法内监控一个布尔变量来实现失效机制

⑶调用 addChild() 方法将组件添加到父组件显示列表中， FLEX 将自动调用 createChildren() ， invalidateProperties() ， invalidateSize() ， invalidateDisplayList() 。只有将组件添加到父容器中， FLEX 才能确定它的大小 (size) ，设置它所继承样式 (style) 属性，或者在屏幕上画出它

⑷组件的 parent 属性设置为对父容器的引用

⑸样式 (style) 设置

⑹ 组件分发 preinitialize 事件

⑺ 调用组件 createChildren() 方法

⑻ 调用 invalidateProperties() ， invalidateSize() ， invalidateDisplayList() 失效方法， FLEX 将在下一个“渲染事件” (render event) 期间对相应的 commitProperties() ， measure() ， updateDisplayList() 方法进行调用。这个规则唯一例外就是当用户设置组件的 height 和 width 属性时 , Flex 不会调用 measure() 方法。也就是说，只有当组件的 explicitWidth 和 explicitHeight 属性是 NaN 时 Flex 才会调用 measure() 方法。

⑼ 组件分发 initialize 事件。此时组件所有的子组件初始化完成，但组件尚未更改 size 和布局，可以利用这个事件在组件布局之前执行一些附加的处理

⑽ 在父容器上分发 childAdd 事件

⑾ 在父容器上分发 initialize 事件

⑿ 在下一个“渲染事件” (render event) 中 , Flex 执行以下动作：

a. 调用组件的 commitProperties() 方法

b. 调用组件的 measure() 方法

c. 调用组件的 layoutChrome() 方法

d. 调用组件的 updateDisplayList() 方法

e. 在组件上分发 updateComplete 事件

⒀ 如果 commitProperties() ， measure() ， updateDisplayList() 方法调用了 invalidateProperties() ， invalidateSize() ， invalidateDisplayList() 方法，则 Flexh 会分发另外一个 render 事件

⒁ 在最后的 render 事件发生后 , Flex 执行以下动作：

a. 设置组件 visible 属性使其可视

b. 组件分发 creationComplete 事件，组件的大小 (size) 和布局被确定，这个事件只在组件创建时分发一次

c. 组件分发 updateComplete 事件。无论什么时候，只要组件的布局 (layout) ，位置，大小或其它可视的属性发生变化就会分发这事件，然后更新组件来正确地显示。

２、为什么使用失效机制（ invalidation mechanism)

一种情况是，当设置了组件的多个属性后，比如 Button 控件的 label 和 icon 属性，我们需要所有属性被设置后一次性执行 commitProperties(), measure(), updateDisplayList() 方法，而不是设置过 label 属性后执行一遍这些方法，然后在设置 icon 属性后又执行一次这些方法。

另一种情况是几个组件同时更改了它们的字体大小。程序更改字体大小的执行速度大大快于 Flex 更新应用的速度，因此要在确定最终更改字体之后才开始更新布局。另外， Flex 需要协调布局操作以消除任何冗余过程，而不是在每个组件更新它的字体大小之后都执行一次布局操作。

Flex 使用“失效机制（ invalidation mechanism ）”来同步组件的更改。 Flex 用一系列方法的调用，比如在 setter 方法内监控一个变更变量来标记组件的某些东西已经发生变化， 然后在下一个“渲染事件（ renderevent ）”中触发组件的 commitProperties(), measure(), layoutChrome() ， updateDisplayList() 检查这些布尔变量来完成最终的变更逻辑。这样做的额外好处就是 setter 方法可以更迅速地返回，把对新属性值的处理留给了 commitProperties() 方法。

失效方法及其对应的触发函数如下：

invalidateProperties() 通知组件，以使下次屏幕更新时，它的 commitProperties() 方法被调用。

invalidateSize() 通知组件，以使下次屏幕更新时，它的 measure() 方法被调用。

invalidateDisplayList() 通知组件，以使下次屏幕更新时它的 layoutChrome() 方法和

updateDisplayList() 方法能被调用。

当组件调用一个“失效”方法时，它就通知 Flex 该组件已经被更新。当多个组件调用失效

方法， Flex 会在 schedules 中协调这些更新，以使这些更新操作在下一次屏幕更新时一起执行。注意， createChildren() 没有对应的失效方法，它会在调用后被立即执行。