【永恒的瞬间】
☜Give me hapy ☞
Flex与XMl通信研究
2006-11-28 10:34
最近一直在网上转悠,网上的flex文章越来越多了,但是都使一些关于DB、控件、httpservice之类的文章,其实flex以xml作为数据源来进行操作,也是比较重要的。
正好前一阵子在研究E4X与Flex的关系,所以打算总结一下,有说的不对的地方,还请大家多多原谅。
一、最简单模式:Flex通过httpservice和dataProvider进行数据传输

 
Xml格式如下:
<?xml version="1.0" encoding="utf-8" ?>
<Result>
<NodeA>value1</NodeA>
<NodeB>valve2</NodeB>
……………………………………………
……………………………………………
</Result>

Flex中有一个DataGrid,这样就可以用httpservice来使DataGrid获取xml的数据了。

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>

 

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

     其中红字部分必须一直,由于这个sample比较简单,所以kenshin就不深入研究了。

     黄字部分一定要按照xml的结构书写。

这样在run 这个Flex的时候,在DataGrid中就会显示NodeA&NodeB的内容即value1&value2
二、稍微复杂一些模式
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>关注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的值,只需按照蓝字部分书写即可得到Title的value。
以此类推如果想要得到xml中link的内容,应该按如下书写

feedRequest.lastResult.rss.channel.link

 
三、复杂一些的模式,即xml的格式比较特殊
Xml端代码如下:

<?xml version="1.0" encoding="utf-8"?>

<Result>

<SectionA SubSectionA1=”value1” SubSectionA2=”value2”/>

<SectinB SubSectionB1=”value3” SubSectionB2=”value4”/>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

</esult>

如果大家想要得到SubSectionA1的内容,就显得无从下手了。其实用E4X在actionscript3中已经支持的非常完美了。并且Flex builder2提供的help也有这样的例子。但是我找了一下,没有这样的例子,所以自己研究了一下。并且把结果告诉大家。
要显示SubSectionA1的内容。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的内容了。其中externalXML. SectionA [0].@ SubSectionA1中的[0]是xml的record的条数。@后面的就是想要得到的子节点的值。其内容可以是SubSectionA2、SubSectionB等等的值。部分就是

 
关于xml的格式在继续引伸一下。以下的格式

<?xml version="1.0" encoding="utf-8"?>

<Result>

<SectionA SubSectionA1=”value1”/>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

</Result>

 
相当于如下的格式:

<?xml version="1.0" encoding="utf-8"?>

<Result>

<SectionA>

<SubSectionA1>value1”</ SubSectionA1>

</SectionA>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

</Result>

Flex与JavaScript的交互:调用JavaScipt或者被JavaScript调用 flex1.5
2006-11-28 10:36
一、在Javascript中调用Flex方法
在Flex中可以用ExternalInterface来调用Flex的方法,途径是通过在Flex应用可调用方法列表中添加指定的公用方法。在Flex应用中通过调用addCallback()可以把一个方法添加到此列表中。addCallback将一个Actionscript的方法注册为一个Javascript和VBscript可以调用的方法。
addCallback()函数的定义如下:
addCallback(function_name:String, closure:Function):void
function_name参数就是在Html页面中脚本调用的方法名。closure参数是要调用的本地方法,这个参数可以是一个方法也可以是对象实例。

举个例子:
<mx:script>
import flash.external.*;
public function myFunc():Number {
return 42;
}
public function initApp():void {
ExternalInterface.addCallback("myFlexFunction",myFunc);
}
</mx:script>
那么在Html页面中,先获得SWF对象的引用,也就是用<object .../>声明的Swf的Id属性,比如说是MyFlexApp。然后就可以用以下方式调用Flex中的方法。
<script language='Javascript' charset='utf-8'>
function callApp() {
var x = MyFlexApp.myFlexFunction();
alert(x);
}
</script>
<button onclick="callApp()">Call App</button>



二、在Flex中调用 Javascript
你可以调用Html页面中的Javascript,通过与Javascript的交互,可以改变Style,调用远程方法。还可以将数据传递给Html页面,处理后再返回给Flex,完成这样的功能主要有两种方法:ExternalInterface()和navigateToUrl()。
在Flex中调用Javascript最简单的方法是使用ExternalInterface(),可以使用此API调用任意Javascript,传递参数,获得返回值,如果调用失败,Flex抛出一个异常。
ExternalInterface封装了对浏览器支持的检查,可以用available属性来查看。
ExternalInterface的使用非常简单,语法如下:
flash.external.ExternalInterface.call(function_name: String[, arg1, ...]):Object;
参数function_name是要调用的Javascript的函数名,后面的参数是Javascript需要的参数。
举个例子说明如何调用Javascript函数
Flex应用中,添加如下方法:
<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页面中有如下函数定义:
<script LANGUAGE="Javascript">
function changeDocumentTitle(a) {
window.document.title=a;
return "successful";
}
posted on 2007-02-28 20:29 ☜♥☞MengChuChen 阅读(515) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: