Understanding Flex itemRenderers

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html 

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt2.html 

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt3.html 

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt4.html 

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html 

第一部分

Flex提供了一些控件以不同方法显示大量数据。有List控件,DataGrid,Tree,和可视化类：图表和AdvancedDataGrid.默认情况下，Flex list 控件将传入的简单文本显示出来。但是Flex比这强大的多。list控件使用itemRender自定义它们的内容。使用itemRender，你可以完全控制每一行或每个cell的内容。Flex有能力让你写出比以往更强劲、更有创造性、更有用的程序。 

 

此系文章 论文Flex的itemRenderers以及如何高效地使用。此系列文章的第一篇主要介绍内联itemRenderers。它定义在list控件的MXML标签中。以后的文章展示了使用MXML和ActionScript的更复杂的itemRenderers。

 

Recycling Renderers

很多人都试图从外部的list控件中访问一个itemRender。例如，你要让DataGrid控件的第四列第五行变绿，当你刚刚从服务器收到新数据后。得到一个itemRender实例并在外部修改,这是Flex framework和组件模型的一个巨大breech。

为了理解itemRenderers，你要理解为什么及是什么，以及当我们设计他们时我们的意图。当我说我们是，我的意思是指Adobe Flex 工程师团队。我并不是指其它。假设你有1000条记录想显示。如果你想让list控件创建1000个itemRenderers，这并不合适。如果list仅显示10行，list创建12个itemRenderers，这足够显示出每一行了，外带一个buffering和performance reasons对。list控件初始显示1到10行。 当用户滚动list时，它可能显示3-12行。但是12个itemRenderers 仍在:没有新建itemRenderers, 甚至list控件流动以后。

Flex是这样做的。当list滚动时，itemRenderers向上移动。Aside from being in a new location, they haven't changed. The itemRenderers that were showing the data for rows 1 and 2 are now moved below the itemRenderer for row 10. Then those itemRenderers are given the data for rows 11 and 12. In other words, unless you resize the list, those same itemRenderers are reused—recycled—to a new location and are now showing new data.

This behavior by Flex complicates the situation for certain programming scenarios. For instance, if you want to change the background color of the cell in the fourth column of the fifth row, be aware that the itemRenderer for that cell may now be showing the contents of the twenty-first row if the user has scrolled the list.

你如何像这样改变它们呢？

当itemRenderers依赖的数据被赋值时,itemRenderers必须改变自己来显示这些数据。如果itemRenderer支持按数据值改变颜色，那么它必须观察数据并改变自己。

inline itemRenderers

在此文中，我将使用内联itemRenderers来描述我的答案。 一个内联的itemRenderer直接写在list控件出现处的MXML文件中。 在下一篇文章中，我将展示如何写一个外部的itemRenderers。内联itemRenderer复杂度低，广泛使用在大型程序中，本身也很简单。内联itemRenderers没有错，但当代码复杂了，最好将它抽出来放到类中。

在所有的例子中，我将使用同样的数据：一个书的作者、标题、公共信息，缩略图。 每一条记录是一个XML节点。如下所示：

 <book>

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

我将使用<mx:List>控件，开始编写一个简单的itemRenderer。 Here, the author is listed followed by the title of the book.

<mx:List x="29" y="67" dataProvider="{testData.book}" width="286" height="190">
    <mx:itemRenderer>
        <mx:Component>
            <mx:Label text="{data.author}: {data.title}" />
        </mx:Component>
    </mx:itemRenderer>

</mx:List> 

<me>

可独立编译的代码

 <?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    
    <mx:XML id="testData" xmlns="">
        <root>
        <book>
            <author>Peter F. Hamilton</author>
            <title>Pandora's Star</title>
            <image>assets/pandoras_star_.jpg</image>
            <date>Dec 3, 2004</date>
        </book>
        <book>
            <author>Peter F. Hamilton</author>
            <title>Judas Unchained</title>
            <image>assets/judas_unchained.jpg</image>
            <date>Feb 28, 2006</date>
        </book>
        </root>
    </mx:XML>
    
    <!-- Simple inline itemRenderer 
    -->
    <mx:List x="29" y="67" dataProvider="{testData.book}" width="286" height="190">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Label text="{data.author}: {data.title}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:List>
</mx:Application>

运行 

</me> 

这个itemRenderer很简单，使用labelFunction可能更好些。 但它至少让你注意到时了重要的部分。首先，inline itemRenderer使用 <mx:itemRenderer>标签定义糨. 此标签里是一个 <mx:Component> 标签. 此标签必须在此处。因为它告诉Flex编辑器你定义了一个内联组件。我一会将解释这是什么意思。

在  <mx:Component> 标签里，你定义你的itemRenderer。如下例，它是一个 <mx:Label>。它的文本域绑定了一个表达式 {data.author}: {data.title}。这非常重要。List控件 The List control gives each itemRenderer instance the record of the dataProvider by setting the itemRenderer's dataproperty. Looking at the code above, it means that for any given row of the list, the inline itemRenderer instance will have its data property set to a <book> XML node (such as the one above). As you scroll through the list, thedata property is being changed as the itemRenderers are recycled for new rows.

In other words, the itemRenderer instance for row 1 might have its data.author set to "Peter F. Hamilton" now, but when it scrolls out of view, the itemRenderer will be recycled and the data property—for that same itemRenderer—may now have its data.author set to "J.K. Rowling". All of this happens automatically as the list scrolls—you don't worry about it.

Here's a more complex inline itemRenderer using the <mx:List> control again:

 <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>