`

如何重写flex组件

阅读更多

一、为什么要重写组件

1、在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展。举例,继承BUTTON组件的长文本却不自动换行的自定义控件。
2、为了模块化设计或进一步重用,需要对FLEX组件进行组合。比如一个包括TEXTAREA,BUTTON的复合控件。
二、重写组件需要经常换位思考的三个角色
1、作为重写组件的使用者,有哪些需求。比如需要在MXML标签和AS代码中暴露哪些属性及对应默认值、事件和事件的处理逻辑。
2、重写组件一般需要使用FLEX原有组件,要站在原有开发者的角度了解设计规则。
3、作为重写组件的设计者,在满足需求的情况下尽量做到可复用、低耦合易扩展等设计原则,让新组件像FLEX原组件一样好用。
三、重写组件AS方式和MXML方式的采用规则
1MXML文件和AS文件最后都会被编译成AS类,只不过MXML编译速度稍慢一些
2、如果MXMLAS都能完成的一个简单组件,MXML更容易被创建和控制布局
3、当要覆盖组件的某些方法时只能用AS方式
4、创建一个直接继承UIComponent的子类时只能用AS
5、创建非可视化组件比如FormattervalidatorEffect……时,只能用AS
6、要为组件添加日志功能时,只能用AS.
四、AS方式重写组件常规步骤
1、如果有必要,为组件创建所有基于标记(tag-based)的皮肤(skins
2、创建ActionScript类文件
⑴从一个基类扩展,比如UIComponent或者其他的组件类
⑵指定使用者能够通过MXML标记进行设置的属性
⑶嵌入(Embed)所有的图片和皮肤文件,文件大小尽可能小
⑷实现构造器,可以设置属性和样式的缺省值,或者初始化数据结构,比如数组
⑸根据需要,确定是否覆盖以下五个方法:
(a)UIComponent.createChildren()方法,创建组件的子组件
(b)UIComponent.commitProperties()方法,提交组件所有的属性变化,设置measure()方法可能使用的属性值。绝大多数情况下,都是对影响组件如何在屏幕上显示的属性使用这个方法
(c)UIComponent.measure()方法,设置组件的缺省sizemeasuredWidthmeasuredHeight)和缺省的最小sizemeasuredMinWidthmeasuredMinHeight
(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 事件,设置xy属性也更改组件的位置,但却在下一个屏幕更新事件中才会分发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:NumberunscaledHeight:Number):void
以像素为单位的组件坐标系中,unscaledWidthunscaledHeight是由父容器确定的组件大小,而不管组件的scaleX,scaleY是多少。缩放发生在Flash Player或者AIR中,发生时机是在updateDisplayList()执行之后。比如一个组件的unscaledHeight属性是100,而其scaleY 属性是2.0,那么它在Flash PlayerAIR中出现的高度为200像素。
需要注意的是,定义新组件时不一定要重载所有的五个方法,只需重载实现组件功能所必需的即可。比如实现一个自定义的Button 控件,该控件使用新的机制来定义缺省大小(size)。在这种情况下,只需要重载measure()方法。或者,要实现VBox 容器的一个新子类。新子类利用VBox 类已有的所有有关设定大小(sizing)的逻辑,但是变更了VBox 类的布局逻辑以实现从底部到顶部的方式来布局容器中的子控件,而不是自顶向下的布局。在这种情况下,只需要重载updateDisplayList()方法。
(6)增加属性(properties),方法(methods),样式(styles),事件(events)以及元数据
3、以ActionScript文件或者SWC文件的形式部署组件
五、深入组件生命周期
1、生命周期(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),位置,大小或其它可视的属性发生变化就会分发这事件,然后更新组件来正确地显示。
2、为什么使用失效机制(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()没有对应的失效方法,它会在调用后被立即执行。
分享到:
评论

相关推荐

    flex 重写组件

    #### 一、为何需要重写Flex组件? 在Flex开发过程中,经常遇到已有的组件无法完全满足项目需求的情况。这些需求可能包括但不限于改变组件的外观、增加新的功能特性或者实现更复杂的交互逻辑。在这种背景下,重写...

    flex中的组件重写例子

    首先,我们来看一下为何需要重写Flex组件。Flex提供了丰富的预定义组件库,如Button、Label、List等,但这些组件可能无法满足所有应用的特定需求。有时,我们需要改变组件的外观、行为或者添加新的功能。例如,你...

    Flex组建重写

    #### 一、为什么需要重写Flex组件 Flex作为一种强大的富互联网应用框架,提供了丰富的内置组件供开发者使用。然而,在实际项目中,这些现成的组件往往不能完全满足特定的需求,例如可能需要改变组件的外观、行为...

    flex组件重写

    本文将探讨Flex组件重写的必要性、考虑因素、以及AS和MXML方式的选用规则,并提供AS方式重写组件的一般步骤。 一、为什么要重写组件 1. 扩展功能:当Flex已有的组件无法满足特定业务需求时,我们可以通过继承现有...

    【完美翻译】Flex组件的生命周期

    Flex组件的生命周期是Adobe Flex框架中一个至关重要的概念,它涉及到UIComponent类及其子类(如Button、Canvas等)在创建、初始化、显示和销毁过程中的各个阶段。深入理解组件生命周期有助于开发者更有效地管理组件...

    flex 高级自定义组件

    Flex中的高级自定义组件开发是构建复杂用户界面的关键技术,它允许开发者超越基本组件的限制,以满足特定的业务需求和视觉设计。在创建高级组件时,了解并掌握一些核心方法的重写至关重要,这些方法涉及到组件的生命...

    Flex4自定义组件开发.pdf

    ### Flex4自定义组件开发详解 #### 一、Flex4自定义组件概述 Flex4(也称为Spark)是Adobe Flex框架的一个重要版本,它引入了许多新的特性,包括改进的组件库、性能优化以及更好的可定制性。在Flex4中,自定义组件...

    flex做拓扑图的组件

    4. **自定义组件**:拓扑图组件通常需要定制,可以创建一个继承自`UIComponent`的类,并重写`draw()`方法以实现自定义的绘制逻辑。此外,你可能还需要覆盖`measure()`和`updateDisplayList()`方法来确保组件的尺寸和...

    flex3组件和框架的生命周期

    - **Flex组件开发的最佳实践** - 使用构造函数 - 实时与构造函数 - 使用初始化 - 重写初始化方法 - 失效-生效周期和方法 - 分离生命周期阶段 - 使用标识变量 - 实现验证方法 - 使用和访问样式 - **结论** ...

    Flex重写搜索框

    在Flex开发中,为了提升用户界面的美观度和交互体验,开发者经常需要对标准的UI...通过这样的实践,开发者不仅可以提升应用的视觉效果,还能学习到Flex组件扩展和优化的技巧,为创建更复杂、更具吸引力的应用奠定基础。

    Flex自定义组件和事件

    - **绘制组件**:在自定义组件中,通常需要重写`drawRect()`或`updateDisplayList()`方法来绘制组件的外观。 - **添加属性和方法**:根据需求添加新的属性和方法,以实现特定的功能。 - **布局管理**:如果组件...

    flex/flash自定义组件(搜索栏)

    1. **Flex组件基础**: Flex是一套基于ActionScript 3.0和MXML的框架,用于构建交互式的、基于Web的应用程序。它提供了丰富的组件库,如Button、TextInput等,但有时我们需要根据项目需求自定义组件来满足特定的...

    Flex3组件和框架的生命周期

    通过重写`initialize()`方法来进行组件的深度初始化。这种方法允许在组件添加到显示列表后执行更精细的控制。 **使用标识变量** 标识变量可以帮助追踪组件的生命周期状态。这对于处理特定生命周期阶段的逻辑非常...

    flex自定义组件

    这是一个flex4的项目,可以下载下来单独运行,其中重写了组件createChildren、commitProperties、measure和updateDisplayList方法,基本描述了他们在组件生命周期中所起的作用,并且在项目中实现了属性的事件绑定,...

    SimPager Flex分页组件

    重写的Flex分页组件,改进了一些BUG,原版的源码丢了,又重写了一个,所以没有版本之分 recordCount//记录总数,程序对该属性赋值生成分页 currentPageIndex//当前页 pageSize//每页记录数 buttonConut//显示的...

    (十八)Flex4_自定义ActionScript组件

    在Flex4中,开发者可以使用ActionScript,一种面向对象的编程语言,来扩展Flex组件库,定制符合特定需求的用户界面元素。 Flex4引入了全新的图形渲染引擎——Gumbo,允许开发者更加灵活地控制UI组件的外观和行为。...

    flex皮肤flex皮肤

    Flex皮肤是Flex组件的外观表示,它可以改变组件的颜色、形状、大小等视觉元素。通过更换皮肤,开发者可以创建独特且一致的用户界面,符合品牌风格或者提高用户体验。 2. **Flex皮肤的类型** - **内置皮肤**:Flex...

    关于Flex 初始化的research

    原因在于Flex组件的生命周期,尤其是初始化阶段的事件顺序。 Flex组件的生命周期包含多个关键阶段,这些阶段按照一定的顺序执行,确保组件的正确初始化和显示。主要阶段包括: 1. **PREINITIALIZE**:这是组件生命...

    FLEX简单的入门快速总结

    Flex是Adobe公司开发的一种用于构建富...同时,熟悉MXML和ActionScript的结合使用,以及Flex组件库的运用,也是成为Flex开发者的必备技能。通过不断实践和学习,你将能够利用Flex构建功能强大、交互丰富的RIA应用。

Global site tag (gtag.js) - Google Analytics