Flex中itemRenderer使用(一)内联渲染器
http://nianshi.iteye.com/blog/743824
Flex 提供许多控制, 它们可以按不同方式显示大量数据。List 控制自己、DataGrid、Tree 以及包括图表和 AdvancedDataGrid 在内的可视类。默认情况下, Flex 列表控制将提供的数据显示为简单文本。但 Flex 的能耐远不止此, 列表控制提供了一种使用 itemRenderer 对其内容进行自定的方式。通过允许您使用 itemRenderer 完全控制列表每行 (或单元格) 的内容, Flex 使您能够编写出更引人注目、更具创意、更实用的应用程序。
本系列讨论 Flex itemRenderer 以及如何高效、有效地使用它们。本系列的第一部分侧重于内联 itemRenderer, 它们写入描述 List 控制的 MXML 标记中。之后的文章讨论使用 MXML 和 ActionScript 且更为复杂的 itemRenderer。
循环使用渲染器
人们经常尝试从列表外访问 itemRenderer。例如, 由于您刚从服务器那里收到新数据, 您可能要将 DataGrid 中第五行的第四列变为绿色。获取那个 itemRenderer 实例并在外部修改它对于 Flex 框架和组件模型而言是一个大工程。
要理解 itemRenderer, 您必须理解它们为何变成现在这样以及我们当初设计它们时的目的。假设您要显示 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 代码, 如下:
Java代码
1.
2.
3.
4.
5.
6.
我将从使用
Java代码
1.
2.
3.
4.
5.
6.
7.
这个 itemRenderer 太简单了, 可能使用 labelFunction 会更好, 但它至少允许您专注于重要部分。首先, 内联 itemRenderer 使用
您在
换言之, 行 1 的 itemRenderer 实例现在可能将其 data.author 设置为“Peter F. Hamilton”, 但当它滚出视图时, itemRenderer 被循环使用并且 (该 itemRenderer) 的data 属性现在可能将其 data.author 设置为“J.K. Rowling”。滚动列表时, 所有这一切都会自动进行－您不必操心。
以下是复杂一些的内联 itemRenderer, 它还是使用
Java代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
确实区别不大。这次不是
数据网格
也可以将内联 itemRenderer 用于 DataGrid。以下是应用于列的一个示例:
Java代码
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11. override public function set data( value:Object ) : void {
12. super.data = value;
13. var today:Number = (new Date()).time;
14. var pubDate:Number = Date.parse(data.date);
15. if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
16. else setStyle("backgroundColor",0xffffff);
17. }
18. ]]>
19.
20.
21.
22.
23.
24.
25.
26.
27.
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);
}
]]>
如您所见, 这次比前两个要复杂得多, 但结构相同:
本例中的
outerDocumentscope 也更改了。我的意思是, 从
冒泡事件 现在我们来看另一个更复杂的示例。这是一个使用相同数据的 TileList。
Java代码
1.
2. dataProvider="{testData.book}" height="232" columnWidth="275"
3. rowHeight="135" >
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19. var e:BuyBookEvent = new BuyBookEvent();
20. e.bookData = data;
21. dispatchEvent(e);
22. ]]>
23.
24.
25.
26.
27.
28.
29.
30.
31.
dataProvider="{testData.book}" height="232" columnWidth="275"
rowHeight="135" >
var e:BuyBookEvent = new BuyBookEvent();
e.bookData = data;
dispatchEvent(e);
]]>
这个 itemRenderer 与 DataGrid 中使用的那个十分相似, 但“购买”按钮的 click 事件不使用 outerDocument 调用函数。在本例中, click 事件会创建一个自定事件, 后者通过 TileList 从 itemRenderer 中冒出, 并由可视链中的较高组件接收。
这是一个很常见的问题: 您有一个 itemRenderer, 而它包含一些交互控制, 通常是 Button、LinkButton 或其他单击时会导致发生特定动作的组件。可能是删除行或是本例中的购买书籍。
指望 itemRenderer 完成这个工作并不合理。毕竟, itemRenderer 只负责让列表看上去美观。事件 bubbling 允许 itemRenderer 将这个工作转交给他人。自定事件此时派上了用场, 因为这个事件与行中的数据相关；为何不将数据包含在事件中呢？如果那样, 事件接收方就不必苦苦搜寻它了。
结论
使用内联 itemRenderer 是一种快速自定列表外观的好方法。考虑将内联 itemRenderer 作为单独的 ActionScript 类－它们毕竟像有作用范围一样。如果必须引用包含文件中的函数或属性, 可使用 outerDocument 标识符更改作用范围。如果需要根据与 itemRenderer 的交互结果传达传递信息, 可使用自定冒泡事件。
并且记住: 不要试图抓住不放－它们将循环使用。它们只负责处理收到的数据。
Flex itemRenderer
转载于:https://blog.51cto.com/4545079/1316030