Flex中Tile结合Repeater的用例

1，流程图及文件结构

                  

2，代码

<?xml version="1.0" encoding="utf-8"?><!--book.xml--><books><book><ISBN>1248593959385</ISBN><bookName>大秦帝国</bookName><price>369.99</price><author>孙皓晖</author><publication>河南文艺出版社</publication><quantity>10</quantity><category>小说</category><img>../assets/imgs/DaQinDiGuo_S.jpg</img></book><book><ISBN>1248594566656</ISBN><bookName>Java编程思想</bookName><price>81.99</price><author>泰戈尔</author><publication>机械工业出版社</publication><quantity>32</quantity><category>计算机</category><img>../assets/imgs/ThinkingInJava_S.jpg</img></book></books>

// Book.aspackage model{[Bindable]public class Book{public var ISBN:String;public var name:String;public var price:Number;public var image:String;public var qty:int;public var author:String;public var category:String;public function Book(){}}}

<?xml version="1.0" encoding="utf-8"?><!--BookItem1.mxml--><mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="*"title="{bookItem.category}"status="{'库存数：'+' '+bookItem.qty}"horizontalAlign="center" layout="vertical" titleIcon="@Embed('../assets/imgs/user.png') "xmlns:ns1="components.*"height="320" width="240"><mx:Script><![CDATA[import model.Book;[Bindable]public var bookItem:Book=new Book();trace("public var bookItem:Book=new Book()");private function closeMe():void{outOfStock.close();}]]></mx:Script><mx:Image id="img" source="{bookItem.image}" height="70%" width="100%"scaleContent="true" horizontalAlign="center"/><mx:Text text="{bookItem.name}" width="90%" textAlign="center" /><mx:Text text="{'作者:'+bookItem.author}" width="90%" textAlign="center"/><mx:HBox width="100%"><mx:Spacer width="100%"/><mx:Button id="home" height="18" width="18" buttonMode="true"skin="@Embed('../assets/imgs/home.png')" toolTip="主页"mouseOver="status='回到主页'"/><mx:Button id="purchase" height="18" width="18"buttonMode="true"skin="@Embed('../assets/imgs/cart.png')" toolTip="购买"mouseOver="status='放入购物车'"/><mx:Button id="more" height="18" width="18"buttonMode="true"skin="@Embed('../assets/imgs/info.png')" toolTip="更多信息"mouseOver="status='查看图书详细信息'"/><mx:PopUpButton id="outOfStock" height="18" width="18"buttonMode="true" toolTip="缺货登记"skin="@Embed('../assets/imgs/outOfStock.png')"mouseOver="status='缺货登记'"><mx:popUp><ns1:OutOfStockRegister close="closeMe()"/></mx:popUp></mx:PopUpButton></mx:HBox></mx:Panel>

<?xml version="1.0" encoding="utf-8"?><!--OutOfStockRegister.mxml--><mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showCloseButton="true" title="缺货登记"><mx:Form width="100%"><mx:FormItem label="采购数量"><mx:TextInput id="quantity"/></mx:FormItem><mx:FormItem label="通知邮件"><mx:TextInput id="email"/></mx:FormItem></mx:Form></mx:TitleWindow>

<?xml version="1.0" encoding="utf-8"?><!--main.mxml--><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" creationComplete="srv.send()"xmlns:components="components.*"><mx:Script><![CDATA[import mx.controls.Alert;import model.Book;import mx.rpc.events.ResultEvent;import mx.collections.ArrayCollection;[Bindable]private var catalog:ArrayCollection=new ArrayCollection();private function loadBookShelf(event:ResultEvent):void{/* 关键：将事件的结果以book为单位存到ArrayCollection中 */var bookShelf:ArrayCollection=event.result.books.book;var tempBook:model.Book=new Book();for(var i:int=0;i<bookShelf.length;i++){tempBook=new Book();/* 关键：新建一个对象，接收bookShelf里面的一个book */var acBook:Object=bookShelf.getItemAt(i);tempBook.author=acBook.author;trace(tempBook.author);tempBook.image=acBook.img;tempBook.name=acBook.bookName;tempBook.category=acBook.category;tempBook.qty=acBook.quantity;catalog.addItem(tempBook);trace(catalog.getItemAt(i).name);}}]]></mx:Script><!--关键：使用HTTPService访问xml文件，并将结果放到loadBookShelf中处理--><mx:HTTPService id="srv" url="data/book.xml" result="loadBookShelf(event)"/><mx:Tile width="100%"><mx:Repeater id="rp" dataProvider="{catalog}"><!--关键：将rp.currentItem强制类型转换为Book并赋值给bookItem--><components:BookItem1 bookItem="{rp.currentItem as Book}" /></mx:Repeater></mx:Tile></mx:Application>

3，运行结果