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

第一部分：预备知识----认识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:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="top"

implements="mx.controls.listClasses.IDropInListItemRenderer">

<mx:Script>

<![CDATA[

import mx.controls.listClasses.BaseListData;

[Bindable]

private var standardPrice:String;

override public function set data(value:Object):void{

super.data=value;

standardPrice=cf.format(Number(data.price));

}

private var _listData:BaseListData;

public function get listData() : BaseListData

{

return _listData;

}

public function set listData( value:BaseListData ) : void

{

_listData = value;

}

]]>

</mx:Script>

<mx:Image source="{data.image}"/>

<mx:VBox width="100%" height="100%">

<mx:Label text="{data.name}"/>

<mx:Label text="{standardPrice}"/>

<mx:Button label="buy"/>

</mx:VBox>

<mx:CurrencyFormatter id="cf"/>

</mx:HBox

虽然，涉及到的知识有些复杂但是步骤还是很简单的：
第一步：在跟标签写入implements="mx.controls.listClasses.IDropInListItemRenderer"
第二步：导入import mx.controls.listClasses.BaseListData;
第三步：把相关的代码拷入。
好了，现在的问题是，listData是做什么用的？因为我们实现IDropInListItemRenderer接口就是为了实现这个属性。它是做什么，有些复杂，可以去看参考资料，这里就不粘贴了。只说说怎么用它好了。
回到itemRenderer文件：处理buy按钮的事件：

<mx:Button label="buy">

<mx:click>

<![CDATA[

(listData.owner as MyTileList).disPatchBookEvent(data);

]]>

</mx:click>

</mx:Button>

现在回到list control所在的文件，捕获事件：

<local:MyTileList columnWidth="200" rowHeight="150" buyBook="doBuy(event)"

itemRenderer="BookInfoRenderer" dataProvider="{bookInfo.book}"/>

看到了吗？方便的地方就是我可以在标签里直接buyBook="doBuy(event)"这样写。
再加上处理函数doBuy(evnt)就大功告成了.

private function doBuy(event:BuyBookEvent):void{

mx.controls.Alert.show(event.bookData.name+":"+event.bookData.price);

}

好了就先写到这里吧，已经写了这么多了，O(∩_∩)O~。

例子虽然简单，可是内容还是很多的……
至于继承自UIComponent的itemRenderer，大概也是这个思路，有空再说吧！