最近一直在網(wǎng)上轉(zhuǎn)悠,網(wǎng)上的flex文章越來(lái)越多了,但是都使一些關(guān)于DB、控件、httpservice之類(lèi)的文章,其實(shí)flex以xml作為數(shù)據(jù)源來(lái)進(jìn)行操作,也是比較重要的。
正好前一陣子在研究E4X與Flex的關(guān)系,所以打算總結(jié)一下,有說(shuō)的不對(duì)的地方,還請(qǐng)大家多多原諒。
一、最簡(jiǎn)單模式:Flex通過(guò)httpservice和dataProvider進(jìn)行數(shù)據(jù)傳輸
?
Xml格式如下:
<?xml version="1.0" encoding="utf-8" ?>
<Result>
<NodeA>value1</NodeA>
<NodeB>valve2</NodeB>
……………………………………………
……………………………………………
</Result>
在Flex中有一個(gè)DataGrid,這樣就可以用httpservice來(lái)使DataGrid獲取xml的數(shù)據(jù)了。
Flex端如下:
<?xml version="1.0" encoding="utf-8"?>???
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
??? title="Blog Details">
??? <mx:HTTPService showBusyCursor="true" url="http://localhost:8080/text.xml"/ id=”xmlRecord”>
<mx:DataGrid width="712" height="338" dataProvider="{xmlRecord.lastResult.Result}">
??????? <mx:columns>
?????????????? <mx:DataGridColumn headerText="SectionA" dataField="NodeA " width="400" />
?????????????? <mx:DataGridColumn headerText="SectionB" dataField="NodeB" width="30"/>
????? 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
??????? </mx:columns>
</mx:DataGrid>
?
</mx:TitleWindow>
?
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
※???? 其中紅字部分必須一直,由于這個(gè)sample比較簡(jiǎn)單,所以kenshin就不深入研究了。
※???? 黃字部分一定要按照xml的結(jié)構(gòu)書(shū)寫(xiě)。
這樣在run 這個(gè)Flex的時(shí)候,在DataGrid中就會(huì)顯示NodeA&NodeB的內(nèi)容即value1&value2
二、稍微復(fù)雜一些模式
Xml端代碼如下:
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
??? <title>value1</title>
??? <link>http://www.k-zone.cn/zblog</link>
??? <description>關(guān)注Flex,Java,DotNet,Web Desgin</description>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</channel>
</rss>
Flex端如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
??? layout="absolute"
??? creationComplete="feedRequest.send()" >
??? <mx:HTTPService
??????? id="feedRequest"
??????? url=" http://localhost:8080/text.xml"
??????? useProxy="false" />
??? <mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
??????? title="{feedRequest.lastResult.rss.channel.title}">
??? </mx:Panel>
??? 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</mx:Application>
?
如果想要得到上面的xml中title的值,只需按照藍(lán)字部分書(shū)寫(xiě)即可得到Title的value。
以此類(lèi)推如果想要得到xml中l(wèi)ink的內(nèi)容,應(yīng)該按如下書(shū)寫(xiě)
feedRequest.lastResult.rss.channel.link
?
三、復(fù)雜一些的模式,即xml的格式比較特殊
Xml端代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<Result>
<SectionA SubSectionA1=”value1” SubSectionA2=”value2”/>
<SectinB SubSectionB1=”value3” SubSectionB2=”value4”/>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</esult>
如果大家想要得到SubSectionA1的內(nèi)容,就顯得無(wú)從下手了。其實(shí)用E4X在actionscript3中已經(jīng)支持的非常完美了。并且Flex builder2提供的help也有這樣的例子。但是我找了一下,沒(méi)有這樣的例子,所以自己研究了一下。并且把結(jié)果告訴大家。
要顯示SubSectionA1的內(nèi)容。Flex端如下書(shū)寫(xiě):
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("data/sampleData.xml");
loader.load(request);
loader.addEventListener(Event.COMPLETE, onComplete);
??????? }
public function onComplete(event:Event):void {
??? var externalXML:XML;
??? var loader:URLLoader = URLLoader(event.target);
??? externalXML = new XML(loader.data);
??? trace(externalXML. SectionA [0].@ SubSectionA1);
}
其中粗體紅字SubSectionA1的內(nèi)容了。其中externalXML. SectionA [0].@ SubSectionA1中的[0]是xml的record的條數(shù)。@后面的就是想要得到的子節(jié)點(diǎn)的值。其內(nèi)容可以是SubSectionA2、SubSectionB等等的值。部分就是
?
關(guān)于xml的格式在繼續(xù)引伸一下。以下的格式
<?xml version="1.0" encoding="utf-8"?>
<Result>
<SectionA SubSectionA1=”value1”/>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</Result>
?
相當(dāng)于如下的格式:
<?xml version="1.0" encoding="utf-8"?>
<Result>
<SectionA>
<SubSectionA1>value1”</ SubSectionA1>
</SectionA>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</Result>