`
hereson
  • 浏览: 1449907 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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

    博客分类:
  • flex
阅读更多

如果您要显示大量 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 文档中的代码, 这样您都不用自己键入它。

移除它后, 您可以加入两个标签。

  1. 添加变量用于存放这两个标签。

    private var posLabel:Label; private var negLabel:Label;
  2. 将 set data 函数修改为调用 invalidateProperties()。这很重要, 因为更改数据必须更改标签中的文本以及它们的可视性。

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

    调用 invalidateProperties() 会告知 Flex 框架在适当的时间调用 commitProperties() 函数。

  3. 覆盖 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);       
    }
  4. 覆盖 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;           
    }
  5. 覆盖 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 的更多相关信息。

分享到:
评论

相关推荐

    理解 Flex_itemRenderer

    ### 理解 Flex_itemRenderer #### 一、Flex_itemRenderer 概述 Flex_itemRenderer 是 Flex 框架中的一个重要概念,它主要用于定义列表、数据网格等控件中的每一项是如何呈现的。通过自定义 itemRenderer,开发者...

    Flex高级组件详细介绍

    希望本文能够帮助读者更好地理解和掌握Flex框架,提升开发效率。如有更多问题或交流需求,请联系: - **Email**: contactus@riameeting.cn - **Discussion Group**: china-rich-media-discussion@googlegroups.com

    Flex拓扑图精品文档

    ### Flex拓扑图精品文档知识点概述 #### 一、Flex拓扑图的两种实现方式 Flex拓扑图作为网络管理中的重要工具,在IT领域扮演着关键角色。它可以帮助技术人员直观地理解和管理网络结构。根据提供的文档,Flex拓扑图...

    flex 第一步的bug

    这些修正不仅有助于新手避免学习过程中的误区,还能帮助他们更深入地理解Flex的各项技术细节。通过仔细研究这些修正内容,学习者可以更快地掌握Flex的基本概念和技术要点,为后续的项目开发打下坚实的基础。

    Flex基础培训-3-组件和布局

    Flex是一种基于标准的编程框架,用于构建和维护在各种设备和屏幕尺寸上运行的应用程序。其主要优点是允许开发者使用MXML和...通过对这些组件和布局的深入理解和熟练运用,可以显著提高开发效率并优化用户体验。

    flex面试题

    5. **文件大小优化**:减小Flex生成文件大小的方法包括使用RSL、模块化(Module)和外部加载资源。 6. **NaN比较**:在JavaScript和ActionScript中,`NaN`(Not-a-Number)与任何值比较都返回`false`,包括`NaN == ...

    FLEX中DATAgird的学习

    总结起来,理解并熟练使用 `editorDataField`、`itemEditor` 和 `itemRenderer` 是在 Flex 中有效利用 `DataGrid` 编辑功能的关键。通过它们,你可以定制单元格的编辑行为,同时确保数据的正确保存和管理。通过绑定...

    Flex面试题及答案

    ### Flex面试题及答案解析 #### 1. 如何避免容器显示滚动条? 在Flex中,如果不想在容器中显示滚动条,可以通过设置`horizontalScrollPolicy`和`verticalScrollPolicy`属性为`off`来实现。这两个属性控制着水平和...

    flex中dataGrid全选和全不选功能

    ### 一、理解Flex DataGrid 首先,我们需要了解Flex中的DataGrid是如何工作的。DataGrid组件依赖于数据提供者(dataProvider),通常是一个 ArrayCollection 或者其他的可迭代集合。DataGrid会根据这个数据提供者来...

    Flex itemEditor详解

    #### 二、理解Flex ItemEditor ##### 2.1 ItemEditor与ItemRenderer的区别 在深入探讨`itemEditor`之前,我们需要先了解它与`itemRenderer`的区别。`itemRenderer`是用于自定义列表项外观和布局的组件。相比之下,...

    Flex试题 .txt

    根据给定的文件信息,以下是对“Flex试题.txt”中提到的关键知识点的详细解析: ...以上知识点涵盖了Flex框架的核心概念、开发技巧、性能优化和最佳实践,对于深入理解和掌握Flex技术有着重要作用。

    从头开发Flex树遇到的问题

    数据绑定是Flex应用中的关键部分,对于Tree来说,这意味着要将数据集与TreeNodes关联起来。这通常通过mx.collections.TreeDataProvider完成,它允许我们映射数据到树结构。在描述中提到的链接博客中,可能详细讨论了...

    Flex中DataGrid和其它控件使用

    5. **HeaderRenderer**和**ItemRenderer**:这两个组件允许我们自定义DataGrid的列头和单元格的外观和行为,以满足特定的界面设计需求。 6. **Sort功能**:DataGrid支持单击列头进行排序,可以自定义排序逻辑。在...

    Flex Tree XML

    在Flex开发中,Tree组件是一种常用的用户界面元素,它用于展示层次结构的数据。"Flex Tree XML"这个主题,就是关于如何使用XML数据源来填充和操作Flex中的Tree组件。在这个小例子中,我们将深入探讨如何将XML数据...

    datagrid 合并单元格

    在IT行业中,数据展示是应用开发中的重要环节,特别是在处理大量结构化数据时。`datagrid`组件是常用的数据展示工具,它允许用户以表格形式高效地查看和...理解和掌握这部分知识对于开发高质量的数据显示应用至关重要。

    flex的tree动态加载大量数据与滚动条相关问题探讨

    这个方法会强制Flex重新渲染Tree的可视部分,有助于缓解滚动时可能出现的显示问题。不过,这种方法可能会带来性能问题,因为它会导致Tree组件重新计算所有节点的布局和渲染,因此应当谨慎使用。 对于Tree组件在自动...

    表格演示(1)AdvancedDataGrid应用

    开发者可以通过创建自定义的ItemRenderer类,覆盖默认的渲染方式,实现如图片、颜色、下拉框等复杂元素的展示。 最后,文章中提到的“GanttApp”可能是对项目管理的一种模拟,通过AdvancedDataGrid展示了项目的各个...

Global site tag (gtag.js) - Google Analytics