最近一直在網(wǎng)上轉(zhuǎn)悠,網(wǎng)上的flex文章越來越多了,但是都使一些關(guān)于DB、控件、httpservice之類的文章,其實(shí)flex以xml作為數(shù)據(jù)源來進(jìn)行操作,也是比較重要的。
正好前一陣子在研究E4X與Flex的關(guān)系,所以打算總結(jié)一下,有說的不對(duì)的地方,還請(qǐng)大家多多原諒。 一、最簡(jiǎn)單模式:Flex通過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來使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)書寫。 這樣在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)字部分書寫即可得到Title的value。 以此類推如果想要得到xml中l(wèi)ink的內(nèi)容,應(yīng)該按如下書寫 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)容,就顯得無從下手了。其實(shí)用E4X在actionscript3中已經(jīng)支持的非常完美了。并且Flex builder2提供的help也有這樣的例子。但是我找了一下,沒有這樣的例子,所以自己研究了一下。并且把結(jié)果告訴大家。 要顯示SubSectionA1的內(nèi)容。Flex端如下書寫: 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> |
一、在Javascript中調(diào)用Flex方法
在Flex中可以用ExternalInterface來調(diào)用Flex的方法,途徑是通過在Flex應(yīng)用可調(diào)用方法列表中添加指定的公用方法。在Flex應(yīng)用中通過調(diào)用addCallback()可以把一個(gè)方法添加到此列表中。addCallback將一個(gè)Actionscript的方法注冊(cè)為一個(gè)Javascript和VBscript可以調(diào)用的方法。 addCallback()函數(shù)的定義如下: addCallback(function_name:String, closure:Function):void function_name參數(shù)就是在Html頁(yè)面中腳本調(diào)用的方法名。closure參數(shù)是要調(diào)用的本地方法,這個(gè)參數(shù)可以是一個(gè)方法也可以是對(duì)象實(shí)例。 舉個(gè)例子: <mx:script> import flash.external.*; public function myFunc():Number { return 42; } public function initApp():void { ExternalInterface.addCallback("myFlexFunction",myFunc); } </mx:script> 那么在Html頁(yè)面中,先獲得SWF對(duì)象的引用,也就是用<object .../>聲明的Swf的Id屬性,比如說是MyFlexApp。然后就可以用以下方式調(diào)用Flex中的方法。 <script language='Javascript' charset='utf-8'> function callApp() { var x = MyFlexApp.myFlexFunction(); alert(x); } </script> <button onclick="callApp()">Call App</button> 二、在Flex中調(diào)用 Javascript 你可以調(diào)用Html頁(yè)面中的Javascript,通過與Javascript的交互,可以改變Style,調(diào)用遠(yuǎn)程方法。還可以將數(shù)據(jù)傳遞給Html頁(yè)面,處理后再返回給Flex,完成這樣的功能主要有兩種方法:ExternalInterface()和navigateToUrl()。 在Flex中調(diào)用Javascript最簡(jiǎn)單的方法是使用ExternalInterface(),可以使用此API調(diào)用任意Javascript,傳遞參數(shù),獲得返回值,如果調(diào)用失敗,F(xiàn)lex拋出一個(gè)異常。 ExternalInterface封裝了對(duì)瀏覽器支持的檢查,可以用available屬性來查看。 ExternalInterface的使用非常簡(jiǎn)單,語(yǔ)法如下: flash.external.ExternalInterface.call(function_name: String[, arg1, ...]):Object; 參數(shù)function_name是要調(diào)用的Javascript的函數(shù)名,后面的參數(shù)是Javascript需要的參數(shù)。 舉個(gè)例子說明如何調(diào)用Javascript函數(shù) Flex應(yīng)用中,添加如下方法: <mx:script> <?xml version="1.0" encoding="iso-8859-1"?> <mx:Application xmlns:mx=" ![]() <mx:script> import flash.external.*; public function callWrapper():void { var f:String = "changeDocumentTitle"; var m:String = ExternalInterface.call(f,"New Title"); trace(m); } </mx:script> <mx:Button label="Change Document Title" click="callWrapper()"/> </mx:Application> Html頁(yè)面中有如下函數(shù)定義: <script LANGUAGE="Javascript"> function changeDocumentTitle(a) { window.document.title=a; return "successful"; } |