项目渲染器(ItemRenderer)是ListBase类列表控件的重要属性,我们在平常工作中会经常自定义项目渲染器以实现该类控件的特殊显示效果。这一次我们将讲述项目渲染器的常见用法。
默认的项目渲染器取决于组件类。TileList 和HorizontalList 类使用TileListItemRenderer;我们可以指定嵌入式、内嵌或自定义项目渲染器,其中嵌入式是主流,我们主要讲述这种方式。
使用项目渲染器一个普遍的问题是状态的保存。很多网友会也这样的经历,拖动指定了图片项目渲染器的List后 会出现奇怪错位,或者拖动指定了CheckBox项目渲染器的DataGrid后不能正确保存其状态。这是因为ListBase类列表控件并不是很简单地 把数据一次显示。为了提高运行效率,组件在处理数据时,只是创建了适当数量的项目渲染器,来完成显示区域的数据显示。当显示区域发生变化或者拉动滚动条 时,组件只是更新项目渲染器的数据。拿List组件来说,如果数据源只有一条数据,显示区域可以同时显示十条,则开始时只创建一个项目渲染器,添加一条数 据,再创建一个新的项目渲染器。当数据量超过显示区域的最大值10时,就不再创建新的itemRenderer,而是回收利用现有资源。
明白了这个原理对我们要讲的实例也说很好理解了。点击此处查看本实例的效果,点击此处下载本实例的源码。当然也可以点击右键选择View Source查看下载源码。
显然,为自定义Image控件动态设定值时不能放在creationComplete事件中,因为creationComplete事件只执行一次,可以考虑使用动态绑定、调用dataChange事件或者覆盖set data方法。BindingRenderer.mxml、DataChangeRenderer.mxml和SetDataRenderer.mxml就是使用这几种方法而写的项目渲染器。其中动态绑定方法应该是最简单的。
如果要调整控件位置,则需要覆盖updateDisplayList方法。在 MultiIconRenderer.mxml中,我们使用了三个自定义Image控件,而每一行数据并不一定对应三个属性值,此时我们一定要将属性值为 空的自定义Image控件的source设定为null来预留其位置,不然拖动滑条会出现位置错乱的现象。当然为了右对齐图标,得讲究一些技巧:如果最右 边的自定义Image控件为空,那么它前面的两个自定义Image控件向右移一个horizontalGap,依次移动。当然了,还可以将 horizontalGap初始化为0,然后将透明Icon图片留一些空白让控件之间看起来有空隙。
至于怎样在项目渲染器访问主调用应用中的成员,可用Application.application或 parentApplication来引用;反过来,主调用应用要访问项目渲染器中的成员,一般都是通过在项目渲染器先派发事件,然后在主调用应用中注册 事件侦听器来实现。如MultiIconRenderer.mxml。
所以说,如果控件属性与XML属性一一对应,这种数据结构是合理的,编码简单而且扩展性很好;如果控件属性并不对应XML属性或者它们之间不是一一对应,我们就不得不硬编码了。
本文来源于 冰山上的播客 http://xinsync.xju.edu.cn , 原文地址:http://xinsync.xju.edu.cn/index.php/archives/2635
分享到:
相关推荐
### Flex ItemRenderer 的详细教程 #### 一、ItemRenderer 概述 在 Flex 开发中,ItemRenderer 是一种非常强大的工具,它允许开发者...掌握 ItemRenderer 的使用方法将大大提高 Flex 应用程序的灵活性和功能多样性。
在本文中,将首先介绍内联itemRenderer的概念和使用方法,然后探讨itemRenderer的设计目的和Flex框架中的重用机制。接着,会通过示例代码来展示如何创建和使用itemRenderer,以及如何根据数据动态地更改itemRenderer...
本文将深入探讨Flex中ItemRenderer的使用方法。 首先,我们需要理解ItemRenderer的基本概念。ItemRenderer是一个轻量级组件,用于呈现数据列表中的单一数据项。当数据提供者中的每一项数据都需要不同的外观或行为时...
itemRenderer通常与List、DataGrid等数据绑定组件一起使用,通过设置其`itemRenderer`属性来指定自定义的渲染器类。 ### 二、itemRenderer的使用 1. **创建itemRenderer组件** 要创建一个itemRenderer,首先需要...
**方法二:使用MXML来定义自定义ItemRenderer** 1. 创建一个新的MXML文件,将其基类设置为IconItemRenderer。 2. 在MXML标记中,可以声明并配置需要的组件,如Button,Image等。 3. 使用`data`属性来绑定这些组件的...
本文将深入探讨Flex项呈示器(ItemRenderer)的概念、使用方法,以及如何根据需求定制它来展示用户信息,如头像和等级。 ## 一、Flex项呈示器(ItemRenderer)简介 Flex项呈示器是Adobe Flex框架中的一个组件,其...
3. **覆盖`updateDisplayList()`方法**: 这是ItemRenderer生命周期的关键方法,用于设置组件的大小和位置,以及绘制和布局UI元素。在这里,你可以根据数据项的属性来调整UI元素的样式。 4. **应用ItemRenderer**: ...
本教程将深入探讨如何创建和使用ActionScript自定义ItemRenderer,以及如何实现与上一个示例相同的效果。 首先,理解ItemRenderer的重要性。在Flex或Flash Builder等开发环境中,列表视图(如List、DataGrid等)...
在IT行业中,"itemRenderer test"可能涉及到的是一个Flex或ActionScript项目,因为文件名包含".as"和".mxml"后缀,这些都是Adobe Flex框架使用的编程语言和标记语言。这些文件是构建用户界面(UI)组件的重要部分,...
具体到绘制线条的代码,根据不同的lineStyle值(dotted、solid、none),使用Graphics类的lineStyle()方法设置线条样式,然后使用lineTo()方法绘制线条。例如,绘制虚线的代码可能如下: ```actionscript graphics....
在本文中,使用的是AdvancedDataGrid对象。通过这个对象,可以访问到DataGrid的所有列(columns),然后根据ListData对象的columnIndex属性,可以获取到对应的DataGridColumn对象。这个对象实例允许访问DataGrid中...
- 如果需要为特定数据项使用不同的ItemRenderer,可以设置`itemRendererFunction`属性,这是一个返回ItemRenderer实例的函数。 4. **ItemRenderer的生命周期**: - 当数据项首次出现在视图中时,Flex会创建一个...
此外,复用机制意味着一个`ItemRenderer`实例可能会被多次使用,因此在`commitProperties`方法中处理数据更新时要特别注意。 8. **使用`Flex`库中的内置`ItemRenderers`**:Flex提供了一些预定义的`ItemRenderers`...
为了提高性能,避免不必要的重绘,可以在`itemRenderer`中使用`commitProperties()`方法来检查是否真的需要更新颜色。另外,确保数据提供者的变化不会导致所有行都重新渲染,而只更新发生变化的行。 通过以上步骤...
本系列将深入探讨Flex的itemRenderer及其高效使用方法。 首先,我们了解一个基本概念:Flex的列表控件并不为每个数据项创建单独的渲染器实例。比如,如果你有一个包含1000条记录的列表,但只有10行在屏幕上可见,...
6. 在DataGrid中使用自定义ItemRenderer:在DataGrid的`itemRenderer`属性中指定我们的自定义ItemRenderer类。例如,`<mx:DataGridColumn dataField="name" itemRenderer="com.mycompany.CustomCellRenderer" />`。 ...
2. 在`itemRenderer`中,我们需要覆盖`data`属性的setter方法,因为每当`itemRenderer`的数据发生变化时,这个方法会被调用。在这里,我们将检查新值是否为数字类型,如果是,则将其转换为字符串并显示在`Label`上。...
### 方法一:使用ItemRenderer 1. **定义ItemRenderer**: 首先,我们需要创建一个自定义的ItemRenderer类,该类继承自`mx.controls.listClasses.ListItemRenderer`或`spark.components.supportClasses....