理解Flex itemRenderer(5)--效率
如果您要显示大量 itemRenderer-无论在 DataGrid 还是在 AdvancedDataGrid 中-如果无法有效编写这些 itemRenderer, 您的应用程序性能可能受到负面影响。以下是一些可能有所帮助的提示:
- 限制使用 itemRenderer 的列数。是否真的需要将每个列作为自定 itemRenderer?有时需要这样, 光芒太强是否会令用户头晕眼花?
- 尝试不要过于频繁地更改 itemRenderer 中元素的样式。如果需要切换样式 (例如, 绿色用于正值, 红色用于负值) , 可考虑为这些样式创建两个控制预设并使其中一个可见。更改样式 Flex 中比较费时的任务之一。
- 不要将 Containers 用作 itemRenderer 的基础。容器会占用大量资源。少量使用它们, 效果还不错; 但是根据 UIComponent 编写 itemRenderer 效率更高。
切换样式
以下 itemRenderer 根据数据字段的值切换组件。
<mx:Canvas><mx:Script><![CDATA private function lessThanZero() : Boolean {return data.price < 0; }]]></mx:Script><mx:Label text="{data.price}" color="#FF0000" visible="{lessThanZero()}" /><mx:Label text="{data.price}" color="#00FF00" visible="{!lessThanZero()}" /> </mx:Canvas>
这比设置样式要快。要注意的其他事项包括:
- 避免数据绑定到样式。更改样式不仅比大多数操作要慢, 而且在它上面添加数据绑定代码只会使它更糟。
- 使用 Canvas 或扩展 ListItemRenderer 或作为 itemRenderer 的根。这允许您将控制放在各自上方。
扩展 UIComponent
目前编写 itemRenderer 最有效的方式是使用 ActionScript 类扩展 UIComponent。您可以全面控制代码, 并且渲染器也可以尽可能高效。
从上例切换样式开始, 编写一个扩展 UIComponent 的简单 itemRenderer。
package renderers {import mx.controls.listClasses.IListItemRenderer;import mx.core.UIComponent;public class PriceItemRenderer extends UIComponent implements IListItemRenderer{public function PriceItemRenderer(){super();}} }
您会发现我不仅编写这个类来扩展 UIComponent, 还由它实施 IListItemRenderer 接口。这样做是有必要的, 因为 List 控制将需要任何渲染器实施该接口, 否则您会收到运行时错误, 因为列表尝试将渲染器转换为该接口。
如果阅读 IListItemRenderer 的相关文档, 您会发现这是一个许多其他接口的集合, UIComponent 会为您实施其中的大多数。但有一个 IListItemRenderer 扩展的接口是 UIComponent 不实施的:IDataRenderer。这需要您添加代码, 为 itemRenderer 类提供您一直使用的 data
属性。
如果您尝试不实施 IDataRenderer 就使用这个类, 则编译代码时会收到以下错误:
- 1044:类 renderers:PriceItemRenderer 未实施名称空间 mx.core:IDataRenderer 中的接口方法 get data。
编辑这个类并将它更改为以下内容:
package renderers {import mx.controls.listClasses.IListItemRenderer;import mx.core.UIComponent;import mx.events.FlexEvent;public class PriceItemRenderer extends UIComponent implements IListItemRenderer{public function PriceItemRenderer(){super();}// Internal variable for the property value.private var _data:Object;// Make the data property bindable.[Bindable("dataChange")]// Define the getter method.public function get data():Object {return _data;}// Define the setter method, and dispatch an event when the property// changes to support data binding.public function set data(value:Object):void {_data = value;dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));}} }
我直接使用 IDataRenderer 的 Flex 文档中的代码, 这样您都不用自己键入它。
移除它后, 您可以加入两个标签。
添加变量用于存放这两个标签。
private var posLabel:Label; private var negLabel:Label;
将
set data
函数修改为调用invalidateProperties()
。这很重要, 因为更改数据必须更改标签中的文本以及它们的可视性。public function set data(value:Object):void {_data = value;invalidateProperties();dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));}
调用
invalidateProperties()
会告知 Flex 框架在适当的时间调用 commitProperties() 函数。覆盖
createChildren()
并创建标签, 添加它们以显示组件列表。注意, 除了创建标签外, 还会设置它们的样式和visible
属性。override protected function createChildren() : void { super.createChildren();posLabel = new Label(); posLabel.visible = false; posLabel.setStyle("color", 0×00FF00); addChild(posLabel); negLabel = new Label(); negLabel.visible = false; negLabel.setStyle("color", 0xFF0000); addChild(negLabel); }
覆盖
commitProperties()
以设置标签的文本和可视性。过去, 您一直通过覆盖set data
进行这类更改, 如果您喜欢, 也可以在这个类中那样做。override protected function commitProperties():void { super.commitProperties();posLabel.text = data.price;negLabel.text = data.price; posLabel.visible = Number(data.price) > 0; negLabel.visible = Number(data.price) < 0; }
覆盖
updateDisplayList()
以设置标签大小并进行定位。您必须设置标签大小, 因为它们的默认大小为 0×0。这是 Container 类将为您做的另一件事。由于这个 itemRenderer 十分简单, 您只需将标签大小设置为与 itemRenderer 大小匹配即可。override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ) : void { super.updateDisplayList(unscaledWidth, unscaledHeight); posLabel.move(0,0); posLabel.setActualSize(unscaledWidth,unscaledHeight); negLabel.move(0,0); negLabel.setActualSize(unscaledWidth, unscaledHeight); }
所有这些只能做到这点似乎有点复杂, 但是请记住一点, 使用容器增加的代码要比这多得多。
UIComponent 附注
UIComponent 类是所有可视 Flex 组件 (控制和容器) 的基础。以下是将 UIComponent 用作 itemRenderer 的一些相关提示。
- UIComponent 对其子代 (如 Container) 没有版面限制。您必须自己进行子代定位并调整大小。
- 还可以超出
updateDisplayList()
中指定的大小绘制图形和位置子代。 - 如果准备在列表中使用
variableRowHeight
, 您还应覆盖measure()
函数, 告知列表 itemRenderer 有多大。 - 要将 UIComponent 用作 itemRenderer, 您必须实施 IDataRenderer。
- 要使用 listData 属性, 您必须实施 IDropInListItemRenderer; 本系列之前的文章中讨论过这个操作。
后续工作
有关 Flex itemRenderer 的系列到此结束。希望您通过这些文章了解到使用 itemRenderer 可以在 Flex 应用程序中做些什么以及如何处理它们的数据、外观和行为的最佳做法。您可以在 Adobe Flex 3 文档*中找到 Flex itemRenderer 的更多相关信息。
转载于:https://www.cnblogs.com/hainange/archive/2009/10/22/6153062.html
理解Flex itemRenderer(5)--效率相关推荐
- 理解Flex itemRenderer(3)--通信
在本系列的第 2 部分中, 我向您展示了如何使用 MXML 和 ActionScript 创建外部 itemRenderer.在我用过的示例中, 有一个调度自定事件 BuyBookEvent 的 Bu ...
- Flex itemRenderer 内联渲染器
1.需要理解的概念. 要理解 itemRenderer, 您必须理解它们为何变成现在这样以及我们当初设计它们时的目的.在此, 当我用到"我们"时, 我指的是 Adobe Flex ...
- CSS之深入理解 flex 布局以及计算
起因:对于Flex布局,阅读了大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档 ...
- 深入理解Flex布局以及计算
起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...
- 彻底理解flex弹性布局,看这一篇就够了!
Flex布局是什么? Flex是Flexible Box的缩写,意为 弹性布局 ,用来为盒状模型提供最大的灵活性. 基本概念 采用 Flex 布局的元素,称为 Flex 容器(flex contain ...
- 深入浅出在NIO技术中,如何理解直接缓冲区要比非直接缓冲区效率高?
如何理解两者之间的效率高,主要是从allocate()方法和allocateDirect()这两个方法的源码进行分析 文章目录 1.直接缓冲区的底层创建源码 2.非直接缓冲区的底层创建源码 3.非直接 ...
- 彻底弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
- [Flex]Flex SDK 4(Gumbo)改善的Layout和Scroller(二)
详细请看:http://www.k-zone.cn/zblog/post/flex-gumbo-layout-scroller-2.html 上一篇文章我们分析了Flex SDK 4(Gumbo)的布 ...
- 一起从头学习Flex
前言 "其实我觉得flex很像现在的人--是适应性很好的生物,在家秋衣秋裤在外香肩外露.flex container看作一个环境或者大佬,flex-item是其中个体或者马仔.个体如何存在很 ...
最新文章
- OpenCV3的机器学习算法-K-means-使用Python
- c++程序目录结构_C程序结构
- 解决虚拟机 Virtualbox 中 linux 共享文件夹只读问题
- 【8.23更新--技术干货全家桶】大数据计算技术共享计划 — MaxCompute技术公开课第二季...
- PYTHON系列-从零开始的爬虫入门指南
- 鸿蒙系统代码开源不担忧友商,华为鸿蒙系统正式开源!打脸“安卓套皮论”,友商手机也可采用!...
- python与seo应用_【张亚楠】Python在我SEO工作中的应用(1)
- 科大讯飞 jason word_2019科大讯飞全球1024开发者节开幕啦
- 理解Java里面的必检异常和非必检异常
- java 提取轮廓_TensorFlow 卷积操作模拟sobel算子提取图像轮廓
- python3 web框架_循序渐进Python3(十二) --0-- web之框架
- ubuntu16.04下安装mysql详细步骤
- python commands_python之commands模块
- 关于DHCP超级域与中继代理的疑问
- bzoj 1024 SCOI2009 生日快乐
- C#中跨工程跨项目注释的显示
- VOA 2009.11.19-教育报道-美国大学创入学记录新高
- java/php/net/python城市管理综合执法系统设计
- 【龙芯1c库】封装硬件SPI接口和使用示例
- DSP 基础学习 1:搭建环境与CCS6创建工程模板
热门文章
- 我在神策做研发 | 与客户难题“对抗”的百余天
- 华润网络签约神策数据 数据赋能打造跨行业综合移动服务生态圈
- webrtc收包流程源码分析
- Exp3 免杀原理与实践 20154320 李超
- 历史性胜利!纽约曼哈顿充电站数量超过加油站
- Apache https服务器配置笔记
- [转]Open Data Protocol (OData) Basic Tutorial
- SystemCenterOperationsManager2012 SP1系列文章
- 华为路由器RIP协议通信的配置
- int b = 1;int c = b^0xff;求C