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.as
package 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>