【永恒的瞬間】
          ?Give me hapy ?
          Flex與XMl通信研究
          2006-11-28 10:34
          最近一直在網(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>

          Flex與JavaScript的交互:調(diào)用JavaScipt或者被JavaScript調(diào)用 flex1.5
          2006-11-28 10:36
          一、在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="http://www.adobe.com/2006/mxml">
          <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";
          }
          posted on 2007-02-28 20:29 ???MengChuChen 閱讀(530) 評(píng)論(0)  編輯  收藏

          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 岚皋县| 贵港市| 长海县| 丹江口市| 鄢陵县| 广昌县| 井研县| 奈曼旗| 抚远县| 襄汾县| 大田县| 丹棱县| 内黄县| 汝阳县| 伊春市| 漯河市| 林甸县| 政和县| 金华市| 晋中市| 花莲县| 普安县| 石首市| 克什克腾旗| 枣庄市| 肥东县| 彝良县| 灌阳县| 离岛区| 宁国市| 通山县| 资阳市| 长阳| 厦门市| 金乡县| 通城县| 长葛市| 禹城市| 东至县| 绥棱县| 吴桥县|