原文地址:http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt5.html
如果您要显示大量 itemRenderer-无论在 DataGrid 还是在 AdvancedDataGrid 中-如果无法有效编写这些 itemRenderer, 您的应用程序性能可能受到负面影响。以下是一些可能有所帮助的提示:
- 限制使用 itemRenderer 的列数。是否真的需要将每个列作为自定 itemRenderer?有时需要这样, 光芒太强是否会令用户头晕眼花?
- 尝试不要过于频繁地更改 itemRenderer 中元素的样式。如果需要切换样式 (例如, 绿色用于正值, 红色用于负值) , 可考虑为这些样式创建两个控制预设并使其中一个可见。更改样式 Flex 中比较费时的任务之一。
- 不要将 Containers 用作 itemRenderer 的基础。容器会占用大量资源。少量使用它们, 效果还不错; 但是根据 UIComponent 编写 itemRenderer 效率更高。
本系列包含以下文章:
要求
为了充分利用本文, 您需要以下软件和文件:
Flex Builder 3
必要条件:
要从本文中受益, 您最好熟悉 Flex Builder 和 ActionScript 3.0。
扩展 UIComponent
目前编写 itemRenderer 最有效的方式是使用 ActionScript 类扩展 UIComponent。您可以全面控制代码, 并且渲染器也可以尽可能高效。
从上例切换样式开始, 编写一个扩展 UIComponent 的简单 itemRenderer。
您会发现我不仅编写这个类来扩展 UIComponent, 还由它实施 IListItemRenderer 接口。这样做是有必要的, 因为 List 控制将需要任何渲染器实施该接口, 否则您会收到运行时错误, 因为列表尝试将渲染器转换为该接口。
如果阅读 IListItemRenderer 的相关文档, 您会发现这是一个许多其他接口的集合, UIComponent 会为您实施其中的大多数。但有一个 IListItemRenderer 扩展的接口是 UIComponent 不实施的:IDataRenderer。这需要您添加代码, 为 itemRenderer 类提供您一直使用的 data
属性。
如果您尝试不实施 IDataRenderer 就使用这个类, 则编译代码时会收到以下错误:
- 1044:类 renderers:PriceItemRenderer 未实施名称空间 mx.core:IDataRenderer 中的接口方法 get data。
编辑这个类并将它更改为以下内容:
我直接使用 IDataRenderer 的 Flex 文档中的代码, 这样您都不用自己键入它。
移除它后, 您可以加入两个标签。
-
添加变量用于存放这两个标签。
private var posLabel:Label; private var negLabel:Label;
-
将
set data
函数修改为调用invalidateProperties()
。这很重要, 因为更改数据必须更改标签中的文本以及它们的可视性。调用
invalidateProperties()
会告知 Flex 框架在适当的时间调用 commitProperties() 函数。 -
覆盖
createChildren()
并创建标签, 添加它们以显示组件列表。注意, 除了创建标签外, 还会设置它们的样式和visible
属性。 -
覆盖
commitProperties()
以设置标签的文本和可视性。过去, 您一直通过覆盖set data
进行这类更改, 如果您喜欢, 也可以在这个类中那样做。 -
覆盖
updateDisplayList()
以设置标签大小并进行定位。您必须设置标签大小, 因为它们的默认大小为 0×0。这是 Container 类将为您做的另一件事。由于这个 itemRenderer 十分简单, 您只需将标签大小设置为与 itemRenderer 大小匹配即可。
所有这些只能做到这点似乎有点复杂, 但是请记住一点, 使用容器增加的代码要比这多得多。
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 的更多相关信息。