Flex 3快速入门: 处理数据 访问 XML 数据
2009-10-28 15:56
796 查看
本文来自：http://www.airia.cn/FLEX_Directory/accessing_xml_data/
Actionscript 3.0组类基于ECMAScript for XML(E4X)说明(ECMA-357 2第二版)。这些类功能强大，使用简单，对处理XMLdata数据非常有用。相比以前的编程技术使用E4X的开发代码使得XML数据更快。
介绍XML
对XML元素与属性赋值
通过传递数据引用创建XML对象
装配与改变XML对象
查询XML数据
介绍XML
许多服务器端应用程序使用XML数据结构，那么你可以在ActionScript中使用XML类来创建优雅的富互联网应用程序。例如那些链接到Web service的应用。web service是连接应用程序的重要的方法，例如，一个Adobe Flash Player9 应用程序和一个在web服务器上的应用程序通过公共标准，例如Simple Object Access Protocol(SOAP)
在Adobe Flex中，ECMAScript for XML说明书定义了一系列的类和功能来处理XML数据。这些类和函数的集合被称为E4X.两个主要的类是XML和XMLList。
注意：在ActionScript 2.0中有一个XML类。在ActionScript 3.0中，它被重命名为XMLDocument这样就不会与新的，作为E4X一部分的XML类发生冲突了。在ActionScript 3.0中，上一个版本遗留的类——XMLDocument,XMLNode,XMLParser和XMLTag——都被包含在flash.xml包中，主要是为了向下兼容。E4X类是核心类；你需要导入包才能使用他们。本快速说明没有设计对传统的ActionScript 2.0的类逐一细说。想了解他们，查看flash.xml包，在Flex 3 Language Reference中
在下边的例子中，你创建了一个XML文档，命名为myBooks。创建一个XML文档在ActionScript，通过在Actionscript块中书写XML并赋值给一个变量。由于在Flex中，XML是本地数据类型，就像Number或Boolean一样。
myBooks的XML文档包含两个book元素(element)（也被称为node（节点））。第一个book元素拥有4个子元素，名称值title,author,amazonUrl和pageCount。
要通过XML实例访问元素，使用点标示（.）就像存取一个对象的属性一样。那么，举个例子，要获得book节点的引用，你要写成myBooks.book。这就返回了一个XMLList时间，他包含了myBooks的XML中的2个book节点。要存取列表中指定节点，你需要使用数组表示法。例如，要获得第一本数节点的引用，可以写为myBooks.book[0]。如果你使用过ActionScript中的对象和数组，你应该对点操作符和数组语法风格比较熟悉。然而，E4X比这更进一步，可以按指定属性名在XML中搜索节点。
下边的例子中，使用搜索ISBN属性获得第一本书的引用。属性在 E4X中at-sign(@)为前缀描述属性，写为@ISBN。语句myBooks.book.(@ISBN==”159059181”)翻译为“找到一个属性ISBN值等于159059181的book节点”。另一个例子描述更高级的查找技术。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="440" height="400"
initialize="initializeHandler();"
>
<mx:Script>
<![CDATA[
[Bindable] public var a:XMLList;
[Bindable] public var b:XMLList;
[Bindable] public var c:XMLList;
[Bindable] public var d:XMLList;
// 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>
<pageCount>470</pageCount>
</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>
<pageCount>500</pageCount>
</book>
</books>
private function initializeHandler():void
{
// An XML list that contains both book nodes.
a = myBooks.book;
// Keith Peters
b = myBooks.book[0].author;
// 470
c = myBooks.book.(@ISBN=="1590595181").pageCount;
// Delete the first book node.
delete myBooks.book[0];
// Send in the Idiots...
d = myBooks.book[0].title;
}
]]>
</mx:Script>
<!-- User interface -->
<mx:Panel
title="XML lookup results"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:Text text="{'a: ' + a}" width="300"/>
<mx:Label text="{'b: ' + b}"/>
<mx:Label text="{'c: ' + c}"/>
<mx:Label text="{'d: ' + d}"/>
</mx:Panel>
</mx:Application>
运行结果
对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>
运行结果
通过传递数据引用创建XML对象
前边介绍XML的例子展示了使用XML文档初始化XML对象的方法。当创建一个XML文档时，你也可以通过引用（来自其他变量的引用）传递数到XML对象中，通过大括号扩起来的变量值引用。
如果你创建的XML结构不是有效的XML，你会看到类型错误的运行时错误。
下边的例子动态的创建了一个XML对象。它基于用户提供的变量来创建属性名，属性值，标签名和标签内容。例子检查了TypeError的情况，通过使用try…catch块环绕XML初始化代码。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="500" height="400"
initialize="createXML();"
>
<mx:Script>
<![CDATA[
[Bindable]
public var xml:XML
private function createXML():void
{
try
{
// Create the XML object using the values provided
// by the user for the tag name, attribute name,
// attribute value and the tag's contents.
xml =
<{tagName.text}
{attributeName.text}={attributeValue.text}
>
{content.text}
</{tagName.text}>;
}
catch (e:TypeError)
{
// Type error encountered while trying to create the
// XML object. The form must not be valid. Inform
// the user.
xml = <note>Fill the form to see the tag here.</note>;
}
}
]]>
</mx:Script>
<!-- User interface -->
<mx:Panel
title="Passing XML data by reference"
layout="horizontal"
>
<mx:Form>
<mx:FormItem label="Tag name:">
<mx:TextInput id="tagName" change="createXML();"/>
</mx:FormItem>
<mx:FormItem label="Attribute name:">
<mx:TextInput id="attributeName" change="createXML();"/>
</mx:FormItem>
<mx:FormItem label="Attribute value:">
<mx:TextInput id="attributeValue" change="createXML();"/>
</mx:FormItem>
<mx:FormItem label="Tag content:">
<mx:TextInput id="content" change="createXML();"/>
</mx:FormItem>
<mx:HRule width="100%"/>
<!-- Display the resulting XML -->
<mx:TextArea
editable="false"
width="300" height="50"
text="{xml.toXMLString()}"
/>
</mx:Form>
</mx:Panel>
</mx:Application>
装配与改变XML对象
出可以对XML元素与对象赋值外，你也可以通过使用E4X组装与传递XML对象。
下边的例子中，你可以使用prependChild()和appendChild()方法来向XML对象的列表中的前边或后边增减一个属性。类似的，使用insertChildBefore()方法和insertchildAfter()方法来增加属性在指定的属性之前或之后。要删除元素，使用delete()方法从XML中移除节点。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="500" height="600"
creationComplete="myDataGrid.selectedIndex=0; validateForm();"
>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// Constants
private const SELECTED_ITEM:uint = 0;
private const THE_LIST:uint = 1;
private const BEFORE:uint = 0;
private const AFTER:uint = 1;
// Flag: is the form valid?
[Bindable]
private var formIsValid:Boolean;
// Flag: does a selection exist in the data grid?
[Bindable]
private var selectionExists:Boolean;
// Holds the index of the next item in the
// data grid following the deletion of a book item.
private var newSelectedIndex:int;
// 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>
// Add a new book.
private function addBookHandler():void
{
// Create a new XML Object from the form information
var newBook:XML =
<book ISBN={isbnInput.text}>
<title>{titleInput.text}</title>
<author>{authorInput.text}</author>
<amazonUrl>{amazonUrlInput.text}</amazonUrl>
</book>;
// Save the selected book's index so it can be reselected
// in the grid once the new book is added.
var selectedBookIndex:uint = myDataGrid.selectedIndex;
// Does the user want to add the new
// book relative to the selected book in the
// data grid or relative to the list itself?
if (addRelativeTo.selectedIndex == SELECTED_ITEM)
{
// Add the new item relative to the selected item.
var selectedBook:XML = myBooks.book[selectedBookIndex];
// Does the user want to add it before or after
// the selected item?
if (addPosition.selectedIndex == BEFORE)
{
// Add new item before selected item
myBooks = myBooks.insertChildBefore(selectedBook, newBook);
}
else
{
// Add new item after selected item
myBooks = myBooks.insertChildAfter(selectedBook, newBook);
}
}
else
{
// Add the new item relative to the whole list of books.
if (addPosition.selectedIndex == BEFORE)
{
// Add new item at the start of the list.
myBooks = myBooks.prependChild(newBook);
}
else
{
// Add new item at the end of the list.
myBooks = myBooks.appendChild(newBook);
}
}
// Select the previously selected item in the grid
// so the user doesn't lose their position. (If a new book was
// added before the currently selected item, that item's
// new index will be one greater, so select that.)
var newSelectedIndex:uint = (addPosition.selectedIndex == BEFORE) ? selectedBookIndex + 1: selectedBookIndex;
myDataGrid.selectedIndex = newSelectedIndex;
}
// Delete selected book
private function deleteBookHandler():void
{
// Save the currently selected index.
var selectedBookIndex:int = myDataGrid.selectedIndex;
// Delete the currently selected book.
delete (myBooks.book[selectedBookIndex]);
// Reselect the next logical item in the data grid.
newSelectedIndex = (selectedBookIndex==0) ? 0 : selectedBookIndex - 1;
// Change the selected index of the data grid
// at a later frame. See note on changeDataGridIndex()
// method for more details on this workaround.
callLater ( changeDataGridIndex );
}
// This is a workaround for a known issue with
// List-based components where deleting an item
// from the control's dataProvider leaves the
// selectedIndex at an incorrect value. The workaround
// is to reassign the data provider at least a
// frame later and to change the index there.
private function changeDataGridIndex ():void
{
// Reassign the data grid's data provider.
myDataGrid.dataProvider = myBooks.book;
// Set the selected index.
myDataGrid.selectedIndex = newSelectedIndex;
// Validate the form to make sure that there
// is actually a selection (that the grid is
// not empty).
validateForm();
}
// Perform simple form validation.
private function validateForm():void
{
// Is the form valid?
formIsValid =
isbnInput.text != ""
&& titleInput.text != ""
&& authorInput.text != ""
&& amazonUrlInput.text != "";
// Does a selection exist in the data grid?
selectionExists = myDataGrid.selectedIndex != -1;
}
]]>
</mx:Script>
<!-- User interface -->
<mx:Panel
title="Assigning XML data"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"
>
<!-- List of books -->
<mx:DataGrid
id="myDataGrid"
dataProvider="{myBooks.book}"
change="validateForm();"
>
<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>
<!-- New book form. Prepopulated with a book for easier testing. -->
<mx:Form width="100%" autoLayout="false">
<mx:FormHeading label="New book details"/>
<mx:FormItem label="ISBN:" width="
100%">
<mx:TextInput
id="isbnInput"
width="100%"
text="1590596196"
change="validateForm();"
/>
</mx:FormItem>
<mx:FormItem label="Title:" width="100%">
<mx:TextInput
id="titleInput"
width="100%"
text="Object Oriented Actionscript for Flash 8"
change="validateForm();"
/>
</mx:FormItem>
<mx:FormItem label="Author:" width="100%">
<mx:TextInput
id="authorInput"
width="100%"
text="Peter Elst"
change="validateForm();"
/>
</mx:FormItem>
<mx:FormItem label="Amazon Url" width="100%">
<mx:TextInput
id="amazonUrlInput"
width="100%"
text="http://tinyurl.com/qxon2"
change="validateForm();"
/>
</mx:FormItem>
</mx:Form>
<mx:TextArea id="deb" width="100%"/>
<mx:ControlBar>
<mx:Button
label="Add book"
click="addBookHandler();"
enabled="{formIsValid}"
/>
<mx:ComboBox id="addPosition" enabled="{formIsValid}">
<mx:String>before</mx:String>
<mx:String>after</mx:String>
</mx:ComboBox>
<mx:ComboBox
id="addRelativeTo"
enabled="{formIsValid}"
>
<mx:String>selected item.</mx:String>
<mx:String>the list.</mx:String>
</mx:ComboBox>
<mx:VRule height="15"/>
<mx:Button
label="Delete book"
click="deleteBookHandler();"
enabled="{selectionExists}"
/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
查询XML数据
在E4X中，查询XML数据有几种方式。下边的例子展示了一下几种方式：
使用逻辑操作搜索数字范围（例如，所有大于300页的图书）
在元素或属性上查询字符串（例如，标题包含ldiots的图书）
从重复的节点请求元素(例如，从books中title元素)
当你拥有了查询结果，你可以使用for..in和 for each..in循环来遍历结果。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/XMLQuery/index.html"
width="450" height="290"
initialize="initializeHandler();"
>
<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>
<pageCount>470</pageCount>
</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>
<pageCount>500</pageCount>
</book>
<book ISBN="1590592212">
<title>Flash 3D Cheats Most Wanted</title>
<author>Aral Balkan et. al.</author>
<amazonUrl>http://tinyurl.com/gsd7b</amazonUrl>
<pageCount>256</pageCount>
</book>
</books>
private function initializeHandler():void
{
// Line length to truncate strings at when
// displaying them
var lineLength:uint = 50;
//
// Find books with more than 300 pages.
//
var resultA:XMLList;
resultA = myBooks.book.(pageCount > 300);
// Display the found books using a for each..in
// loop.
var tempString:String = "<ul>";
for each (var book:XML in resultA)
{
tempString += "<li>" + truncate(book.title, lineLength) + "</li>";
}
tempString += "</ul>";
aText.htmlText = tempString;
//
// Find book with "Idiots" in the title.
//
var resultB:XMLList;
resultB = myBooks.book.(title.toString().search("Idiots")>-1);
// Display the title of the found book.
bText.htmlText = "<ul><li>" + truncate(resultB.title, lineLength) + "</li></ul>";
//
// Get the titles of all the books.
//
var resultC:XMLList;
resultC = myBooks.book.title;
// Display the titles using a for..in loop
tempString = "<ul>";
for (var bookTitle:String in resultC)
{
tempString += "<li>" + truncate(resultC[bookTitle], lineLength) + "</li>";
}
tempString += "</ul>";
cText.htmlText = tempString;
}
// Helper method: Truncate a string at a given character count. Tries
// to do this intelligently by truncating at a space if one exists in
// the string (so that words are not truncated in the middle).
private function truncate ( str:String, numChars:uint, symbol:String = "..." ):String
{
// Don't do anything if the string is shorter than the maximum value.
if (str.length <= numChars) return str;
// Search backward for a space in the string, starting with
// the character position that was requested.
var charPosition:uint = numChars-1;
while (str.charAt(charPosition) != " " && charPosition != 0)
{
charPosition--;
}
var truncateAt:uint = charPosition == 0 ? numChars : charPosition;
// If the space is right before a punctuation mark, crop the
// punctuation mark also (or else it looks weird).
var charBefore:String = str.charAt(truncateAt-1);
if (charBefore == ":" || charBefore == ";"
|| charBefore == "." || charBefore == ",")
{
truncateAt--;
}
// Truncate the string.
var newString:String = str.substr(0, truncateAt);
newString += symbol;
// Return the truncated string.
return newString;
}
]]>
</mx:Script>
<!-- User interface -->
<mx:Panel
title="XML lookup results" width="100%"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:Label text="Query A - Books found:" fontWeight="bold"/>
<mx:Text id="aText" width="100%"/>
<mx:Label text="Query B - Books found:" fontWeight="bold"/>
<mx:Text id="bText" width="100%"/>
<mx:Label text="Query C - Books found:" fontWeight="bold"/>
<mx:Text id="cText" width="100%"/>
</mx:Panel>
</mx:Application>
Actionscript 3.0组类基于ECMAScript for XML(E4X)说明(ECMA-357 2第二版)。这些类功能强大，使用简单，对处理XMLdata数据非常有用。相比以前的编程技术使用E4X的开发代码使得XML数据更快。
介绍XML
对XML元素与属性赋值
通过传递数据引用创建XML对象
装配与改变XML对象
查询XML数据
介绍XML
许多服务器端应用程序使用XML数据结构，那么你可以在ActionScript中使用XML类来创建优雅的富互联网应用程序。例如那些链接到Web service的应用。web service是连接应用程序的重要的方法，例如，一个Adobe Flash Player9 应用程序和一个在web服务器上的应用程序通过公共标准，例如Simple Object Access Protocol(SOAP)
在Adobe Flex中，ECMAScript for XML说明书定义了一系列的类和功能来处理XML数据。这些类和函数的集合被称为E4X.两个主要的类是XML和XMLList。
注意：在ActionScript 2.0中有一个XML类。在ActionScript 3.0中，它被重命名为XMLDocument这样就不会与新的，作为E4X一部分的XML类发生冲突了。在ActionScript 3.0中，上一个版本遗留的类——XMLDocument,XMLNode,XMLParser和XMLTag——都被包含在flash.xml包中，主要是为了向下兼容。E4X类是核心类；你需要导入包才能使用他们。本快速说明没有设计对传统的ActionScript 2.0的类逐一细说。想了解他们，查看flash.xml包，在Flex 3 Language Reference中
在下边的例子中，你创建了一个XML文档，命名为myBooks。创建一个XML文档在ActionScript，通过在Actionscript块中书写XML并赋值给一个变量。由于在Flex中，XML是本地数据类型，就像Number或Boolean一样。
myBooks的XML文档包含两个book元素(element)（也被称为node（节点））。第一个book元素拥有4个子元素，名称值title,author,amazonUrl和pageCount。
要通过XML实例访问元素，使用点标示（.）就像存取一个对象的属性一样。那么，举个例子，要获得book节点的引用，你要写成myBooks.book。这就返回了一个XMLList时间，他包含了myBooks的XML中的2个book节点。要存取列表中指定节点，你需要使用数组表示法。例如，要获得第一本数节点的引用，可以写为myBooks.book[0]。如果你使用过ActionScript中的对象和数组，你应该对点操作符和数组语法风格比较熟悉。然而，E4X比这更进一步，可以按指定属性名在XML中搜索节点。
下边的例子中，使用搜索ISBN属性获得第一本书的引用。属性在 E4X中at-sign(@)为前缀描述属性，写为@ISBN。语句myBooks.book.(@ISBN==”159059181”)翻译为“找到一个属性ISBN值等于159059181的book节点”。另一个例子描述更高级的查找技术。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="440" height="400"
initialize="initializeHandler();"
>
<mx:Script>
<![CDATA[
[Bindable] public var a:XMLList;
[Bindable] public var b:XMLList;
[Bindable] public var c:XMLList;
[Bindable] public var d:XMLList;
// 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>
<pageCount>470</pageCount>
</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>
<pageCount>500</pageCount>
</book>
</books>
private function initializeHandler():void
{
// An XML list that contains both book nodes.
a = myBooks.book;
// Keith Peters
b = myBooks.book[0].author;
// 470
c = myBooks.book.(@ISBN=="1590595181").pageCount;
// Delete the first book node.
delete myBooks.book[0];
// Send in the Idiots...
d = myBooks.book[0].title;
}
]]>
</mx:Script>
<!-- User interface -->
<mx:Panel
title="XML lookup results"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:Text text="{'a: ' + a}" width="300"/>
<mx:Label text="{'b: ' + b}"/>
<mx:Label text="{'c: ' + c}"/>
<mx:Label text="{'d: ' + d}"/>
</mx:Panel>
</mx:Application>
运行结果
对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>
运行结果
通过传递数据引用创建XML对象
前边介绍XML的例子展示了使用XML文档初始化XML对象的方法。当创建一个XML文档时，你也可以通过引用（来自其他变量的引用）传递数到XML对象中，通过大括号扩起来的变量值引用。
如果你创建的XML结构不是有效的XML，你会看到类型错误的运行时错误。
下边的例子动态的创建了一个XML对象。它基于用户提供的变量来创建属性名，属性值，标签名和标签内容。例子检查了TypeError的情况，通过使用try…catch块环绕XML初始化代码。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="500" height="400"
initialize="createXML();"
>
<mx:Script>
<![CDATA[
[Bindable]
public var xml:XML
private function createXML():void
{
try
{
// Create the XML object using the values provided
// by the user for the tag name, attribute name,
// attribute value and the tag's contents.
xml =
<{tagName.text}
{attributeName.text}={attributeValue.text}
>
{content.text}
</{tagName.text}>;
}
catch (e:TypeError)
{
// Type error encountered while trying to create the
// XML object. The form must not be valid. Inform
// the user.
xml = <note>Fill the form to see the tag here.</note>;
}
}
]]>
</mx:Script>
<!-- User interface -->
<mx:Panel
title="Passing XML data by reference"
layout="horizontal"
>
<mx:Form>
<mx:FormItem label="Tag name:">
<mx:TextInput id="tagName" change="createXML();"/>
</mx:FormItem>
<mx:FormItem label="Attribute name:">
<mx:TextInput id="attributeName" change="createXML();"/>
</mx:FormItem>
<mx:FormItem label="Attribute value:">
<mx:TextInput id="attributeValue" change="createXML();"/>
</mx:FormItem>
<mx:FormItem label="Tag content:">
<mx:TextInput id="content" change="createXML();"/>
</mx:FormItem>
<mx:HRule width="100%"/>
<!-- Display the resulting XML -->
<mx:TextArea
editable="false"
width="300" height="50"
text="{xml.toXMLString()}"
/>
</mx:Form>
</mx:Panel>
</mx:Application>
装配与改变XML对象
出可以对XML元素与对象赋值外，你也可以通过使用E4X组装与传递XML对象。
下边的例子中，你可以使用prependChild()和appendChild()方法来向XML对象的列表中的前边或后边增减一个属性。类似的，使用insertChildBefore()方法和insertchildAfter()方法来增加属性在指定的属性之前或之后。要删除元素，使用delete()方法从XML中移除节点。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="500" height="600"
creationComplete="myDataGrid.selectedIndex=0; validateForm();"
>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// Constants
private const SELECTED_ITEM:uint = 0;
private const THE_LIST:uint = 1;
private const BEFORE:uint = 0;
private const AFTER:uint = 1;
// Flag: is the form valid?
[Bindable]
private var formIsValid:Boolean;
// Flag: does a selection exist in the data grid?
[Bindable]
private var selectionExists:Boolean;
// Holds the index of the next item in the
// data grid following the deletion of a book item.
private var newSelectedIndex:int;
// 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>
// Add a new book.
private function addBookHandler():void
{
// Create a new XML Object from the form information
var newBook:XML =
<book ISBN={isbnInput.text}>
<title>{titleInput.text}</title>
<author>{authorInput.text}</author>
<amazonUrl>{amazonUrlInput.text}</amazonUrl>
</book>;
// Save the selected book's index so it can be reselected
// in the grid once the new book is added.
var selectedBookIndex:uint = myDataGrid.selectedIndex;
// Does the user want to add the new
// book relative to the selected book in the
// data grid or relative to the list itself?
if (addRelativeTo.selectedIndex == SELECTED_ITEM)
{
// Add the new item relative to the selected item.
var selectedBook:XML = myBooks.book[selectedBookIndex];
// Does the user want to add it before or after
// the selected item?
if (addPosition.selectedIndex == BEFORE)
{
// Add new item before selected item
myBooks = myBooks.insertChildBefore(selectedBook, newBook);
}
else
{
// Add new item after selected item
myBooks = myBooks.insertChildAfter(selectedBook, newBook);
}
}
else
{
// Add the new item relative to the whole list of books.
if (addPosition.selectedIndex == BEFORE)
{
// Add new item at the start of the list.
myBooks = myBooks.prependChild(newBook);
}
else
{
// Add new item at the end of the list.
myBooks = myBooks.appendChild(newBook);
}
}
// Select the previously selected item in the grid
// so the user doesn't lose their position. (If a new book was
// added before the currently selected item, that item's
// new index will be one greater, so select that.)
var newSelectedIndex:uint = (addPosition.selectedIndex == BEFORE) ? selectedBookIndex + 1: selectedBookIndex;
myDataGrid.selectedIndex = newSelectedIndex;
}
// Delete selected book
private function deleteBookHandler():void
{
// Save the currently selected index.
var selectedBookIndex:int = myDataGrid.selectedIndex;
// Delete the currently selected book.
delete (myBooks.book[selectedBookIndex]);
// Reselect the next logical item in the data grid.
newSelectedIndex = (selectedBookIndex==0) ? 0 : selectedBookIndex - 1;
// Change the selected index of the data grid
// at a later frame. See note on changeDataGridIndex()
// method for more details on this workaround.
callLater ( changeDataGridIndex );
}
// This is a workaround for a known issue with
// List-based components where deleting an item
// from the control's dataProvider leaves the
// selectedIndex at an incorrect value. The workaround
// is to reassign the data provider at least a
// frame later and to change the index there.
private function changeDataGridIndex ():void
{
// Reassign the data grid's data provider.
myDataGrid.dataProvider = myBooks.book;
// Set the selected index.
myDataGrid.selectedIndex = newSelectedIndex;
// Validate the form to make sure that there
// is actually a selection (that the grid is
// not empty).
validateForm();
}
// Perform simple form validation.
private function validateForm():void
{
// Is the form valid?
formIsValid =
isbnInput.text != ""
&& titleInput.text != ""
&& authorInput.text != ""
&& amazonUrlInput.text != "";
// Does a selection exist in the data grid?
selectionExists = myDataGrid.selectedIndex != -1;
}
]]>
</mx:Script>
<!-- User interface -->
<mx:Panel
title="Assigning XML data"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"
>
<!-- List of books -->
<mx:DataGrid
id="myDataGrid"
dataProvider="{myBooks.book}"
change="validateForm();"
>
<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>
<!-- New book form. Prepopulated with a book for easier testing. -->
<mx:Form width="100%" autoLayout="false">
<mx:FormHeading label="New book details"/>
<mx:FormItem label="ISBN:" width="
100%">
<mx:TextInput
id="isbnInput"
width="100%"
text="1590596196"
change="validateForm();"
/>
</mx:FormItem>
<mx:FormItem label="Title:" width="100%">
<mx:TextInput
id="titleInput"
width="100%"
text="Object Oriented Actionscript for Flash 8"
change="validateForm();"
/>
</mx:FormItem>
<mx:FormItem label="Author:" width="100%">
<mx:TextInput
id="authorInput"
width="100%"
text="Peter Elst"
change="validateForm();"
/>
</mx:FormItem>
<mx:FormItem label="Amazon Url" width="100%">
<mx:TextInput
id="amazonUrlInput"
width="100%"
text="http://tinyurl.com/qxon2"
change="validateForm();"
/>
</mx:FormItem>
</mx:Form>
<mx:TextArea id="deb" width="100%"/>
<mx:ControlBar>
<mx:Button
label="Add book"
click="addBookHandler();"
enabled="{formIsValid}"
/>
<mx:ComboBox id="addPosition" enabled="{formIsValid}">
<mx:String>before</mx:String>
<mx:String>after</mx:String>
</mx:ComboBox>
<mx:ComboBox
id="addRelativeTo"
enabled="{formIsValid}"
>
<mx:String>selected item.</mx:String>
<mx:String>the list.</mx:String>
</mx:ComboBox>
<mx:VRule height="15"/>
<mx:Button
label="Delete book"
click="deleteBookHandler();"
enabled="{selectionExists}"
/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
查询XML数据
在E4X中，查询XML数据有几种方式。下边的例子展示了一下几种方式：
使用逻辑操作搜索数字范围（例如，所有大于300页的图书）
在元素或属性上查询字符串（例如，标题包含ldiots的图书）
从重复的节点请求元素(例如，从books中title元素)
当你拥有了查询结果，你可以使用for..in和 for each..in循环来遍历结果。
例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/XMLQuery/index.html"
width="450" height="290"
initialize="initializeHandler();"
>
<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>
<pageCount>470</pageCount>
</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>
<pageCount>500</pageCount>
</book>
<book ISBN="1590592212">
<title>Flash 3D Cheats Most Wanted</title>
<author>Aral Balkan et. al.</author>
<amazonUrl>http://tinyurl.com/gsd7b</amazonUrl>
<pageCount>256</pageCount>
</book>
</books>
private function initializeHandler():void
{
// Line length to truncate strings at when
// displaying them
var lineLength:uint = 50;
//
// Find books with more than 300 pages.
//
var resultA:XMLList;
resultA = myBooks.book.(pageCount > 300);
// Display the found books using a for each..in
// loop.
var tempString:String = "<ul>";
for each (var book:XML in resultA)
{
tempString += "<li>" + truncate(book.title, lineLength) + "</li>";
}
tempString += "</ul>";
aText.htmlText = tempString;
//
// Find book with "Idiots" in the title.
//
var resultB:XMLList;
resultB = myBooks.book.(title.toString().search("Idiots")>-1);
// Display the title of the found book.
bText.htmlText = "<ul><li>" + truncate(resultB.title, lineLength) + "</li></ul>";
//
// Get the titles of all the books.
//
var resultC:XMLList;
resultC = myBooks.book.title;
// Display the titles using a for..in loop
tempString = "<ul>";
for (var bookTitle:String in resultC)
{
tempString += "<li>" + truncate(resultC[bookTitle], lineLength) + "</li>";
}
tempString += "</ul>";
cText.htmlText = tempString;
}
// Helper method: Truncate a string at a given character count. Tries
// to do this intelligently by truncating at a space if one exists in
// the string (so that words are not truncated in the middle).
private function truncate ( str:String, numChars:uint, symbol:String = "..." ):String
{
// Don't do anything if the string is shorter than the maximum value.
if (str.length <= numChars) return str;
// Search backward for a space in the string, starting with
// the character position that was requested.
var charPosition:uint = numChars-1;
while (str.charAt(charPosition) != " " && charPosition != 0)
{
charPosition--;
}
var truncateAt:uint = charPosition == 0 ? numChars : charPosition;
// If the space is right before a punctuation mark, crop the
// punctuation mark also (or else it looks weird).
var charBefore:String = str.charAt(truncateAt-1);
if (charBefore == ":" || charBefore == ";"
|| charBefore == "." || charBefore == ",")
{
truncateAt--;
}
// Truncate the string.
var newString:String = str.substr(0, truncateAt);
newString += symbol;
// Return the truncated string.
return newString;
}
]]>
</mx:Script>
<!-- User interface -->
<mx:Panel
title="XML lookup results" width="100%"
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
<mx:Label text="Query A - Books found:" fontWeight="bold"/>
<mx:Text id="aText" width="100%"/>
<mx:Label text="Query B - Books found:" fontWeight="bold"/>
<mx:Text id="bText" width="100%"/>
<mx:Label text="Query C - Books found:" fontWeight="bold"/>
<mx:Text id="cText" width="100%"/>
</mx:Panel>
</mx:Application>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Flex 3处理数据 访问 XML 数据4
- Flex快速入门系列之五：crossdomain.xml文件创建以及允许本地跨域访问远程资源
- Enterprise Library 4.1数据访问应用程序块快速入门【7】在XML中进行多行检索
- Flex 3快速入门: 处理数据 定义数据模型
- Flex 3快速入门: 处理数据 使用 HTTPService 加载外部数据
- Flex 3快速入门: 处理数据 使用数据绑定
- Flex 3处理数据 访问 XML 数据2
- Flex 3处理数据 访问 XML 数据5
- Flex 3快速入门: 处理数据 验证数据
- Flex 3处理数据 访问 XML 数据3
- Flex 3快速入门: 处理数据 使用 HTTPService 加载外部数据
- Flex 3快速入门: 处理数据 格式化数据
- 使用XMLBeans处理XML数据和文档入门
- ASP.NET MVC3 快速入门-第五节 从控制器访问模型中的数据
- Enterprise Library 4.1数据访问应用程序块快速入门【4】执行命令和访问一单项目结果
- ASP.NET MVC3快速入门——第五节、从控制器访问模型中的数据
- 使用XMLBeans处理XML数据和文档入门 作者：肖菁 （dev2dev ID: powerise） 湖南省长沙铁道学院科创计算机系统集成有限公司软件中心软件工程师
- ASP.NET MVC3 快速入门-第五节 从控制器访问模型中的数据
- Flex快速入门系列之四：idea创建项目以及远程对象访问
- Flex 中对xml数据的处理