详细介绍Flex中操作XML (转)
一 在介绍Flex中操作XML之前,首先简单介绍下XML中的基本术语。
元素:XML中拥有开始标签和结束标签的这一块称为“元素”
节点:把XML元素与文本结合起来统称为节点
根节点:位于整个XML文当顶端的节点
文本节点:包含文本的节点
属性:元素的组成部分,以键/值形式放在元素标签内
用一个例子来说明
var textXmlObj:XML = <test><element>text</element></test>;
var textXmlObj:XML = <test><element>text</element></test>;
注意:这里等号右边的表达式不用加上引号,因为AS认识它,知道它是一个XML,如果加上引号就成了String类型了,编译也无法通过。
当然也可以动态的决定XML文本中的内容,用"{变量}"的方式插入到XML文本中。
var text_node:String = "text"; var textXmlObj:XML = <test><element>{text_node}</element></test>;
var text_node:String = "text";var textXmlObj:XML = <test><element>{text_node}</element></test>;
2.创建一个XML对象,并在构造方法中传入字符串作为XML文本
我们平时在编程工作中,往往会以字符串的方式得到一个XML文本,这个时候就可以使用XML的构造方法来创建一个XML对象。
- var myText:String = "text";
- var str:String = "<test><element>"+ myText + "</element></test>";
- var textXmlObj:XML = new XML(str);
var myText:String = "text";var str:String = "<test><element>"+ myText + "</element></test>";var textXmlObj:XML = new XML(str);
3.从外部加载XML对象
对于比较大一点的XML文本来说,从外部加载无疑是最好的方式了,因为如果硬写在程序中,就算是对XML对象进行最简单的修改都是一个大灾难。
外部加载这里介绍2种方式
1)如果你不是在Flex中开发而只是在比如Flash CS3中开发的话,可以使用下面的这种方法来加载外部XML
- import flash.events.Event;
- import flash.net.URLLoader;
- import flash.net.URLRequest;
- var externalXML:XML;
- var loader:URLLoader = new URLLoader();
- var request:URLRequest = new URLRequest("xmlFile.xml");
- loader.load(request);
- loader.addEventListener(Event.COMPLETE, onComplete);
- function onComplete(event:Event):void
- {
- var loader:URLLoader = event.target as URLLoader;
- if (loader != null)
- {
- externalXML = new XML(loader.data);
- trace(externalXML.toXMLString());
- }
- else
- {
- trace("loader is not a URLLoader!");
- }
- }
import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; var externalXML:XML; var loader:URLLoader = new URLLoader(); var request:URLRequest = new URLRequest("xmlFile.xml"); loader.load(request); loader.addEventListener(Event.COMPLETE, onComplete); function onComplete(event:Event):void { var loader:URLLoader = event.target as URLLoader; if (loader != null) { externalXML = new XML(loader.data); trace(externalXML.toXMLString()); } else { trace("loader is not a URLLoader!"); } }
2) 如果是在Flex开发环境中就可以使用HttpService来加载外部的XML;如果这里看不懂代码没关系,后面将细致的介绍下面的这种处理方式
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
- creationComplete="unitRPC.send()">
- <mx:HTTPService id="unitRPC"
- url="xmlFile.xml"
- result="unitRPCResult(event)"/>
- <mx:Script>
- <!--[CDATA[
- import mx.rpc.events.ResultEvent;
- private function unitRPCResult(event:ResultEvent):void {
- }
- ]]-->
- </mx:Script>
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="unitRPC.send()"> <mx:HTTPService id="unitRPC" url="xmlFile.xml" result="unitRPCResult(event)"/> <mx:Script> <!--[CDATA[ import mx.rpc.events.ResultEvent; private function unitRPCResult(event:ResultEvent):void { } ]]--> </mx:Script> </mx:Application>
三 对XML对象进行处理
在介绍XML对象的处理之前,介绍一个扩展语言"E4X",E4X大大简化了传统对XML的操作方式(如DOM接口)。
你会发现在程序中E4X操作XML是如此的简单,懒人们都乐坏了。
这里先给出一个XML对象,后面都将对这个对象进行操作
- var myXML:XML =
- <books>
- <book name="flex tutorial">
- <price>30</price>
- <author>adobe</author>
- </book>
- <book name="sliverlight tutorial">
- <price>40</price>
- <author>microsoft</author>
- </book>
- <book name="java tutorial">
- <price>50</price>
- <author>sun</author>
- </book>
- <author>cyeric</author> //这是没有意义的一个节点,只是为了后面的演示
- </books>
var myXML:XML = <books> <book name="flex tutorial"> <price>30</price> <author>adobe</author> </book> <book name="sliverlight tutorial"> <price>40</price> <author>microsoft</author> </book> <book name="java tutorial"> <price>50</price> <author>sun</author> </book> <author>cyeric</author> //这是没有意义的一个节点,只是为了后面的演示 </books>
1)查询
使用"."操作符查询节点,使用"[]"访问指定索引的节点
- trace(myXML.book[0]) ;
trace(myXML.book[0]) ;
输出
<book name="flex tutorial">
<price>30</price>
<author>adobe</author>
</book>
输出内容说明,得到了第一个子节点;另外,如果我们想查询所有book节点的话只需要把[0]去掉就可以了。
使用".."操作符访问所有以该标签命名的节点,而忽略节点的上下关系,注意最后那个节点
- trace(myXML..author);
trace(myXML..author);
输出
<author>adobe</author>
<author>microsoft</author>
<author>sun</author>
<author>cyeric</author>
可以看到,不管author位于哪个位置,都打印了出来
使用"@"操作符访问节点属性
- trace(myXML.book[0].@name)
trace(myXML.book[0].@name)
输出
flex tutorial
第一个子节点的name属性就被打印了出来
以上这4个操作符号".","[]","..","@" 即为最常用的4个E4X操作符,简单吧,下面就循序渐进。
在查询过程中可以使用E4X的过滤功能,假如我现在只想查询价格在50块以下的书,我们可以这样
- trace(myXML.book.(price<50));
trace(myXML.book.(price<50));
输出
<book name="flex tutorial">
<price>30</price>
<author>adobe</author>
</book>
<book name="sliverlight tutorial">
<price>40</price>
<author>microsoft</author>
</book>
价格为50元的那本书就没有打印出来了。
属性也可以过滤
- trace(myXML.book.(@name=='flex tutorial'));
trace(myXML.book.(@name=='flex tutorial'));
输出
<book name="flex tutorial">
<price>30</price>
<author>adobe</author>
</book>
我们还可以把查询到的XML文本给改了,比如书店要把书都处理掉,然后叫卖:"5元5元一律5元"。
- trace(myXML.book.(price=5));
trace(myXML.book.(price=5));
输出
<book name="flex tutorial">
<price>5</price>
<author>adobe</author>
</book>
<book name="sliverlight tutorial">
<price>5</price>
<author>microsoft</author>
</book>
<book name="java tutorial">
<price>5</price>
<author>sun</author>
</book>
2) 修改,修改XML对象包括修改,添加和删除操作
虽然在介绍查询的时候介绍过可以在查询到XML文本的时候把它的内容给修改了。
这里先给出一个XML对象,后面都将对这个对象进行操作
- var myXML:XML =
- <books>
- <book name="flex tutorial">
- <price>30</price>
- <author>adobe</author>
- </book>
- </books>
var myXML:XML = <books> <book name="flex tutorial"> <price>30</price> <author>adobe</author> </book> </books>
添加元素/节点,使用insertChildBefore和insertChildAfter方法在某一位置添加元素/节点,appendChild和prependChild方法在最前和最后添加元素/节点
- myXML.insertChildAfter(myXML.book[0],<newbook name="After"/>);
- myXML.insertChildBefore(myXML.book[0],<newbook name="Before"/>);
- myXML.appendChild(<newbook name="Append"/>);
- myXML.prependChild(<newbook name="Prepend"/>);
- trace(myXML);
myXML.insertChildAfter(myXML.book[0],<newbook name="After"/>); myXML.insertChildBefore(myXML.book[0],<newbook name="Before"/>); myXML.appendChild(<newbook name="Append"/>); myXML.prependChild(<newbook name="Prepend"/>); trace(myXML);
输出
<books>
<newbook name="Prepend"/>
<newbook name="Before"/>
<book name="flex tutorial">
<price>30</price>
<author>adobe</author>
</book>
<newbook name="After"/>
<newbook name="Append"/>
</books>
在第一个元素的前后各添加了一个元素
添加属性,直接使用E4X带来的便利
- myXML.book[0].@date="2008";
- trace(myXML);
myXML.book[0].@date="2008"; trace(myXML);
输出
<books>
<book name="flex tutorial" date="2008">
<price>30</price>
<author>adobe</author>
</book>
</books>
修改XML对象
- myXML.book[0].author="奥多比";
- trace(myXML);
myXML.book[0].author="奥多比"; trace(myXML);
<books>
<book name="flex tutorial">
<price>30</price>
<author>奥多比</author>
</book>
</books>
也很简单,修改属性的方法也是一样
删除元素节点,属性等,使用delete关键字
- delete myXML.book[0].@name;
- delete myXML.book[0].author;
- delete myXML.book[0].price.text()[0];
- trace(myXML);
delete myXML.book[0].@name; delete myXML.book[0].author; delete myXML.book[0].price.text()[0]; trace(myXML);
输出
<books>
<book>
<price/>
</book>
</books>
四 在Flex中使用XML的例子
大的XML文档用来显示数据或者显示列表的情况比较多,比如显示数据时作为Datagrid的数据源,或者为List,Combobox,Tree等的显示列表。
当我们使用List或者Combobox的时候,往往会把XML对象转换为ArrayCollection对象,看下面的例子
外部Xml文件
- <books>
- <book name="flex tutorial">
- <price>30</price>
- <author>adobe</author>
- </book>
- <book name="air tutorial">
- <price>40</price>
- <author>adobe</author>
- </book>
- <book name="java tutorial">
- <price>50</price>
- <author>sun</author>
- </book>
- </books>
<books> <book name="flex tutorial"> <price>30</price> <author>adobe</author> </book> <book name="air tutorial"> <price>40</price> <author>adobe</author> </book> <book name="java tutorial"> <price>50</price> <author>sun</author> </book> </books>
Flex文件
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="absolute"
- creationComplete="init()">
- <mx:Script>
- <!--[CDATA[
- import mx.collections.ArrayCollection;
- import mx.rpc.events.ResultEvent;
- //用于数据绑定的ArrayCollection
- [Bindable]private var externalData:ArrayCollection = new ArrayCollection();
- private function init():void {
- //发送请求
- myService.send();
- }
- private function resultHandler(event:ResultEvent):void {
- //取得Xml对象中book节点的集合
- externalData = event.result.books.book;
- }//断点处
- ]]-->
- </mx:Script>
- <!--创建Httpservice对象加载外部Xml-->
- <mx:HTTPService id="myService"
- url="xmlFile.xml"
- result="resultHandler(event)"/>
- <!--用于显示的list-->
- <mx:List id="datalist" dataProvider="{externalData}" labelField="name"/>
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; //用于数据绑定的ArrayCollection [Bindable]private var externalData:ArrayCollection = new ArrayCollection(); private function init():void { //发送请求 myService.send(); } private function resultHandler(event:ResultEvent):void { //取得Xml对象中book节点的集合 externalData = event.result.books.book; }//断点处 ]]--> </mx:Script> <!--创建Httpservice对象加载外部Xml--> <mx:HTTPService id="myService" url="xmlFile.xml" result="resultHandler(event)"/> <!--用于显示的list--> <mx:List id="datalist" dataProvider="{externalData}" labelField="name"/> </mx:Application>
将上面的代码以debug模式执行,程序停在断点处,在variables视图中我们可以很清晰的看到程序HttpService对象在加载外部XML后已经把它转换成了ArrayCollection对象,如下图。这样就可以很轻松的将数据源绑定到显示列表对象List中。
另外一种情况,当我们使用Tree组件的时候,需要在HTTPService对象中加上resultFormat="e4x"以XML的格式读取进来而不要转换为ArrayCollection。
外部XML文件
- <books>
- <category name="RIA">
- <book name="flex tutorial" price="30" author="adobe">
- </book>
- <book name="air tutorial" price="40" author="adobe">
- </book>
- </category>
- <category name="Java">
- <book name="java tutorial" price="50" author="sun">
- </book>
- </category>
- </books>
<books> <category name="RIA"> <book name="flex tutorial" price="30" author="adobe"> </book> <book name="air tutorial" price="40" author="adobe"> </book> </category> <category name="Java"> <book name="java tutorial" price="50" author="sun"> </book> </category> </books>
Flex文件
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="absolute"
- creationComplete="myService.send()">
- <mx:HTTPService id="myService"
- url="xmlFile.xml"
- resultFormat="e4x"/>
- <mx:XMLListCollection id="booktreesrc"
- source="{myService.lastResult.category}"/>
- <mx:Tree id="bookTree"
- height="100%"
- dataProvider="{booktreesrc}"
- labelField="@name"/>
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="myService.send()"> <mx:HTTPService id="myService" url="xmlFile.xml" resultFormat="e4x"/> <mx:XMLListCollection id="booktreesrc" source="{myService.lastResult.category}"/> <mx:Tree id="bookTree" height="100%" dataProvider="{booktreesrc}" labelField="@name"/> </mx:Application>
画面显示
另外,在指定元素前和后插入,在最前端和尾端插入
var example:XML = <person/>;
example.two = "";
example.insertChildBefore(example.two, <one/>); //在two节点前插入one节点
example.insertChildBefore(example.two, "在two节点前插入文字");
example.insertChildAfter(example.two, <three/>); //在two节点后插入three节点
example.prependChild(<start/>); //在最顶端插入start节点
example.appendChild(<end/>); //在尾端插入end节点
example.start = "start内容"; //向节点增加内容
trace(example);
/*
输出:
<person>
<start>start内容</start>
<one/>
在two节点前插入文字
<two/>
<three/>
<end/>
</person>
*/