真才实料才是最真

Dream have no limit

统计

积分与排名

good link

最新评论

Flex与XMl通信研究

 

最近一直在网上转悠,网上的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-09-03 15:33 gavinkin555 阅读(655) 评论(5)  编辑 收藏 引用 所属分类: FLEX

评论

# re: Flex与XMl通信研究 2012-03-05 16:20 EthelFISCHER

This topic is really helpful! One fine day, article writing company assist me with writing an essay, which I was unable to complete due to individual reasons. I advise you <a href="http://www.dissertationmasters.com/">thesis</a> that will help you in your school life. All the best!  回复  更多评论   

# re: Flex与XMl通信研究 2013-05-16 03:00 check this link

You don’t need to think over where to buy resume paper at all. Expert resume writers are closer than you think. Contact Resumes leader company to go over resume writing samples or buy resume. Be confident that you will acquire first-class resume writing services.  回复  更多评论   

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