技术分享 如何重写Flex组件

开发 后端
本文向大家介绍一下如何重写Flex组件,在Flex已有Flex组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展。

本文和大家重点讨论一下如何重写Flex组件,为了模块化设计或进一步重用,需要对Flex组件进行组合。比如一个包括TEXTAREA,BUTTON的复合控件。

重写Flex组件

一、为什么要重写Flex组件

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

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

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

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

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

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

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

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

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

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

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

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

6、要为Flex组件添加日志功能时,只能用AS.#p#

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

1、如果有必要,为Flex组件创建所有基于标记(tag-based)的皮肤(skins)

2、创建ActionScript类文件

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

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

⑶嵌入(Embed)所有的图片和皮肤文件,文件大小尽可能小

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

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

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

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

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

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

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

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

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

(e)UIComponent.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事件。

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

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

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

updateDisplayList()方法形式如下:

protectedfunctionupdateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void

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

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

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

3、以ActionScript文件或者SWC文件的形式部署Flex组件 #p#

五、深入Flex组件生命周期

1、生命周期(LifeCycle)简述

⑴调用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执行以下动作:

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

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

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

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

e.在Flex组件上分发updateComplete事件

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

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

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

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

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

2、为什么使用失效机制(invalidationmechanism)

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

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

Flex使用“失效机制(invalidationmechanism)”来同步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()没有对应的失效方法,它会在调用后被立即执行。

 【编辑推荐】

  1. 学习笔记 如何重写Flex组件
  2. Flex2.0Beta1新功能出炉
  3. 揭露Flex2.0的几大误区
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 剖析Flex DataGrid分页控件的两种分页形式用法
责任编辑:佚名 来源: csdn.net
相关推荐

2010-07-27 10:39:25

Flex组件

2010-08-06 11:19:24

FlexPaperFlex

2010-07-28 12:52:39

Flex组件

2010-08-11 15:51:45

Flex DataGr

2010-08-12 11:21:30

重写Flex组件

2010-08-12 11:29:01

Flex组件

2010-08-11 14:47:54

Flex样式

2010-08-05 13:07:11

FlexJson

2010-08-02 16:33:11

Flex Spring

2010-08-05 11:07:18

重写Flex组件

2010-08-10 14:08:09

Flex嵌入字体

2010-07-30 10:37:23

Flex数据绑定

2010-07-28 10:01:42

Flex 初始化

2010-08-12 13:34:13

Flex验证组件

2010-08-09 15:41:13

Flex字体

2010-08-04 13:30:11

Flex项目

2010-08-11 10:01:45

FlexJavaFlamingo

2010-07-28 08:44:12

Flex2.0

2010-08-12 15:10:17

Flex4

2010-07-27 10:11:04

Flex4
点赞
收藏

51CTO技术栈公众号