Flex 3处理数据 访问 XML 数据2

本文介绍如何使用E4X进行XML数据的读取与更新,并通过实例演示了如何在一个Flex应用中实现数据绑定,具体包括从XML结构中读取数据及为XML元素和属性赋值。

对XML元素与属性赋值


使用@和点( . )操作符不只可以从XML结构中读取数据的值,也可以为其赋值。

在下边的例子中,创建一个XML结构master-detail视图。master视图包含一个DataGrid 组件,用来显示书的列表。detail视图包含控件,用来编辑master视图中当前选中的图书。

master 和detail视图使用数据绑定和E4X来读取和更新XML中的数据。

下边的例子通过一下方法使用E4X:

  • myBooks.book引用book元素的XMLList对象。
  • myBook.book[selectedBookIndex]引用当前被选中的book元素。
  • myBook.book[selectedBookIndex].title引用当前被选中book元素的子元素title

要使用当前被选中图书的title更新TestInput控件tiltleInput,需要绑定TestInput控件tiltleInput的 text属性到myBooks.book[selectedBookIndex].title。类似地,要使用用户最终输入更新XML,当 TestInput控件tiltleInput的text属性改变时,将TestInput控件tiltleInput的text属性的值赋值给 myBooks.book[selectedBookIndex].title。

detail视图中的另一个组件使用同样的方法正确的工作。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="470" creationComplete="myDataGrid.selectedIndex=0;" > <mx:Script> <!--[CDATA[ // Model: XML structure describing // some of the books in my collection. [Bindable] private var myBooks:XML = <books> <book ISBN="1590595181"> <title>Foundation ActionScript Animation: Making Things Move</title> <author>Keith Peters</author> <amazonUrl>http://tinyurl.com/npuxt</amazonUrl> </book> <book ISBN="1582346194"> <title>Send in the Idiots: Stories from the Other Side of Autism</title> <author>Kamran Nazeer</author> <amazonUrl>http://tinyurl.com/lo5ts</amazonUrl> </book> </books> ]]--> </mx:Script> <!-- Keep track of the currently selected book --> <mx:Number id="selectedBookIndex">{myDataGrid.selectedIndex}</mx:Number> <!-- User interface --> <mx:Panel title="Assigning XML data" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" > <!-- Master view: Display all books --> <mx:DataGrid id="myDataGrid" dataProvider="{myBooks.book}"> <mx:columns> <mx:DataGridColumn dataField="@ISBN" headerText="ISBN" width="85"/> <mx:DataGridColumn dataField="title" headerText="Title"/> <mx:DataGridColumn dataField="author" headerText="Author"/> <mx:DataGridColumn dataField="amazonUrl" headerText="Web site"> <mx:itemRenderer> <mx:Component> <mx:LinkButton label="Visit" click="navigateToURL(new URLRequest(data.amazonUrl), 'blank');" /> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <!-- Detail view: Display currently selected book for editing --> <mx:Form width="100%" autoLayout="false"> <mx:FormHeading label="Edit book details"/> <mx:FormItem label="ISBN:" width="100%"> <mx:TextInput id="isbnInput" width="100%" text="{myBooks.book[selectedBookIndex].@ISBN}" change="{myBooks.book[selectedBookIndex].@ISBN = isbnInput.text}" /> </mx:FormItem> <mx:FormItem label="Title:" width=" 100%"> <mx:TextInput id="titleInput" width="100%" text="{myBooks.book[selectedBookIndex].title}" change="{myBooks.book[selectedBookIndex].title = titleInput.text}" /> </mx:FormItem> <mx:FormItem label="Author:" width="100%"> <mx:TextInput id="authorInput" width="100%" text="{myBooks.book[selectedBookIndex].author}" change="{myBooks.book[selectedBookIndex].author = authorInput.text}" /> </mx:FormItem> <mx:FormItem label="Amazon Url" width="100%"> <mx:TextInput id="amazonUrlInput" width="100%" text="{myBooks.book[selectedBookIndex].amazonUrl}" change="{myBooks.book[selectedBookIndex].amazonUrl = amazonUrlInput.text}" /> </mx:FormItem> </mx:Form> </mx:Panel> </mx:Application>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值