flex数据交互

flex数据交互
数据具有流动性，数据传输是指根据用户控制传递至指定目的地。数据交互是指Flex与其他程序进行数据交换，包括传递数据给其他程序和接收其他程序返回的数据。本章将详细讲解数据传输的各种方法及如何与其他程序进行交互。

21.1  数据传输的方式
Flex 3.0中的数据传输方式包括内部数据传输、文件流方式传输、XML方式传输、其他方式传输。应用程序内部的数据传输大多通过变量传递来实现。外部文件的数据可分为简单文本数据、XML数据和复杂数据。对于简单的文本数据可采用文件流方式传输。对于XML数据可采用XML方式传输。对于复杂的数据，如大型数据库中的数据，需要通过其他程序来辅助数据传输。

21.1.1  内部数据传输
内部数据传输是指应用程序内部的数据流动，而变量传递是其中最常使用的传输方式。对于同一文件或类中的变量可采用直接赋值的方式。对于不同文件或类中的变量可采用公有变量的方式。

1．直接赋值方式
直接赋值是指将一变量赋值给另一变量。以下代码将变量b的值直接赋值给变量a。

var a:int,b:int=12;

a=b;

大部分情况下，使用“=”符将两变量连接起来就实现了变量传递，但有两种情况下需要特殊处理。一种情况是两个变量的类型不相同，需要强制转换。需要说明的是，若两个变量类型相近，编译器可自动转换。例如，将int类型的变量赋值给Number类型变量时，编译器自动执行变量传递。若两个变量类型相差甚远，如Object型与Array型，就需要强制转换。

Flex 3.0中数据类型强制转换的语法如下所示。

变量名 as 强制类型

或者如下所示。

(强制类型)变量名

以下代码将int类型强制转换为Number类型。

var s:Number=y as Number;

var t:Number=(Number)y;

另一种情况是特殊的变量类型，如Array等多维数据变量。前面章节中详细介绍过数组变量。为了节约变量空间，Array类型的变量并不存储全部数据，而是存储数组的首地址。若两个数组变量直接赋值，结果是两个变量都存储了同一数组的首地址，改变任何变量中的数据也就改变了数组的内容。

以下代码中两个数组变量直接赋值，带来了错误的结果。

var a:Array,b:Array=[1,2,3];

a=b;

a[0]=100;

trace(a);           结果：100,2,3

trace(b);           结果：100,2,3

为了帮助读者理解，假设数组在内存的首地址为000001。变量赋值后，变量a、b都指向首地址000001。对变量a进行数据修改后，数组数据发生改变。但变量a、b仍然指向同一首地址。

正确的做法是使用concat方法复制变量b。

上述代码修改如下所示。

var b:Array=[1,2,3];

var a:Array=b.concat();

a[0]=100;

trace(a);           结果：100,2,3

trace(b);           结果：1,2,3

2．公有变量方式
声明变量为公有的关键字为public”。其语法如下所示。

public var 变量名:变量类型;

以下代码定义了公有变量s。

public var s:String="aafdsfdsa";

不同文件或类中使用公有变量方式传输变量，其步骤如下所示。

在工程中新建名为“Model”文件夹下，并在此文件夹下新建名为“model”的类。类中定义一公有变量a。

以下代码定义了model类。

//model.cs

package Model

{

    public class model

    {

        public static var a:String="123456";            //定义一个静态变量

    }

}

在MXML文件中调用model类的公有变量a。

以下代码在MXML文件中调用公有变量a。

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">

    <mx:Script>

        <![CDATA[

            import Model.model;

            var s:String=model.a;       //将"mode"l类中的"a"变量值传递给"s"变量

        ]]>

    </mx:Script>

    <mx:Panel title="内部数据传输" horizontalAlign="center" verticalAlign= "middle" width="288" height="148" x="109.5" y="56">

        <mx:Label text="来自model类的变量：{s}"/>

    </mx:Panel>

</mx:Application>

按下Ctrl+F11快捷键编译运行程序。运行效果如图21-1所示。

21.1.2  文件流方式传输
文件流方式传输是指数据以二进制文件流的形式流动。简单的数据可存储于文本文件中，通过Flex AIR工程中新增的File、FileStream等类可以方便地操作本地文件。

使用文件流方式传输数据的步骤如下所示。

新建AIR工程。Flex 3.0中新增AIR工程项目及对本地文件操作类。

在工程根目录中新建名为“test.txt”的文件。文件中的内容可随意。

定义File类变量，并指向“test.txt”文件。

创建File类变量的语法如下所示。

var File变量:File=new File(文件路径);

以下代码定义File类变量，并指向根目录下的“test.txt”文件。

var file:File=new File(File.applicationResourceDirectory.nativePath+ "\\test.txt");

“File.applicationResourceDirectory.nativePath”表示工程路径。

使用FileStream类打开文件“test.txt”。打开文件需要使用FileStream类，其语法如下所示。

var FileStream变量:FileStream=new FileStream();

FileStream变量.open(File变量,打开方式);

打开方式可为“FileMode.READ”、“FileMode.WRITE”、“FileMode.APPEND”、“FileMode. UPDATE”四种。本程序中使用“FileMode.READ”。以下代码使用FileStream类打开文件“test.txt”。

var stream:FileStream = new FileStream();   //定义FileStream类实例，用以处理文件流

stream.open(file,FileMode.READ);            //以读的方式打开文件

读取FileStream类中的数据。在使用FileStream类打开文件后，数据存储于FileStream变量中。可使用readUTFBytes方法读取数据。其语法如下所示。

FileStream变量.readUTFBytes();

readUTFBytes方法返回类型为String型。以下代码使用readUTFBytes方法将数据赋值给文本组件显示。

txtFile.text=stream.readUTFBytes(stream.bytesAvailable);

“stream.bytesAvailable”是readUTFBytes方法的可选参数，表示读取全部文件流数据。

在MXML的代码模式下查看完整代码。以下代码是完整的MXML程序。

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

<mx:WindowedApplicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"fontSize="13" creationComplete="initApp()">

    <mx:Script>

        <![CDATA[

            import flash.filesystem.*;             //引用filesystem下的全部类

            [Bindable]

            //定义File变量，并指向“test.txt”文件。

            var file:File=new File(File.applicationResourceDirectory. nativePath+"\\test.txt");

            private function initApp():void

            {

                //定义FileStream类实例，用以处理文件流

                var stream:FileStream = new FileStream();

                stream.open(file,FileMode.READ);    //以读的方式打开文件

                //读取文件中的内容

                txtFile.text=stream.readUTFBytes(stream.bytesAvailable);

                stream.close();                     //关闭文件流

            }

        ]]>

    </mx:Script>

    <mx:Panel title="文件流方式传输" verticalAlign="middle" horizontalAlign ="center" width="446" height="295">

        <mx:TextArea id="txtFile"  width="426" height="250"/>

    </mx:Panel>

</mx:WindowedApplication>

按下Ctrl+F11编译运行程序。运行效果如图21-2所示。

21.1.3  XML方式传输
XML优点是简单小巧、存储方便、检索快速。所以，XML常用于数据存储和数据交换。Flex 3.0使用URLLoader类可方便地传输XML数据。使用XML方式传输数据的步骤如下所示。

新建Flex工程。

新建名为“TreeMenus.xml”文件，用以存储XML数据。以下代码是“TreeMenus.xml”文件中的数据定义。

//TreeMenus.xml

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

    <menus>

        <node label="Mail">

            <node label="Inbox"/>

            <node label="Personal Folder">

                <node label="Demo"/>

                <node label="Personal"/>

                <node label="Saved Mail"/>

                <node label="bar"/>

            </node>

            <node label="Calendar"/>

            <node label="Sent"/>

            <node label="Trash"/>

        </node>

    </menus>

编写应用程序初始化处理函数initApp。函数initApp的主要处理是加载“TreeMenus.xml”文件。加载XML文件时需要定义一个URLRequest类变量，用以指明XML文件路径。其语法如下所示。

var URLRequest变量:URLRequest=new URLRequest(XML路径);

使用URLLoader类的load方法加载XML文件。其语法如下所示。

URLLoader变量.load(URLRequest变量)

以下代码定义了初始化函数initApp。

public function initApp():void                      //应用程序初始化处理函数

{

    //定义URLRequest实例，指定文件地址。

    var request:URLRequest=new URLRequest("TreeMenus.xml");

    loader.load(request);                           //加载XML文件

    loader.addEventListener(Event.COMPLETE,completeHandle);     //添加加载完成时的监听

}

“loader.addEventListener(Event.COMPLETE,completeHandle)”语句表示添加对XML加载完成事件的监听。一旦加载完成执行completeHandle函数。

完成剩余MXML代码。剩余代码包括completeHandle函数，<mx:Tree>组件设计等。以下代码是完整的MXML代码。

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

    fontFamily="simsun" fontSize="12"

    layout="absolute"width="242" height="442" creationComplete="initApp()">

    <mx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;  //引用ArrayCollection类

            import mx.rpc.events.ResultEvent;       //引用ResultEvent事件类

            //定义一个URLLoader类实例

            public var loader:URLLoader=new URLLoader();

            public var menus:XML=new XML();         //定义一个XML类实例

            public function initApp():void          //应用程序初始化处理函数

            {

                //定义URLRequest实例，指定文件地址。

                var request:URLRequest=new URLRequest("TreeMenus.xml");

                loader.load(request); //加载XML文件

                loader.addEventListener(Event.COMPLETE,completeHandle);                                                         //添加加载完成时的监听

            }

            public function completeHandle(e:Event):void                                                                            //加载完成处理函数

            {

                menus=XML(loader.data);             //数据传递给menus变量

                var results:XMLList=menus.node;     //结果集传递给results变量

                //results变量值传递给树形列表

                tree.dataProvider=results; 

            }

        ]]>

    </mx:Script>

     <mx:Tree id="tree"x="10" y="35" width="218" height="397" labelField="@label" />

    <mx:Label x="10" y="10" text="Tree Nodes From XML File"/>

</mx:Application>

<mx:Tree>组件中labelField属性指定显示内容。运行效果如图21-3所示。

21.1.4  其他方式传输
除了上述小节中介绍的数据外，Flex应用程序可能还会遇到其他类型的外部数据。例如，SQL Server数据库数据、MySQL数据库数据、Oracle数据库数据等。Flex 3.0不能直接接收这些数据，需要其他程序处理这些数据后以特定的类型，如数组型、XML型、Object型传递给Flex。有关如何与其他程序交互将在后续章节中详细介绍。

另外，Flex 3.0中新增了对本地数据库（.db格式）操作的类，可用于读取本地的数据库数据。新增了对PDF数据操作的类，可用于读取PDF数据。有关新增的特性将在后续章节中介绍。

21.2  使用<mx:HTTPService>组件与HTTP程序交互
<mx:HTTPService>组件可与所有的HTTP程序交互。例如，ASP、ASP.Net、JSP、PHP等。使用<mx:HTTPService>组件与HTTP程序交互的基本语法如下所示。

<mx:HTTPService id="HTTPService组件id" url="HTTP程序地址"/>

以下代码使用<mx:HTTPService>组件调用“www.google.cn”。

<mx:HTTPService id="httpser" url=" www.google.cn"/>

所有的HTTP程序都支持的网址带参方式，其语法如下所示。

网址?参数名1=值1&参数名2=值2…&参数名n=值n

以下代码传递参数a、b、c。

http://www.baidu.com?a=11&b=22&c=33

网址带参方式的优点是传参简单，但缺点是参数必须先转化为字符串类型，因为网址中只能是字符串类型。另外，若传递的参数较多，网址字符串就会变得很长。

使用网址带参方式能把Flex应用程序中的数据传递给HTTP程序。HTTP程序接收数据后进行处理，并返回Flex可识别的数据类型，如数组型、XML型、Object型等。

<mx:HTTPService>组件返回的数据存储于ResultEvent类中。使用<mx:HTTPService>组件的result事件可处理HTTP程序返回的数据。其语法如下所示。

private function 处理函数名(e:ResultEvent):void

{

    e.result                            //返回数据

}

<mx:HTTPService … result="处理函数名">

返回的数据存储于ResultEvent类的result属性下。各种数据的具体位置与HTTP程序的处理结果有关。建议采用断点调试的方法确定数据的具体位置，即调试时查看ResultEvent变量的内部结构。

以下代码传递用户名和密码给HTTP程序，HTTP程序处理后返回验证结果。

import mx.rpc.events.ResultEvent;                       //引用ResultEvent类

import mx.controls.Alert;                               //引用Alert类

private function showResult(e:ResultEvent):void

{

    Alert.show(e.result as String);                     //显示验证结果

}

…

<mx:HTTPService id="hs"

    url="http://www.aaaa.com?username=a&password=123"

    result="showResult(event)"/>

21.3  <mx:HTTPService>组件实例
本小节以实例讲解如何使用<mx:HTTPService>组件与HTTP程序交互。实例实现的功能为：Flex客户端传递操作数参数给ASP.NET程序，ASP.NET程序计算全部参数的和，并将结果返回给Flex应用程序。

21.3.1  编写ASP.NET程序
本实例的ASP.NET程序使用Visual Studio 2005（简称VS 2005）编写，创建步骤如下所示。

双击打开VS 2005。

单击“文件”|“新建”|“网站…”命令，打开“新建网站”对话框，如图21-4所示。



图21-4  新建网站对话框

在“模板”区域选择“ASP.NET网站”模板。在“位置”文本框中输入网站的存放路径。单击“确定”按钮完成网站的创建。

编写ASP.NET代码。创建网站工程后自动生成了“Default.aspx”文件。按下F7快捷键打开“Default.aspx.cs”文件。“Default.aspx.cs”文件是“Default.aspx”网页的后台代码页。

以下代码是“Default.aspx.cs”文件的具体代码，主要是实现连加功能，并返回XML数据。

//Default.aspx.cs

using System;                           //引用System名称空间下的所有类

using System.Data;                      //引用Data名称空间下的所有类

using System.Configuration;             //引用Configuration名称空间下的所有类

using System.Web;                       //引用Web名称空间下的所有类

using System.Web.Security;              //引用Security名称空间下的所有类

using System.Web.UI;                    //引用UI名称空间下的所有类

using System.Web.UI.WebControls;        //引用WebControls名称空间下的所有类

using System.Web.UI.WebControls.WebParts;//引用WebParts名称空间下的所有类

using System.Web.UI.HtmlControls;       //引用HtmlControls名称空间下的所有类

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)                                                                //页面初始化处理函数

    {

        int sum = 0;                    //定义int型变量sum，并初始化为0

        //接收网址中名为“num”的参数。多个“num”参数时，结果形如“1,2,3,4”。

        string s=Request.QueryString["num"];

        if (s != null)

        {

            string[] arr = s.Split(',');//将参数值分离并存储于arr数组中

            foreach (string i in arr)   //使用循环计算全部参数值的和

            {

                sum += Convert.ToInt32(i);

            }

        }

        //返回XML数据。元素标签为<ComputeResult>。

        Response.Write("<ComputeResult>"+sum.ToString()+"</ComputeResult>");

    }

}

（12）       本程序中引用名称空间及Page_Load函数的代码都是VS 2005自动生成的。

（13）       Request类的QueryString方法接收网址中传递来的数据。若有多个同名参数，结果以“,”分隔，形如“1,3,4,33”。

（14）       Convert类的ToInt32方法将String型转为Int32型，用于计算。

（15）       Response类的Write方法输出数据。本程序中将计算结果放于<ComputeResult>标签中返回。

按下Ctrl+F5快捷键编译运行ASP.NET程序。用户可自带参数测试程序是否正确。例如，在浏览器中输入“http://localhost/ASP.NetExample/Default. aspx?num=2&num=5”。

单击“生成”|“发布网站”命令，弹出【发布网站】对话框，如图21-5所示。

在“目标位置”文本框中输入发布网站的本地路径，其他可默认。单击“确定”按钮，完成发布网站。发布网站的结果是生成不带后台文件（.cs文件）的网站。

21.3.2  创建虚拟目录
IIS是Internet Information Service的简称，用以提供对ASP、ASP.Net等HTTP程序的解释。Windows系统默认安装时未带IIS程序，用户可将系统安装光盘插入光驱安装。本书略过IIS的安装。

IIS的默认路径为“系统盘:/Inetpub/wwwroot”，用户可将网站放置于此路径下。若用户需要将网站放置于别处，则需要配置虚拟目录，其步骤如下所示。

单击“开始”|“控制面板”命令，打开控制面板，如图21-6所示。



图21-6  控制面板

双击“管理工具”|“Internet信息服务”项，打开“Internet信息服务”对话框，如图21-7所示。



图21-7  Internet信息服务对话框

在左侧树形列表中右击“默认网站”，选择“新建”|“虚拟目录…”命令，弹出“虚拟目录创建向导”对话框，如图21-8所示。

单击“下一步”按钮，弹出“虚拟目录创建向导”第二步对话框，如图21-9所示。

         

图21-8 “虚拟目录创建向导”对话框               图21-9 “虚拟目录创建向导”第二步对话框

在“别名”文本框中输入虚拟目录别名。单击“下一步”按钮，弹出“虚拟目录创建向导”第三步对话框，如图21-10所示。

在“目录”文本框中输入网站路径。单击“下一步”，弹出“虚拟目录创建向导”第四步对话框，如图21-11所示。

        

图21-10 “虚拟目录创建向导”第三步对话框         图21-11 “虚拟目录创建向导”第四步对话框

根据需要选择项目，一般默认即可。单击“下一步”按钮，完成虚拟目录的创建。

在新建的虚拟目录中右击相应的网页，如“Default.aspx”，选择“浏览”命令测试网页是否运行正常。

21.3.3  编写Flex程序
编写Flex程序的步骤如下所示。

新建Flex工程。

设计外观模型。

本实例中使用的可视组件包括Label组件、Button组件、DataGrid组件等。

以下代码是外观模型的MXML代码。

<mx:Panel title="使用HTTPService交互" width="368" height="334" x="78" y="30" layout="absolute">

    <mx:Label text="参数:" x="119" y="26"/>

    <mx:TextInput id="txtPara" x="161" y="24" width="95"/>  <!--输入框组件-->

    <!--DataGrid组件，用以显示参数数据-->

    <mx:DataGrid id="dg" x="76" y="64" height="166" width="179">

        <mx:columns>

            <mx:DataGridColumn dataField="para" headerText="参数"/>

        </mx:columns>

    </mx:DataGrid>

    <mx:Button label="添加" click="addData();" x="277" y="26"/>  <!--"添加"按钮组件-->

    <mx:Button label="清空" click="delData();" x="277" y="64"/>  <!--"清空"按钮组件-->

    <mx:Label text="连加结果为:" x="58" y="253"/>

    <mx:Label x="126" y="253" id="lblResult"/>  <!--Label组件，用以显示结果-->

    <mx:Button label="计算" click="addHandle();" x="277" y="249"/>   <!--"计算"按钮组件-->

</mx:Panel>

外观模型效果如图21-12所示。



图21-12  <mx:HTTPService>实例的外观效果

添加<mx:HTTPService>组件。在<mx:HTTPService>组件的result事件中显示ASP.NET程序返回的数据。以下代码定义了<mx:HTTPService>组件及result事件的处理函数。

private function httpHandle(e:ResultEvent):void //执行<mx:HTTPService>组件后的处理函数

{

    lblResult.text=e.result.ComputeResult;//显示结果

}

…

<!--HTTPService组件，用以调用HTTP服务-->

<mx:HTTPService id="httpser" showBusyCursor="true" result="httpHandle (event);" useProxy="false"/>

前面的ASP.NET程序将结果存于<ComputeResult>标签中。Flex程序接收后具体位置在“e.result.ComputeResult”中。

编写按钮处理函数。本例中有三个按钮“添加”、“清空”、“计算”。“添加”按钮的处理是将输入框中的数据加入到DataGrid组件中。“清空”按钮的处理是清空DataGrid组件。“计算”按钮的处理是将DataGrid组件中数据传递给ASP.NET程序处理。以下代码定义了各个按钮的处理函数。

import mx.rpc.events.ResultEvent;               //引用ResultEvent类

import mx.controls.Alert;                       //引用Alert类

[Bindable]

private var arr:Array=new Array();              //定义数组arr，用以存放参数

private function addHandle():void               //单击"计算"按钮时的处理函数

{

    httpser.url="http://localhost:88/ASP.NetExample/Default.aspx";                                                              //初始化url

    if(arr.length>0)                            //若有参数时，字符串加上"?"

        httpser.url+="?";

    for(var i:int=0;i<arr.length;i++)           //添加参数，形如"num=1"

    {

        if(i!=arr.length-1)

            httpser.url+="num="+arr[i].para.toString()+"&";

        else

            httpser.url+="num="+arr[i].para.toString();

    }

    httpser.send();                         //开始执行<mx:HTTPService>组件

}

private function addData():void             //单击"添加"按钮时的处理函数

{

    var obj:Object=new Object();            //定义Object变量

    obj.para=txtPara.text;                  //Object变量的para属性加入数据

    arr.push(obj);                          //添加Object变量到数组arr

    dg.dataProvider=arr;                    //将数组arr绑定至DataGrid组件上显示

    txtPara.text="";                        //清空输入框

    dg.validateNow();                       //刷新DataGrid组件

}

private function delData():void             //单击"清空"按钮时的处理函数

{

    arr=null;                               //清空数组arr

    dg.dataProvider=arr;                    //将数组arr绑定至DataGrid组件上显示

    dg.validateNow();                       //刷新DataGrid组件

}

需要注意的是，<mx:HTTPService>组件的url属性指向的HTTP程序必须正确。用户可在浏览器中输入HTTP程序路径测试。

按下Ctrl+F11快捷键编译运行程序。运行效果如图21-13所示。



图21-13  <mx:HTTPService>实例运行效果

21.4  使用<mx:WebService>组件与WebService程序交互
Flex 3.0中的<mx:WebService>组件专门用于调用和处理WebService。本小节将介绍WebService的相关知识及如何使用<mx:WebService>组件。

21.4.1  WebService概述
WebService是一种在互联网中提供服务的技术。WebService技术标准由各大软件开发商制定，主要解决了不同开发语言间的沟通问题。例如，.Net程序调用WebService服务，而此WebService服务是由Java语言开发的。

WebService具有通用性。不论用何种语言开发的WebService服务，调用的结果都是一致的。这是因为WebService有自身的标准，与开发语言无关。用户可使用几乎任何语言调用WebService服务，只要能找到WebService服务并且传递的参数正确。

WebService技术在国内外已有较广泛的应用。例如，每日的天气、股票走势等都有免费的WebService服务。Flex应用程序中使用<mx:WebService>组件可方便地调用WebService服务。后续章节的实例中将介绍如何使用Visual Studio 2005开发WebService。

21.4.2  如何使用<mx:WebService>组件
<mx:WebService>组件的使用方法与<mx:HTTPService>组件的使用方法大同小异。最主要的区别在于参数的传递方式。<mx:WebService>组件中传递参数的语法如下所示。

<mx:WebService id=" WebService组件id"

    wsdl="WebService地址">

    <mx:operation name="方法名">

        <mx:request>

            <参数名1>值1</参数名1>

            <参数名2>值2</参数名2>

            …

        </mx:request>

    </mx:operation>

</mx:WebService>

（16）       <mx:operation>组件表示WebService的一个方法，必须与WebService中的定义名称相同。

（17）       <mx:request>组件存储参数，参数值以标签形式存储。需要注意的是参数的名称及顺序必须与WebService中的定义相同。

以下代码定义了一个<mx:WebService>组件。<mx:WebService>组件中包含带参的getMostPopularPosts方法。

<mx:WebService id="wsBlogAggr"

    wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"

    useProxy="false">

    <mx:operation name="getMostPopularPosts">

        <mx:request>

            <daysBack>30</daysBack>

            <limit>{cbxNumPosts.value}</limit>

        </mx:request>

    </mx:operation>

</mx:WebService>

本程序中limit参数值是动态的，绑定于下拉框组件cbxNumPosts上。

<mx:WebService>组件的方法也可不显性表示参数，只需调用方法时指明即可。

以下代码中<mx:WebService>组件不显性定义参数。

wsBlogAggr.getMostPopularPosts(30,cbxNumPosts.value).send();

…

<mx:WebService id="wsBlogAggr"

    wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"

    useProxy="false">

    <mx:operation name="getMostPopularPosts"/>

</mx:WebService>

调用<mx:Webservice>组件中的方法的语法如下所示。

WebService变量.方法.send();

以下代码调用getMostPopularPosts方法。

wsBlogAggr.getMostPopularPosts.send();

<mx:operation>组件中的result事件用以处理返回数据。使用方法与<mx:HTTPService>组件相同。

以下代码调用地址为“http://www.wopos.com/webservice/Stock.asmx”的WebService服务并显示结果。

<?xml version="1.0" encoding="GB2312"?>

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"fontSize="13"creationComplete="wsStock.HelloWopos.send();">

    <mx:Script>

        <![CDATA[

            import mx.rpc.events.ResultEvent;           //引用ResultEvent类

            import mx.controls.Alert;                   //引用Alert类

            //HelloWopos方法返回数据时的处理函数

            private function wsHandle(e:ResultEvent):void

            {

                lbl.text=e.result as String;            //显示返回数据

            }

        ]]>

    </mx:Script>

    <mx:Panel title="使用WebService交互" horizontalAlign="center" verticalAlign="middle" width="398" height="138">

        <mx:Label id="lbl" textAlign="center" width="378" height="24"/>

    </mx:Panel>

    <mx:WebService id="wsStock" showBusyCursor="true"

        wsdl="http://www.wopos.com/webservice/Stock.asmx?wsdl"

        fault="Alert.show(event.fault.faultString, 'Error')">

        <mx:operation name="HelloWopos" result="wsHandle(event);"/>

     </mx:WebService>

</mx:Application>

本程序在creationComplete事件，即初始化事件时调用WebService的方法。结果显示于Label组件上。

程序的运行效果如图21-14所示。

21.5  <mx:WebService>组件实例
本小节的实例实现了如下功能：Flex程序通过WebService获取SQL Server 2000数据库中的数据，并将数据显示于DataGrid组件上。涉及的技术包括创建SQL Server 2000数据库、使用VS 2005编写WebService、使用<mx:WebService>组件等。

21.5.1  创建数据库
设计数据库名为“Company”。数据库中只有一张名为“Employee”的表。表的列设计如表21-1所示。

表21-1 “Employee”表的列设计

列    名
类    型
是否为主码

employeeId
Char(20)
是

firstName
Char(50)
 

lastName
Char(50)
 


建立数据库步骤如下所示。

单击“开始”|“所有程序”|“Microsoft SQL Server”|“查询分析器”命令，打开查询分析器，如图21-15所示。



图21-15  查询分析器

在查询分析器的编辑区中输入SQL语句。创建数据库的SQL语句如下所示。

/*创建数据库Company*/

create database Company

on

( NAME = 'Company_dat',

    FILENAME = 'E:\Flex基础教程\源程序\第7章\GetDataFromSQLServer2000 \Company.mdf',

    SIZE = 10,

    MAXSIZE = 50,

    FILEGROWTH = 5 )

LOG ON

( NAME = 'Company_log',

    FILENAME = 'E:\Flex基础教程\源程序\第7章\GetDataFromSQLServer2000 \Company.ldf',

    SIZE = 5MB,

    MAXSIZE = 25MB,

    FILEGROWTH = 5MB )

GO

/*设置当前数据库为Company*/

use  Company

go

/*创建表Employee*/

create table Employee

(

  employeeId char(20) primary key,

  firstName char(50) ,

  lastName char(50)

)

/*插入三组测试数据*/

insert into Employee (employeeId,firstName,lastName) values ('0','a','aaa')

insert into Employee (employeeId,firstName,lastName) values ('1','b','bbb')

insert into Employee (employeeId,firstName,lastName) values ('2','c','ccc')

数据库所在路径的用户可自行更改。

选择创建数据库Company的全部SQL语句（到第一个“go”为止）。

单击  按钮执行SQL语句。

选择设置当前数据库为Company的全部SQL语句（从第一个“go”到第二个“go”为止）。

单击  按钮执行SQL语句。

选择剩余的SQL语句（从第二个“go”至最后）。

单击  按钮执行SQL语句。

21.5.2  编写WebService
使用VS 2005编写WebService的步骤如下所示。

单击“文件”|“新建”|“网站”命令，弹出“新建网站”对话框，如图21-16所示。

选择“ASP.NET Web服务”模板，在“位置”文本框中输入项目路径。单击“确定”按钮，完成项目的创建。

编写WebService。在新建“ASP.NET Web服务”工程后会自动生成一个名为“Service.asmx”的文件。asmx格式文件即为WebService文件。按下F7快捷键，打开“Service.asmx”的后台代码页“Service.cs”。



图21-16  新建网站对话框

以下代码是“Service.cs”文件的具体定义。主要是定义了GetData方法获取数据库中的数据，并返回数组类型。

//Service.cs

using System;                                   //引用System名称空间下的类

using System.Web;                               //引用Web名称空间下的类

using System.Web.Services;                      //引用Services名称空间下的类

using System.Web.Services.Protocols;            //引用Protocols名称空间下的类

using System.Data.SqlClient;                    //引用SqlClient名称空间下的类

using System.Collections;                       //引用Collections名称空间下的类

using System.Data;                              //引用Data名称空间下的类

[WebService(Namespace = "http://tempuri.org/")]//默认的名称空间

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class Service : System.Web.Services.WebService

{

    public Service ()                           //默认构造函数

    {

    }

    public class Employee                       //自定义类，用以存储数据

    {

        public string employeeId;

        public string firstName;

        public string lastName;

    }

     [WebMethod]

     [System.Xml.Serialization.XmlInclude(typeof(Employee))]    //声明“Employee”类可写入XML

    public ArrayList GetData()                      //获得数据库数据

    {

        SqlConnection conn = new SqlConnection();  //定义“SqlConnnection”类实例

        //数据库连接字符串

        conn.ConnectionString = "Data Source=.;Initial Catalog=Company; Persist Security Info=True;User ID=sa;Password=sa";

        //定义“SqlCommand”实例，从“Employee”表中取数据

        SqlCommand command = new SqlCommand( "select * from Employee",conn);

        conn.Open();                                //打开连接

        SqlDataAdapter da = new SqlDataAdapter();   //定义“SqlDataAdapter”类实例

        //将“command”值传递给“SqlDataAdapter”的“SelectCommand”属性

        da.SelectCommand = command;

        DataSet ds = new DataSet();                 //定义“DataSet”类实例

        da.Fill(ds, "tables");                      //取数据

        ArrayList al = new ArrayList();             //定义“ArrayList”类实例

        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)   //将全部数据存储于al变量中

        {

            Employee em = new Employee();               //定义“Employee”类实例

            //添加数据到“al”变量中

              em.employeeId= ds.Tables[0].Rows[i]["employeeId"].ToString().Trim();

              em.firstName = ds.Tables[0].Rows[i]["firstName"].ToString().Trim();

              em.lastName=ds.Tables[0].Rows[i]["lastName"].ToString().Trim();

            al.Add(em);

        }

        conn.Close();                                   //关闭数据库

        return al;

    }

}

（18）       引用名称空间、类声明、默认构造函数等代码都是VS 2005自动生成的。

（19）       “[WebService(Namespace = "http://tempuri.org/")]”表示WebService的名称空间。

（20）       [WebMethod]关键字指明此函数为WebService的方法。

（21）       DataSet类型是一种多表数据类型。若数据以此类型返回，Flex程序将很难处理。所以本程序中自定义了Employee类，将数据全部存储于ArrayList类型变量中。

（22）       由于Employee类是自定义的，WebService在生成WSDL（WebService标准文件）时并不认识，所以需要声明。声明语句为“[System.Xml.Serialization.XmlInclude (typeof(Employee))]”。

（23）       数据库连接语句“Data Source=.;Initial Catalog=Company;Persist Security Info=True; User ID=sa;Password=sa”必须正确。用户可根据实际设置修改用户名和密码。

（24）       获取Employee表全部数据的SQL语句为“select * from Employee”。

按下Ctrl+F5快捷键，编译运行WebService程序。若程序无误会显示WebService中的方法“GetData”。

单击“生成”|“发布网站”命令，发布WebService网站。

为WebService网站创建虚拟目录。创建步骤与<mx:HTTPService>实例中相同。

在IIS中右击“Service.asmx”文件，选择“浏览”命令，测试WebService。

21.5.3  编写Flex程序
编写Flex程序的步骤如下所示。

新建Flex工程。

添加DataGrid组件。

DataGrid组件用以显示来自WebService的返回数据。以下代码是DataGrid组件MXML代码。

<mx:Panel title="获取SQL Server数据库职工数据">

    <!--定义数据列表，绑定来自数据库的数据-->

    <mx:DataGrid id="dgEmployee" width="397" dataProvider="{WS.GetData. lastResult}">

        <mx:columns>

            <mx:DataGridColumn headerText="用户编号" dataField="employeeId"/>                                                                <!--数据列-->

            <mx:DataGridColumn headerText="姓" dataField="firstName"/>                                                                      <!--数据列-->

            <mx:DataGridColumn headerText="名" dataField="lastName"/>                                                                       <!--数据列-->

        </mx:columns>

    </mx:DataGrid>

</mx:Panel>

DataGrid组件的dataProvider属性绑定于“WS.GetData.lastResult”，即<mx:WebService>组件GetData方法的结果集上。

添加<mx:WebService>组件。以下代码是<mx:WebService>组件的MXML代码。

<!--定义"WebService"组件，连接来自外部的WebService-->

<mx:WebService id="WS" wsdl="http://localhost:88/GetDataFromSQLServer2000/ Service.asmx?WSDL"

    fault="Alert.show(event.fault.faultString, 'Error')" showBusyCursor ="true">

    <mx:operation name="GetData" resultFormat="object" />

</mx:WebService>

<mx:WebService>组件的wsdl属性指明WebService的地址，用户可根据实际设置修改。

完成剩余代码。剩余代码包括应用程序初始化时调用WebService、引用Alert类等。

以下代码是完整的MXML代码。

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

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"creationComplete="WS.GetData.send();">

    <mx:Script>

        <![CDATA[

        import mx.controls.Alert;                       //引用Alert类

    ]]>

    </mx:Script>

    <mx:Panel >

        <!--定义数据列表，绑定来自数据库的数据-->

        <mx:DataGrid id="dgEmployee" width="397" dataProvider="{WS.GetData. lastResult}">

            <mx:columns>

                <mx:DataGridColumn headerText="用户编号" dataField= "employeeId"/>                                               <!--数据列-->

                <mx:DataGridColumn headerText="姓" dataField="firstName"/>                                                              <!--数据列-->

                <mx:DataGridColumn headerText="名" dataField="lastName"/>                                                               <!--数据列-->

            </mx:columns>

        </mx:DataGrid>

    </mx:Panel>

    <!--定义"WebService"组件，连接来自外部的WebService-->

    <mx:WebService id="WS" wsdl="http://localhost/GetDataFromSQLServer2000 /service.asmx?WSDL"

        fault="Alert.show(event.fault.faultString, 'Error')">

        <mx:operation name="GetData" resultFormat="object" />

    </mx:WebService>

</mx:Application>

按下Ctrl+F11快捷键，编译运行程序。运行效果如图21-17所示。



图21-17  读取SQL Server 2000数据库数据效果图

21.6  使用Fluorine网关与ASP.NET类交互
上面章节中介绍了使用<mx:HTTPService>组件与ASP.NET网页进行交互。但这种方式的效率不如直接与ASP.NET类交互。Flex 3.0应用程序与ASP.NET类交互的难点在于，两种语言的数据类型几乎完全不同，不能正常交互。Fluorine网关的出现解决了这种转换问题。本章将详细介绍Fluorine网关的相关内容及使用方法。

21.6.1  Fluorine简介
Fluorine是一种开源的AMF（ActionScript Messaging Formatter）网关，专门负责Flex 3.0与.NET交互时的数据类型转换。Fluorine现支持ActionScript 2.0和ActionScript 3.0，所以Fluorine也可作为Flash与.NET交互时的AMF网关。Fluorine开发团队将Fluorine项目制作成Virsual Stdio中的模板，方便用户安装和配置。结合renaun团队开发的基于MXML的第三方组件RemoteObjectAMF0，用户可以有效、快速地与ASP.NET类进行交互。

现Fluorine网关支持转换的类型如表21-2所示。

表21-2  Fluorine网关支持转换的类型说明

类    型
说    明

Strongly Typed Objects（强类型对象）
使用“flash.net.registerClassAlias”类可以给自定义类取别名。若未注册别名，则在传递给服务器端时会被当作未名的对象。若注册别名，则在传递时能被正确地识别


续表 

类    型
说    明

Custom serialization（自定义串形格式化）
使用“flash.util.IExternalizable”类可自定义数据如何格式化

ArrayCollection（数组集）
ActionScript中的ArrayCollection类型可被Fluorine格式化为“com.TheSilent Group.Fluorine.AMF3.ArrayCollection”类型，对应.NET中的ArrayList类型

ByteArray（二进制数组）
ActionScript中的ByteArray类型被Fluorine格式化为“com.TheSilentGroup. Fluorine.AMF3.ByteArray”类型，对应.NET中的Byte类型


21.6.2  Fluorine的下载与安装
Fluorine开源项目的主页为“http://fluorine.thesilentgroup.com/fluorine/index.html”。

1．下载Fluorine
下载步骤如下所示。

在浏览器中输入网址后，打开官方主页，如图21-18所示。



图21-18  Fluorine官方主页

左边树形列表中展开“Download”结节，在右侧页面中单击“download”链接开始下载。

2．安装Fluorine
安装步骤如下所示。

双击安装包“fluorine.exe”开始安装，弹出Fluorine安装第一步对话框，如图21-19所示。

单击“Next”按钮，弹出选择安装路径对话框，如图21-20所示。

      

图21-19  Fluorine安装第一步对话框                    图21-20  选择安装路径对话框

在路径文本框中输入安装路径，单击“Next”按钮，弹出选择开始菜单名称对话框，如图21-21所示。

单击“Next”按钮，弹出安装说明对话框，如图21-22所示。

     

图21-21  选择开始菜单名称对话框                    图21-22  安装说明对话框

确认安装无误后，单击“Install”按钮，完成安装。

21.6.3  第三方组件RemoteObjectAMF0的使用方法
RemoteObjectAMF0组件是一种基于MXML的第三方组件，用于连接AMF网关。下载地址为“http://renaun.com/blog/flex-components/remoteobjectamf0/”。

使用RemoteObjectAMF0组件的步骤如下所示。

将RemoteObjectAMF0组件的源文件放置在工程中。RemoteObjectAMF0组件的源文件是“src”文件夹下的“com”文件夹。可将“com”文件夹全部复制至工程根目录下。

引用RemoteObjectAMF0组件所在的包。查看RemoteObjectAMF0组件的类定义时，可发现RemoteObjectAMF0组件的包为“com.renaun.rpc.*”。引用RemoteObjectAMF0组件的包的语法如下所示。

xmls:名称=" RemoteObjectAMF0组件的包"

以下代码在<mx:Application>组件中引用RemoteObjectAMF0组件的包，并定义名为“renaun”的名称空间。

<mx:Application … xmls:renaun="com.renaun.rpc.*" >

MXML文件中定义RemoteObjectAMF0组件。RemoteObjectAMF0组件的定义语法如下所示。

<名称空间:RemoteObjectAMF0

    endpoint="AMF网关地址"

    id=" RemoteObjectAMF0组件id"

    source="指向调用的类">

    <名称空间:methods>

        <名称空间:method name="方法名" result="调用成功后的处理函数"/>

    </名称空间:methods>

</名称空间:RemoteObjectAMF0>

（25）       RemoteObjectAMF0组件的endpoint属性指明AMF网关地址。对于Fluorine网关，其地址为“Gateway.aspx”网页所处的地址。

（26）       RemoteObjectAMF0组件的source属性指向类的名称空间。

（27）       <名称空间:method>组件的name属性指向类中的方法，必须与类中的定义相同。

（28）       <名称空间:method>组件的result事件处理返回的数据。使用方法与<mx:HTTPService>组件的result事件相同。

以下代码定义了一个RemoteObjectAMF0组件与“FluorineExample.Services. GetSQL Server2000Data”名称空间下的类交互。

<renaun:RemoteObjectAMF0

        endpoint="http://localhost/FluorineExample/Gateway.aspx"

        id="fs"

        source="FluorineExample.Services.GetSQLServer2000Data"

        showBusyCursor="true"

        >

        <renaun:methods>

            <renaun:method

                name="GetData"

                result="GetDataHandle(event)"

            />

            <renaun:method

                name="InsertData"

                result="InsertDataHandle(event)"

            />

        </renaun:methods>

    </renaun:RemoteObjectAMF0>

调用RemoteObjectAMF0组件中的方法的语法如下所示。

RemoteObjectAMF0组件变量名.方法名(参数1,参数2…);

需要注意的是，参数的顺序必须与类中的定义相同。

以下代码调用类中的InsertData方法。

fs.InsertData("111","2222",txtee.text);

21.6.4  Fluorine实例
本实例将从SQL Server 2000数据库中取出通知信息显示在Flex端。在Flex应用程序中可插入新的通知到数据库。本实例涉及的主要技术包括：创建SQL Server 2000数据库、定义ASP.NET类、Flex 3.0通过Fluorine与ASP.NET类进行交互。

使用Fluorine网关与ASP.NET类交互的步骤如下所示。

创建数据库。数据库名为“School”，表名为“Notes”，表的列设计如表21-3所示。

表21-3 “Notes”表的列设计

列    名
类    型
是否为主码

noteId
Char(20)
是

title
Char(50)
 

content
Char(200)
 

publisher
Char(20)
 


以下代码是创建“School”数据库的SQL语句。

/*创建数据库School*/

create database School

on

( NAME = 'School_dat',

    FILENAME = 'E:\Flex基础教程\源程序\第7章\FluorineExample\School.mdf',

    SIZE = 10,

    MAXSIZE = 50,

    FILEGROWTH = 5 )

LOG ON

( NAME = 'Company_log',

    FILENAME = 'E:\Flex基础教程\源程序\第7章\FluorineExample\School.ldf',

    SIZE = 5MB,

    MAXSIZE = 25MB,

    FILEGROWTH = 5MB )

GO

/*设置当前数据库为School*/

use  School

go

/*创建表Notes*/

create table Notes

(

    noteId char(20) primary key,

    title char(50) ,

    content char(200),

    publisher char(20)

)

/*插入三组数据*/

insert into Notes(noteId,title,content,publisher) values ('1','aaaaaa', 'aaaaaaaaaaaaaaaaaaaaa','a')

insert into Notes(noteId,title,content,publisher) values ('2','bbbbbb', 'bbbbbbbbbbbbbbbbbbbbb','b')

insert into Notes(noteId,title,content,publisher) values ('3','cccccc', 'ccccccccccccccccccccc','c')

建立数据库的具体方法与WebService实例中相同，读者可参看WebService实例中的数据库设计。

新建Fluorine项目。安装Fluorine后，Visual Stdio 2005中自动新增名为“Fluorine ASP.NET Web Application”的模板。创建工程的具体方法可参看WebService实例。

设计ASP.NET类。在自动生成的代码文件夹“App_Code”下新建名为“GetSQLServer2000Data.cs”的类文件。GetSQLServer2000Data类中定义了两个方法：GetData和InsertData。GetData方法获得全部通知，并以DataSet类型返回。InsertData方法添加数据到数据库。以下代码定义了GetSQLServer2000Data类。

//GetSQLServer2000Data.cs

namespace FluorineExample.Services                  //类所在的名称空间，可自定义。

{

    public class GetSQLServer2000Data

    {

        public GetSQLServer2000Data()               //默认构造函数

        {

        }

        public DataSet GetData()                    //获得数据库数据

        {

            SqlConnection conn = new SqlConnection();       //定义“SqlConnnection”类实例

            //数据库连接字符串

            conn.ConnectionString = "Data Source=.;Initial Catalog=School; Persist Security Info=True;User ID=sa;Password=sa";

            //定义“SqlCommand”实例，从“Notes”表中取数据

            SqlCommand command = new SqlCommand("select * from Notes", conn);

            conn.Open();//打开连接

            SqlDataAdapter da = new SqlDataAdapter();       //定义“SqlDataAdapter”类实例

            //将“command”值传递给“SqlDataAdapter”的“SelectCommand”属性

            da.SelectCommand = command;

            DataSet ds = new DataSet();                 //定义“DataSet”类实例

            da.Fill(ds, "tables");                      //取数据

            conn.Close();                               //关闭数据库

            return ds;

        }

        //插入数据函数

        public void InsertData(string title, string content, string publisher)

        {

            SqlConnection conn = new SqlConnection();   //定义“SqlConnnec tion”类实例

            //数据库连接字符串

            conn.ConnectionString = "Data Source=.;Initial Catalog=School; Persist Security Info=True;User ID=sa;Password=sa";

            SqlCommand command = new SqlCommand("select Max(noteId) from Notes", conn);

            conn.Open();                                //打开连接

            SqlDataAdapter da = new SqlDataAdapter();       //定义“SqlDataAdapter”类实例

            //将“command”值传递给“SqlDataAdapter”的“SelectCommand”属性

            da.SelectCommand = command;

            DataSet ds = new DataSet();                 //定义“DataSet”类实例

            da.Fill(ds, "tables");                      //取数据

            //新的id为最大noteId+1

            string newid=(Convert.ToInt32(ds.Tables["tables"].Rows[0][0]. ToString())+1).ToString();

            //SQL插入语句

            command = new SqlCommand("insert into Notes values('" + newid + "','" + title.Trim() + "','" + content.Trim() + "','" + publisher.Trim()+ "')",conn);

            command.ExecuteNonQuery();                  //执行SQL语句

            conn.Close();

        }

    }

}

（29）       “namespace FluorineExample.Services”指明类所处的名称空间。有了名称空间就能准确地定位类。

（30）       用户应根据实际配置修改数据库字符串“Data Source=Initial Catalog=School;Persist Security Info=True;User ID=sa;Password=sa”。

（31）       Fluorine网关会将.NET中的DataSet类型转换为Flex能够识别的Object类型，所以GetData方法可以使用DataSet类型返回数据。

（32）       通知id由程序自动计算。计算方法是最大id加1。

在VS 2005中按下Ctrl+F5快捷键编译运行程序。

单击“生成”|“发布网站”命令，发布网站。

为网站设置虚拟目录。

在IIS中，右击“Gateway.aspx”文件，选择“浏览”命令，测量运行是否正常。“Gateway.aspx”文件运行时并无任何可见效果。

将RemoteObjectAMF0组件源文件复制至工程根目录下。

引用RemoteObjectAMF0组件的包，并定义名称空间。以下代码引用了RemoteObjectAMF0组件的包，并定义名称空间“renaun”。

<mx:Application … xmls:renaun="com.raun.rpc.*">

定义RemoteObjectAMF0组件。以下代码定义RemoteObjectAMF0组件指向GetSQLServer2000Data类。

<!--第三方网关组件，用以连接AMF网关-->

    <renaun:RemoteObjectAMF0

        endpoint="http://localhost:88/FluorineExample/Gateway.aspx"

        id="fs"

        source="FluorineExample.Services.GetSQLServer2000Data"

        showBusyCursor="true"

        >

        <renaun:methods>

            <renaun:method

                name="GetData"

                result="GetDataHandle(event)"

            />

            <renaun:method

                name="InsertData"

                result="InsertDataHandle(event)"

            />

        </renaun:methods>

    </renaun:RemoteObjectAMF0>

endpoint属性指向Fluorine网关的“Gateway.aspx”页。

source属性指向类。使用类的名称空间能准确定位类。

设计外观模型。本程序中的可视化组件包括DataGrid组件、Label组件、TextInput组件、Button组件等。

以下代码是外观模型的MXML代码。

<mx:Panel width="455" height="462" title="通知">

    <mx:DataGrid id="dg">

        <mx:columns>

            <mx:DataGridColumn headerText="编号" dataField="0"/>

            <mx:DataGridColumn headerText="标题" dataField="1"/>

            <mx:DataGridColumn headerText="内容" dataField="2"/>

            <mx:DataGridColumn headerText="发布者" dataField="3"/>

        </mx:columns>

    </mx:DataGrid>

    <mx:Canvas width="395" height="243">

        <mx:Label x="37" y="27" text="标题"/>

        <mx:TextInput x="80" y="25" id="txtTitle"/>

        <mx:Label x="37" y="155" text="发布者"/>

        <mx:TextInput x="80" y="153" id="txtPublisher"/>

        <mx:Label x="37" y="53" text="内容"/>

        <mx:TextArea x="80" y="55" width="278" height="90" id="txtContent"/>

        <mx:Buttonx="121"y="198"label="添加"id="btnInsert" click="fs. InsertData(txtTitle.text,txtContent.text,txtPublisher.text);"/>

    </mx:Canvas>

</mx:Panel>

GetData方法返回的类型为DataSet。经Fluorine转换后，在Flex 3.0中以Object类型接收。由于DataSet类型为多表数据类型，所以在转换过程中列名丢失。用户可按顺序确定数据列，如dataFiled属性为“0”。外观模型效果如图21-23所示。

编写GetData方法调用成功后的处理函数。

函数的主要处理是将数据绑定至DataGrid组件的dataProvider属性上。

以下代码定义了处理函数GetDataHandle。

public function GetDataHandle(e:ResultEvent):void

{

    //获得的数据绑定至DataGrid组件

    dg.dataProvider=e.result.tables.serverInfo.initialData as Array;

}

DataSet经Fluorine网关转换后较复杂。经调试发现数据存储于“e.result.tables. serverInfo.initialData”中。

完成剩余代码。剩余代码包括InsertData方法调用成功后的处理函数、应用程序初始化处理、引用ResultEvent类等。

以下代码是完整的MXML代码。

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

    xmlns:renaun="com.renaun.rpc.*"

    layout="absolute" creationComplete="fs.GetData();" fontSize="13">

    <mx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;  //引用ArrayCollection类

            import mx.rpc.events.ResultEvent;       //引用ResultEvent类

            import mx.controls.Alert;               //引用Alert类

            //获得数据后的处理函数

            public function GetDataHandle(e:ResultEvent):void

            {

                //获得的数据绑定至DataGrid组件

                dg.dataProvider=e.result.tables.serverInfo.initialData as Array;

            }

            //插入数据成功后的处理函数

            public function InsertDataHandle(e:ResultEvent):void

            {

                //提示插入成功

                Alert.show("插入数据成功");

                //重新获取数据

                fs.GetData();

            }

        ]]>

    </mx:Script>

    <mx:Panel width="455" height="462" title="通知">

        <mx:DataGrid id="dg">

            <mx:columns>

                <mx:DataGridColumn headerText="编号" dataField="0"/>

                <mx:DataGridColumn headerText="标题" dataField="1"/>

                <mx:DataGridColumn headerText="内容" dataField="2"/>

                <mx:DataGridColumn headerText="发布者" dataField="3"/>

            </mx:columns>

        </mx:DataGrid>

        <mx:Canvas width="395" height="243">

            <mx:Label x="37" y="27" text="标题"/>

            <mx:TextInput x="80" y="25" id="txtTitle"/>

            <mx:Label x="37" y="155" text="发布者"/>

            <mx:TextInput x="80" y="153" id="txtPublisher"/>

            <mx:Label x="37" y="53" text="内容"/>

            <mx:TextArea x="80" y="55" width="278" height="90" id= "txtContent"/>

            <mx:Buttonx="121"y="198"label="添加"id="btnInsert" click="fs. InsertData(txtTitle.text,txtContent.text,txtPublisher.text);"/>

        </mx:Canvas>

    </mx:Panel>

    <!--第三方网关组件，用以连接AMF网关-->

    <renaun:RemoteObjectAMF0

        endpoint="http://localhost:88/FluorineExample/Gateway.aspx"

        id="fs"

        source="FluorineExample.Services.GetSQLServer2000Data"

        showBusyCursor="true"

        >

        <renaun:methods>

            <renaun:method

                name="GetData"

                result="GetDataHandle(event)"

            />

            <renaun:method

                name="InsertData"

                result="InsertDataHandle(event)"

            />

        </renaun:methods>

    </renaun:RemoteObjectAMF0>

</mx:Application>

按下Ctrl+F11编译运行程序。运行效果如图21-24所示。



图21-24  Fluorine实例效果图

21.7  小结
本章详细地介绍了数据的传输与交互。数据传输按数据类型可分为内部数据传输、文件流方式传输、XML方式传输、其他方式传输。使用<mx:HTTPService>组件可与HTTP程序交互，如ASP、PHP、ASP.NET、JSP等。使用<mx:WebService>组件可与WebService交互。使用Fluorine网关可与.NET类交互。通过本章的学习，读者能够掌握Flex 3.0如何与其他程序交互。

http://book.csdn.net/bookfiles/691/10069121586.shtml
发表于 @ 2009年07月06日　14:58:00 | 评论( 0 ) | 编辑| 举报| 收藏

旧一篇:flex alert 警告框给spyking945的留言只有注册用户才能发表评论！登录注册姓   名：
校验码：
Csdn Blog version 3.1a
Copyright © spyking945  

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/spyking945/archive/2009/07/06/4325303.aspx