- 浏览: 11844 次
最新评论
Adobe Flex UIComponent LifeCycle 11 十二 2010 Filed under: Life is Cool! Author: Alvin / Aedis.Ju 将文章转换为简体 (图片来源于jexchan) 重写Flex组件AS方式和MXML方式的采用推荐规则 MXML文件和AS文件最后都会被编译成AS类,只不过MXML编译速度稍慢一些 如果MXML和AS都能完成的一个简单Flex组件,MXML更容易被创建和控制布局 当要覆盖Flex组件的某些方法时只能用AS方式 创建非可视化Flex组件比如Formatter、validator、Effect……时,只能用AS 要为Flex组件添加日志功能时,只能用AS. 参考代码推荐:mx.controls.Button,在SDK里面,现在都是openSouce的,所以可以参考Adobe是怎么写的。 createChildren() 可在自身内部创建其它组件或对象的组件。 无需直接调用此方法,addChild() 方法时,Flex 将调用 createChildren () 方法。也这是因为这种特性,如果UIComponent没有被加载到舞台上,它里面的children是不会被实例化的,也正是新手常常碰到错误的情况之一。 commitProperties() 提交Flex组件所有的属性变化,设置measure()方法可能使用的属性值。绝大多数情况下,都是对影响Flex组件如何在屏幕上显示的属性使用这个方法。 无需直接调用此方法,addChild() 或 invalidateProperties () 方法时,Flex 将调用 commitProperties () 方法。 应在调用 measure() 方法之前调用 commitProperties() 方法。这允许您设置 measure() 方法可能会用到的属性值。 measure() 计算组件的默认大小和(可选)默认最小大小。 measuredWidth measuredHeight measuredMinWidth measuredMinHeight 无需直接调用此方法,addChild() 或 invalidateSize() 方法时,Flex 将调用 measure() 方法。 Container. layoutChrome() layoutChrome是Container特有的生命周期,主要是跟容器边框有关系。 通过设置此容器边框的位置和大小响应大小更改。用于定义容器的边框区域和确定边框区域的位置,以及确定要在边框区域中显示的附加元素。 通常,使用RectangularBorder类来定义容器区域的边框,而不是用图片资源去包围Flex组件。比如创建一个RectangularBorder对象,然后在重载的createChildren()方法中,将其作为一个内容子控件添加到Flex组件中,再用updateDisplayList()方法来确定其位置。 将容器的内容区域和容器边框区域分开处理的主要原因是为了应对Container.autoLayout属性被设置为false的这种情况。当autoLayout(自动布局)属性使用默认值true时,只要容器子控件的大小和位置发生变化,容器及子控件就会进行度量和布局。而当其为false时,度量和布局只在子控件被添加或移出容器时才执行。分开处理让Flex在这两种情况下都执行layoutChrome(),从而在autoLayout属性为false的情况下,容器仍能够更新它的边框区域。 updateDisplayList() 绘制对象和/或设置其子项的大小和位置。 无需直接调用此方法,addChild() 或 invalidateDisplayList () 方法时,Flex 将调用 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事件。 在上述任一操作中,您都应使用组件的 unscaledWidth 和 unscaledHeight 作为其边界,而不是 width 和 height 属性,这很重要。 以像素为单位的Flex组件坐标系中,unscaledWidth和unscaledHeight是由父容器确定的Flex组件大小,而不管Flex组件的scaleX,scaleY是多少。缩放发生在FlashPlayer或者AIR中,发生时机是在updateDisplayList()执行之后。比如一个Flex组件的unscaledHeight属性是100,而其scaleY属性是2.0,那么它在FlashPlayer或AIR中出现的高度为200像素。 深入Flex生命周期 1.调用Flex组件构造函数。构造函数没有返回类型,没有参数,使用super()调用父类的构造器。 2.使用set,get设置Flex组件属性,常在set方法内监控一个布尔变量来实现失效机制。 3.调用addChild()方法将Flex组件添加到父Flex组件显示列表中,Flex将自动调用createChildren(),invalidateProperties(),invalidateSize(),invalidateDisplayList()。只有将Flex组件添加到父容器中,Flex才能确定它的大小(size),设置它所继承样式(style)属性,或者在屏幕上画出它。 4.Flex组件的parent属性设置为对父容器的引用。 5.样式(style)设置。 6.Flex组件分发preinitialize事件。 7.调用Flex组件createChildren()方法。 8.调用invalidateProperties(),invalidateSize(),invalidateDisplayList()失效方法,Flex将在下一个“渲染事件”(renderevent)期间对相应的commitProperties(),measure(),updateDisplayList()方法进行调用。 这个规则唯一例外就是当用户设置Flex组件的height和width属性时,Flex不会调用measure()方法。也就是说,只有当Flex组件的explicitWidth和explicitHeight属性是NaN时Flex才会调用measure()方法。 9.Flex组件分发initialize事件。此时Flex组件所有的子Flex组件初始化完成,但Flex组件尚未更改size和布局,可以利用这个事件在Flex组件布局之前执行一些附加的处理。 10.在父容器上分发childAdd事件。 11.在父容器上分发initialize事件。 12.在下一个“渲染事件”(renderevent)中,Flex执行以下动作: 调用Flex组件的commitProperties()方法 调用Flex组件的measure()方法 调用Flex组件的layoutChrome()方法 调用Flex组件的updateDisplayList()方法 在Flex组件上分发updateComplete事件 13.如果commitProperties(),measure(),updateDisplayList()方法调用了invalidateProperties(),invalidateSize(),invalidateDisplayList()方法,则Flex会分发另外一个render事件 14.在最后的render事件发生后,Flex执行以下动作: 设置Flex组件visible属性使其可视 Flex组件分发creationComplete事件,Flex组件的大小(size)和布局被确定,这个事件只在Flex组件创建时分发一次 Flex组件分发updateComplete事件。无论什么时候,只要Flex组件的布局(layout),位置,大小或其它可视的属性发生变化就会分发这事件,然后更新Flex组件来正确地显示。 失效机制(invalidation mechanism) 原理请看Essential.ActionScript.3.0(ActionScript.3.0 编程精髓)第二十三章的Event.RENDER部分。 一种情况是,当设置了Flex组件的多个属性后, 比如 Button控件的label和icon属性,我们需要所有属性被设置后一次性执行commitProperties(),measure(),updateDisplayList()方法,而不是设置过label属性后执行一遍这些方法,然后在设置icon属性后又执行一次这些方法。 另一种情况是几个Flex组件同时更改了它们的字体大小。程序更改字体大小的执行速度大大快于Flex更新应用的速度,因此要在确定最终更改字体之后才开始更新布局。 另外,Flex需要协调布局操作以消除任何冗余过程,而不是在每个Flex组件更新它的字体大小之后都执行一次布局操作。 Flex使用“失效机制(invalidation mechanism)”来同步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()没有对应的失效方法,它会在调用后被立即执行。 *名词解释 width : Number 指定组件在父坐标中的宽度的数字(以像素为单位)。 height : Number 指定组件在父坐标中的高度的数字(以像素为单位)。 explicitWidth : Number 指定该组件在组件坐标中显式宽度(以像素为单位)的数字。 explicitHeight : Number 指定该组件在组件坐标中显式高度(以像素为单位)的数字。 measuredWidth : Number 组件的默认宽度(以像素为单位)。 measuredHeight : Number 组件的默认高度(以像素为单位)。 percentWidth : Number 以组件父项大小百分比形式指定其宽度的数字。 percentHeight : Number 以组件父项大小百分比的方式指定组件高度的数字。
发表评论
-
strcpy strncpy (拷贝字符串)
2012-07-06 09:52 1028strcpy(拷贝字符串) 表头文件 #include ... -
solr DataImportHandler
2012-07-06 09:47 845大多数的应用程序将数据存储在关系数据库、xml文件中。对这 ... -
RAC结构与组件
2012-07-03 13:44 648一、RAC主要组件, ... -
一个FLEX4 二级联动 下拉菜单的例子
2012-07-02 13:30 863发现FLEX4和3 有一些细微的不同, 直接给dataPr ... -
flex datechooser 日期小例子
2012-07-02 13:30 614在这个例子中,我们讲解的是DateChooser 控件,这 ... -
flex 日期下拉框,选择一段日期
2012-07-02 13:30 601在一般网页的制作过程中,我们做的程序,日期选择框,通过js ... -
在Flex组件上显示手型的鼠标
2012-07-02 13:30 551在Flex组件上显示手型的鼠标 有些时候,我们需 ... -
使用Adobe Flex开发Google Wave Gadgets
2012-07-02 13:30 502Adobe Flash Builder 4 简 ... -
Flex 向Java传递Object的方法
2012-07-01 10:59 620在开发中,遇到Flex向Java传递一个数组的情况,从实际 ... -
Flex 并行调用Remote Object的性能问题
2012-07-01 10:59 815[问题] 如果在一个Frame内,同时调用多个Remot ... -
Flex array数组到java Object[] 的转换方法
2012-07-01 10:59 985若Flex端传递的对象为 var arr:Array ... -
关于flex编程中ActionScript3.0中的Object和Dictionary的异同
2012-07-01 10:59 748【提出问题】最近在进行Flex的编程过程中,我们需要有一个 ... -
flex 中Tree的数据由数组提供
2012-07-01 10:58 479flex/spark" xmln ... -
flex4:中DataGroup组件获取数据源(ArrayCollection方式)实例
2012-06-30 17:24 696flex/spark" xmlns:mx=&q ... -
Flex编程学习基础
2012-06-30 17:24 622Flex是Adobe公司推出 ... -
Flex组件自动获取输入焦点
2012-06-30 17:24 643浏览器加载swf后,Flex组件自动获取输入焦点。 1.在 ...
相关推荐
This is a Flex UIComponent that can be used 谋n a FLEX 3 mxml application as component written in action script 3.0, provides you to create items that cab be filled from an XML or Query ResultSet or ...
UIComponent.unitypackage
flex开发自定义控件
UIComponent
- Extends the Adobe’s™ UIComponent class (no need to relearn a new system) - Display and embed URLs in your application* - Display HTML pages in your application* - Display ...
UICOMPONENT 旨在直接替代 Matlab 的内置 UICONTROL 和 JAVACOMPONENT 函数。 它接受 UICONTROL 接受的所有参数和样式,以及任何其他可显示的 Java (Swing/AWT) 组件类。 保留了 UICONTROL 的调用约定和语法以实现...
MatlabGUI使用java组件无所不能-uicomponent.m 是不是曾经想做出漂亮的GUI 界面? 是不是曾经想在 Matlab GUI里面显示网页? 看看这个界面: matlab_java.png 所以,...
CustomComponent 自定义组件(空视图、标题、表单输入项、设置项、菜单项、按钮、文字) 继承于ConstraintLayout EmptyView 空数据视图-(图标加文字描述) 属性表格 name format description empty_title ...
BlurryLoading-UiComponent
与 Tiles 相比,Facelets 的优势在于它预先集成了 JSF UIComponent,并且不需要 Facelets 配置文件,而 Tiles 需要 Tiles 配置文件。 在 Facelets 中可以添加 JSF 验证器和转换器。Facelets 全面支持表达式语言 (EL...
可作为component 使用 (此图片来源于网络,如有侵权,请联系删除! ) 直接上代码 (此图片来源于网络,如有侵权,请...viewclass="uiComponent uiComponent_mask uiComponent_mask_{{uiComponent.mask.show &&'active'}}
React过度 一个使用Dart构建静态类型的React UI组件的库。 该库还公开了OverReact Redux ,它具有。... 查看《 UiComponent2迁移指南》以了解UiComponent2的优势,可以运行的codemod脚本以及可能需要手动进行的其他
在Page顶部下滑一个提示条 , 代码见 /mixins/UIComponent.js ,其中的self 可以认为是微信小程序的Page对象 (此图片来源于网络,如有侵权,请联系删除! ) 效果: 默认2秒展示,上移动画隐藏 /** * 展示顶部 tip , 多...
mkdir -p Customizing/global/plugins/Services/UIComponent/UserInterfaceHook cd Customizing/global/plugins/Services/UIComponent/UserInterfaceHook git clone ...
将呈现方法更改为以下方法(Row.java第67行)后,它可以按预期工作:public void render(UIComponent parent){UIComponent Composite = Components.includeCompositeComponent(parent,“ qcockpit”,Row....
mkdir -p Customizing/global/plugins/Services/UIComponent/UserInterfaceHook/ cd Customizing/global/plugins/Services/UIComponent/UserInterfaceHook/ git clone ...
import fl.core.UIComponent; var TF : TextFormat = new TextFormat(); TF.size = 16; TF.color = 0x0000ff; key.setStyle("textFormat",TF); ss.addEventListener(MouseEvent.CLICK,ft); function ft(en:Event) {...
在用 ActionScript 创建自定义组件时,必须重载 UIComponent 类的一些方法.实现基本的 组件结构,构造器,以及 createChildren(),commitProperties(), measure(), layoutChrome() 和 updateDisplayList()方法.