理解 Flex itemRenderer - 第 1 部分: 内联渲染器

循环使用渲染器
人们经常尝试从列表外访问 itemRenderer。例如, 由于您刚从服务器那里收到新数据, 您可能要将 DataGrid 中第五行的第四列变为绿色。获取那个 itemRenderer 实例并在外部修改它对于 Flex 框架和组件模型而言是一个大工程。

要理解 itemRenderer, 您必须理解它们为何变成现在这样以及我们当初设计它们时的目的。在此, 当我用到“我们”时, 我指的是 Adobe Flex 设计小组。我与它没有关系。言归正传, 假设您要显示 1,000 条记录。如果您认为列表控制会创建 1,000 个 itemRenderer, 您就错了。如果列表只显示 10 行, 它会创建约 12 个 itemRenderer－这些足以显示各个可见行, 多出的几个则用于缓冲和性能。列表最初显示行 1–10。当用户滚动这个列表时, 它现在可能显示行 3-12。但那 12 个 itemRenderer 仍在那里: 及时滚动列表后, 也不会新建任何 itemRenderer。

以下是 Flex 执行的操作。滚动列表时, 那些依然显示相同数据 (行 3-10) 的 itemRenderer 将向上移动。它们并未发生任何变化, 只是移到了新位置。之前显示行 1 和 行 2 数据的 itemRenderer 现在移到行 10 的 itemRendere 下。然后, 为那些 itemRenderer 提供行 11 和 行 12 的数据。换言之, 除非您调整列表大小, 否则将重用/循环使用那些相同的 itemRenderer－它们只是移到新位置并且现在显示新数据。

Flex 的这一行为在特定编程环境中使情况变得更复杂。例如, 如果要更改第五行的第四列中某个单元格的背景色, 请注意如果用户滚动了该列表, 则该单元格的 itemRenderer 现在可能显示第二十一行的内容。

那么怎样进行这类更改呢？

itemRenderer 必须根据给它们显示的数据更改自己。如果列表的 itemRenderer 要根据数据值更改其颜色, 它必须查看获得的数据并更改自己。
内联 itemRenderer

我在本文中使用内联 itemRenderer 说明如何解决这个问题。内联 itemRenderer 直接写入 MXML 文件中列表控制出现的位置。我在下一篇文章中将说明如何编写外部 itemRenderer。内联 itemRenderer 最简单, 一般用于十分简单的渲染器或用于为较大的应用程序构建原型。内联 itemRenderer 本身并没有问题, 但随着代码变得复杂, 最好将它提取到自己的类中。

我将在所有示例中使用相同的数据: 一组书籍相关信息－作者、书名、出版日期和缩览图图像等。每个记录是一段 XML 代码, 如下:

<book>
    <author>Peter F. Hamilton</author>
    <title>Pandora's Star</title>
    <image>assets/pandoras_star_.jpg</image>
<date>Dec 3, 2004</date>
</book>

这个 itemRenderer 太简单了, 可能使用 labelFunction 会更好, 但它至少允许您专注于重要部分。首先, 内联 itemRenderer 使用 <mx:itemRenderer> 标记定义它。这个标记包含 <mx:Component> 标记。这个标记必须放在这里, 因为它会告诉 Flex 编译器您正在定义一个组件内联。我马上会说明这到底是什么意思。

您在 <mx:Component> 标记中定义 itemRenderer。对于本例, 它是一个 <mx:Label> 并且文本字段设置为一个数据绑定表达式: {data.author}: {data.title}。这点很重要。List 控制通过设置 itemRenderer 的 data 属性, 为每个 itemRenderer 实例提供 dataProvider 的记录。对于上述代码, 它意味着对于任何给定列表行, 内联 itemRenderer 实例将自己的 data 属性设置为 <book> XML 节点 (如以上节点)。当您滚动列表时, data 属性也会更改, 因为 itemRenderer 被循环用于新行。

换言之, 行 1 的 itemRenderer 实例现在可能将其 data.author 设置为“Peter F. Hamilton”, 但当它滚出视图时, itemRenderer 被循环使用并且 (该 itemRenderer) 的data 属性现在可能将其 data.author 设置为“J.K. Rowling”。滚动列表时, 所有这一切都会自动进行－您不必操心。

以下是复杂一些的内联 itemRenderer, 它还是使用 <mx:List> 控制:

<mx:List x="372" y="67" width="351" height="190" variableRowHeight="true" dataProvider="{testData.book}">
   <mx:itemRenderer>
       <mx:Component>
           <mx:HBox >
               <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
               <mx:Label text="{data.author}" width="125" />
               <mx:Text  text="{data.title}" width="100%" />
           </mx:HBox>
       </mx:Component>
   </mx:itemRenderer>
</mx:List>

确实区别不大。这次不是 <mx:Label>, itemRenderer 是一个 <mx:HBox> 并包含 <mx:Image>、<mx:Label> 和 <mx:Text> 控制。数据绑定依然将可视与记录关联在一起。

数据网格

也可以将内联 itemRenderer 用于 DataGrid。以下是应用于列的一个示例:

<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
    <mx:columns>
        <mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" />
        <mx:DataGridColumn headerText="Author" dataField="author" width="125"/>
        <mx:DataGridColumn headerText="Title" dataField="title">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox paddingLeft="2">
                        <mx:Script>
                        <![CDATA[
                            override public function set data( value:Object ) : void {
                                super.data = value;
                                var today:Number = (new Date()).time;
                                var pubDate:Number = Date.parse(data.date);
                                if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
                                else setStyle("backgroundColor",0xffffff);
                            }
                        ]]>
                        </mx:Script>
                        <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
                        <mx:Text width="100%" text="{data.title}" />
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

如您所见, 这次比前两个要复杂得多, 但结构相同: <mx:itemRenderer> 包含一个 <mx:Component> 定义。

<mx:Component> 是为了提供一个 MXML 语法, 用于在代码中创建一个 ActionScript 类。想象一下, 剪切 <mx:Component> 块中出现的代码并将它放入一个单独文件中并提供一个类名称。当您查看内联 itemRenderer 时, 它看上去就像一个完整的 MXML 文件, 不是吗？有根标记 (本例中为 <mx:HBox>), 甚至 <mx:Script> 块。

本例中的 <mx:Script> 块用于覆盖 set data 函数, 使得 itemRenderer 的背景色可以更改。在本例中, 无论书籍的未来出版数据为何时, 背景将从白色更改为其他颜色。记住, itemRenderer 是循环使用的, 所以如果测试失败, 还必须将颜色设置回白色。否则, 当用户滚动列表时, 所有 itemRenderer 最终将变为紫色。

outerDocument

scope 也更改了。我的意思是, 从 <mx:Component> 中定义的变量仅作用于那个组件/内联 itemRenderer。同样, <mx:Component> 外的内容在不同的作用范围内, 就像这个组件是在另一个文件中定义的那样。例如, 假设您为这个 itemRenderer 添加了一个 Button, 允许用户从在线零售商那里购买书籍。Button 调用它们的 click 事件上的函数, 所以您可以如下定义这个按钮:

<mx:Button label="Buy" click="buyBook(data)" />

如果在文件的 <mx:Script> 块中定义 buyBook() 函数, 会显示一个错误, 指出 buyBook() 是一个未定义的方法。这是因为 buyBook() 是在文件的作用范围内而不是在 <mx:Component> 的作用范围内定义的。由于这是一个典型用例, 使用 outerDocument 标识符可以避开这个问题:

<mx:Button label="Buy" click="outerDocument.buyBook(data)" />

outerDocument 标识符将作用范围更改为查找文件或外部文档, 并引用 <mx:Component>。现在请注意: 这个函数必须是公共函数, 而不是受保护或私有函数。记住, <mx:Component> 被视为外部定义的类。