一.首先回答,为什么要重写组件。
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方式重写组件常规步骤
1、如果有必要,为组件创建所有基于标记(tag-based)的皮肤(skins)
2、创建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)以及元数据
3、以ActionScript文件或者SWC文件的形式部署组件