模拟网上书店显示各个书目录的页面

通过取得一个XML文件的数据，显示在页面中
1.定义一个book.xml
<?xml version="1.0" encoding="utf-8"?>
<books>
<book>
<bookName>大清帝国</bookName>
<author>涂平</author>
</book>
<book>
<bookName>编程思想</bookName>
<author>风云</author>
</book>
<book>
<bookName>计算机</bookName>
<author>小弟</author>
</book>
</books>
2.定义一个Book.as
package vo
{
[Bindable]
public class Book
{
public var ISBN:String;
public var name:String;
public var price:Number;
public var author:String;
public function Book()
{
}

}
}
3.定义BookItem.mxml 模块化显示的页面
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="{bookItem.name}">
<mx:Script>
<![CDATA[
import vo.Book
[Bindable]
public var bookItem:Book = new Book();
//将bookItem绑定，为以后显示数据

]]>
</mx:Script>
<mx:Image id="img" source="images/1.gif" scaleContent="true" horizontalAlign="center">

</mx:Image>
<mx:Text text="{bookItem.name}" textAlign="center"/>
<mx:Text text="{'作者 '+bookItem.author}"/>
</mx:Panel>
4.主应用文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="*" creationComplete="srv.send()">

//srv.send(),srv表示的是httpservice的ID，固定调用它的send方法去取数据
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import vo.Book;
[Bindable]
private var catalog:ArrayCollection = new ArrayCollection();

private function loadBookShelf(event:ResultEvent):void{
var bookShelf:ArrayCollection = event.result.books.book;

//event.result.books.book;

//event.result固定写法，取得服务器返回的数据。后面跟的books.book表示从XML文件的哪个节点开始取数据

var tempBook = new Book();
for(var i:int=0;i<bookShelf.length;i++)
{
tempBook = new Book();
var acBook:Object = bookShelf.getItemAt(i);
tempBook.name = acBook.bookName;
tempBook.author = acBook.author;
this.catalog.addItem(tempBook);
//acBook.bookName 中的bookName表示的是XML文件中的bookName节点的属性，将该属性赋值给tempBook.nam
}
}
]]>
</mx:Script>

<mx:HTTPService id="srv" url="data/book.xml" result="loadBookShelf(event)"/>

//该段是取服务器数据的地方，result表示的是服务器回调函数
<mx:Tile width="100%">
<mx:Repeater id="rp" dataProvider="{this.catalog}">
<components:BookItem bookItem="{rp.currentItem as Book}"/>
</mx:Repeater>
</mx:Tile>
</mx:Application>