flex3:利用itemRenderer创建在线书店的图书信息显示页面

flex3:利用itemRenderer创建在线书店的图书信息显示页面2011-01-05 博客园 orchid第一部分：预备知识----认识itemRenderer

我们经常用itemRenderer,使用List,DataGrid,TileList等组件时经常动不动就来个itemRenderder。虽然很熟悉了，但是我打算今天还是再好好认识一下它。

使用itemRenderer有两点需要注意：

1，对于flex框架，使用itemRenderer很件很耗费内存的事，如果可以避免尽量不要用。

2，一个误会

假设我有一个List组件，与他绑定的数据有1000条，现在我要渲染这个List。是不是要创建1000个itemRenderer实例啊？这是个误会。

再假设，我这个List只能显示10个条目，那么或许flex或许只会给你创建12个itemRender实例,至于为什么多出两个，是出于缓存和表现的原因。你拖动滚动条，第一条和第二条项目消失了，但是它们对应的itemRenderder只是改变了位置，加载了新的数据，还显示第十一和十二条项目。所以，itemRenderer是重用（recycled）的，这一点得格外注意。不要试图调用第X条的itemRenderer再修改它，因为如果此时它不再显示范围内，第X条对应的itemRenderer就不知道用来显示谁去了？要想改变一个itemRenderer,最好的办法就是根据它的数据来改变它。

第二部分：初级----inline itemRenderers

什么叫inline itemRenderer？这就是跟调用它的组件（以后成为list control）写在一起的那种。这是比较简单的那种。现在我们就用这种的itemRenderer先写个显示书单图书信息的页面。

下面是代码：

<？xml version="1.0" encoding="utf-8"？>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <！[CDATA[
            [Bindable]
    public var bookInfo:XML=
            <books>
                <book>
                    <name>手到病自除</name>
                    <price>20.10</price>
                    <writer>杨奕</writer>
                    <image>bookpic/sdbzc.jpg</image>
                    <instore>yes</instore>
                </book>
                <book>
                    <name>好妈妈胜过好老师</name>
                    <price>17.30</price>
                    <writer>尹建莉</writer>
                    <image>bookpic/hmmsghls.jpg</image>
                    <instore>yes</instore>
                </book>
                <book>
                    <name>货币战争</name>
                    <price>26.90</price>
                    <writer>宋鸿兵</writer>
                    <image>bookpic/hbzz.jpg</image>
                    <instore>no</instore>
                </book>
                <book>
                    <name>不抱怨的世界</name>
                    <price>15.4</price>
                    <writer>鲍温</writer>
                    <image>bookpic/bbydsj.jpg</image>
                    <instore>yes</instore>
                </book>
                <book>
                    <name>历史是个什么玩意儿</name>
                    <price>19.60</price>
                    <writer>袁腾飞</writer>
                    <image>bookpic/lsssmwy.jpg</image>
                    <instore>yes</instore>
                </book>
                <book>
                    <name>不生病的智慧</name>
                    <price>17.20</price>
                    <writer>马悦凌</writer>
                    <image>bookpic/bsbdzh.jpg</image>
                    <instore>no</instore>
                </book>
            </books>
        ]]>
    </mx:Script>
    <mx:TileList dataProvider="{bookInfo.book}" width="600" height="600" variableRowHeight="true" x="100" y="0">
        <mx:itemRenderer>
            <mx:Component>
            <mx:VBox width="150" height="200" horizontalAlign="center">
                <mx:Image source="{data.image}"/>
                <mx:Label text="{data.name}"/>
                <mx:Button label="buy"/>
            </mx:VBox>    
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
</mx:Application