理解 Flex itemRenderer - 第 5 部分: 效率

如果您要显示大量 itemRenderer-无论在 DataGrid 还是在 AdvancedDataGrid 中-如果无法有效编写这些 itemRenderer, 您的应用程序性能可能受到负面影响。以下是一些可能有所帮助的提示:

  • 限制使用 itemRenderer 的列数。是否真的需要将每个列作为自定 itemRenderer?有时需要这样, 光芒太强是否会令用户头晕眼花?
  • 尝试不要过于频繁地更改 itemRenderer 中元素的样式。如果需要切换样式 (例如, 绿色用于正值, 红色用于负值) , 可考虑为这些样式创建两个控制预设并使其中一个可见。更改样式 Flex 中比较费时的任务之一。
  • 不要将 Containers 用作 itemRenderer 的基础。容器会占用大量资源。少量使用它们, 效果还不错; 但是根据 UIComponent 编写 itemRenderer 效率更高。
切换样式

以下 itemRenderer 根据数据字段的值切换组件。

Code:

  1. <mx:Canvas>
  2. <mx:Script><![CDATA private function lessThanZero() : Boolean {  
  3.            return data.price < 0; }  
  4.     ]]></mx:Script>
  5. <mx:Label text="{data.price}" color="#FF0000" visible="{lessThanZero()}" />
  6. <mx:Label text="{data.price}" color="#00FF00" visible="{!lessThanZero()}" />
  7. </mx:Canvas>

这比设置样式要快。要注意的其他事项包括:

  • 避免数据绑定到样式。更改样式不仅比大多数操作要慢, 而且在它上面添加数据绑定代码只会使它更糟。
  • 使用 Canvas 或扩展 ListItemRenderer 或作为 itemRenderer 的根。这允许您将控制放在各自上方。
扩展 UIComponent

目前编写 itemRenderer 最有效的方式是使用 ActionScript 类扩展 UIComponent。您可以全面控制代码, 并且渲染器也可以尽可能高效。

从上例切换样式开始, 编写一个扩展 UIComponent 的简单 itemRenderer。

Code:

  1. package renderers  
  2. {  
  3.       import mx.controls.listClasses.IListItemRenderer;  
  4.       import mx.core.UIComponent;  
  5.       public class PriceItemRenderer extends UIComponent implements IListItemRenderer  
  6.       {  
  7.            public function PriceItemRenderer()  
  8.            {  
  9.                  super();  
  10.            }  
  11.       }  

您会发现我不仅编写这个类来扩展 UIComponent, 还由它实施 IListItemRenderer 接口。这样做是有必要的, 因为 List 控制将需要任何渲染器实施该接口, 否则您会收到运行时错误, 因为列表尝试将渲染器转换为该接口。

如果阅读 IListItemRenderer 的相关文档, 您会发现这是一个许多其他接口的集合, UIComponent 会为您实施其中的大多数。但有一个 IListItemRenderer 扩展的接口是 UIComponent 不实施的:IDataRenderer。这需要您添加代码, 为 itemRenderer 类提供您一直使用的 data 属性。

如果您尝试不实施 IDataRenderer 就使用这个类, 则编译代码时会收到以下错误:

  • 1044:类 renderers:PriceItemRenderer 未实施名称空间 mx.core:IDataRenderer 中的接口方法 get data。

编辑这个类并将它更改为以下内容:

Code:

  1. package renderers  
  2. {  
  3.       import mx.controls.listClasses.IListItemRenderer;  
  4.       import mx.core.UIComponent;  
  5.       import mx.events.FlexEvent;  
  6.       public class PriceItemRenderer extends UIComponent implements IListItemRenderer  
  7.       {  
  8.            public function PriceItemRenderer()  
  9.            {  
  10.                  super();  
  11.            }  
  12.     // Internal variable for the property value.  
  13.     private var _data:Object;  
  14.     // Make the data property bindable.  
  15.     [Bindable("dataChange")]  
  16.     // Define the getter method.  
  17.     public function get data():Object {  
  18.         return _data;  
  19.     }  
  20.     // Define the setter method, and dispatch an event when the property  
  21.     // changes to support data binding.  
  22.     public function set data(value:Object):void {  
  23. _data = value;  
  24.         dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));  
  25.     }  
  26.    }  

我直接使用 IDataRenderer 的 Flex 文档中的代码, 这样您都不用自己键入它。

1.移除它后, 您可以加入两个标签。添加变量用于存放这两个标签。
private var posLabel:Label; private var negLabel:Label;
2..将 set data 函数修改为调用 invalidateProperties()。这很重要, 因为更改数据必须更改标签中的文本以及它们的可视性。

Code:

  1. public function set data(value:Object):void {  
  2. _data = value;  
  3.     invalidateProperties();  
  4.     dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));  

调用 invalidateProperties() 会告知 Flex 框架在适当的时间调用 commitProperties() 函数。
3.覆盖 createChildren() 并创建标签, 添加它们以显示组件列表。注意, 除了创建标签外, 还会设置它们的样式和 visible 属性。

Code:

  1. override protected function createChildren() : void          
  2. {                  
  3.      super.createChildren();  
  4. posLabel = new Label();             
  5. posLabel.visible = false;        
  6.      posLabel.setStyle("color", 0×00FF00);         
  7.      addChild(posLabel);                 
  8. negLabel = new Label();             
  9. negLabel.visible = false;               
  10.      negLabel.setStyle("color", 0xFF0000);             
  11.      addChild(negLabel);         

4.覆盖 commitProperties() 以设置标签的文本和可视性。过去, 您一直通过覆盖 set data 进行这类更改, 如果您喜欢, 也可以在这个类中那样做。

Code:

  1. override protected  
  2. function commitProperties():void             
  3. {                  
  4.      super.commitProperties();  
  5. posLabel.text = data.price;  
  6. negLabel.text = data.price;      
  7. posLabel.visible = Number(data.price) > 0;       
  8. negLabel.visible = Number(data.price) < 0;             

5.覆盖 updateDisplayList() 以设置标签大小并进行定位。您必须设置标签大小, 因为它们的默认大小为 0×0。这是 Container 类将为您做的另一件事。由于这个 itemRenderer 十分简单, 您只需将标签大小设置为与 itemRenderer 大小匹配即可。

  1. Code:

    1. override protected function updateDisplayList(  
    2. unscaledWidth:Number, unscaledHeight:Number ) : void  
    3. {          
    4.      super.updateDisplayList(unscaledWidth, unscaledHeight);           
    5.      posLabel.move(0,0);     
    6.      posLabel.setActualSize(unscaledWidth,unscaledHeight);       
    7.      negLabel.move(0,0);         
    8.      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 的更多相关信息。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值