Flex与ASP.NET通过Remoting方式交互

Flex与ASP.NET通过Remoting方式交互

说明文档

本文是关于Flex与ASP.NET通过Remoting方式进行通讯的内容， 本文将通过一个示例来介绍Flex与ASP进行数据交互的服务端和客户端所需的配置情况，以及二者通信的过程。

1.      软件

1、Flex平台：Adobe Flex Builder 4.5

2、.Net平台：Visual Studio .Net 2008

3、Remoting网关：Fluorine

2.       介绍

Flex与.NET服务端的通信可以通过WebService、HTTPService、URLLoader以及FielReference等组件或类来完成，通过这些方式来完成与服务端的通信是非常方便和简单的，但它们的缺点就是通信数据量较小，如要传输大量的数据或是实现不同对象的序列化传输，它们则满足不了需求，需要寻找另外一种通信协议，另一种高效的传输协议来代替SOAP协议传输的方案，那便是AMF（ActionScript Message Format）协议。

Fluorine是一种开源的AMF(ActionScript Messaging Formatter)网关，专门负责Flex与.Net交互时的数据类型转换。Fluorine现支持ActionScript 2.0和ActionScript 3.0，Fluorine也可作为Flash与.Net交互时的AMF网关。

Fluorine主要优点：

（1）交互时数据类型的自动转换。因为Flex与.NET的数据类型是不同的，例如Flex的Date与.NET中的DateTime类型。这样就导致Flex 与.NET进行数据交互过程中必须进行数据类型的转换。这种数据类型的转换我们可以自己通过编写相关的代码来实现，例如在Flex及.NET中编写一个实体类对其取得的数据进行类型转换。而利用Fluorine这种网关来实现数据交互的话，它能够实现.NET与Flex中的数据类型的自动对应转换，这样从一定程度上就减轻了我们对其数据类型处理的烦恼。

（2）交互效率的提高：利用网关进行数据交互的话，它使得Flex能够直接与.Net的数据处理类进行通信，而不必像再通过另一层中间数据交互层来实现，从一定程度上它的交互效率会提高很多。

3.      基本配置

3.1.      服务器端的搭建

（1）安装FluorineFx，安装完后在目录中会有“Source”及“Samples”两个文件夹，“Samples”文件夹中包含了一些在VS环境中使用Fluorine的例子。“Source”文件夹中包含了有关Fluorine的源代码。

（2）首先确定项目创建后的存储位置，譬如说在本例中暂定该示例项目的所有文件存储在D:\DEMO中，在D盘中新建文件目录D:\DEMO\Fluorine，在IIS的默认网站右键点击新建虚拟目录

(3) 安装好Fluorine之后，系统自动在VS.Net 2008新建网站中增加一个模板：FluorineFx ASP.NET Web Application。选择该模板，创建一个.NET网站。

（4）利用VS的模板进行创建后，系统会自动加载一些引用，以及创建相关文件，并进行简单配置。创建完后的项目结构如图所示：

      

 “Bin”中的dll就是用Fluorine的源文件所生成的程序集，“Templates”是一些模板。“WEB-INF/flex”中包含了XML都是些配置文件。“Gateway.aspx”是个空页面，其网页地址就是Fluorine的网关地址。

 【这里有两种途径：一是 新建一个FluorineFx ServiceLibrary类库文件，将所有的数据处理类放到库中上，然后在网站中调用此类库（如以下步骤5-7）；二是将所有的数据处理类放在 ASP。Net文件夹App_Code中，App_Code中，.net自动编译】

（5） 通过Microsoft Visual Studio 2008 创建解决方案，并添加FluroineFx服务库到网站，依次点击：文件---新建---项目，设置如下图所示：

（6）FluorineFx服务库添加成功后，项目模板会自动为我们创建一个Sample类和一个Echo方法，如下：

(7) 为网页添加引用，添加成功后网站会自动引用FluorineFx服务库的dll

 

 

3.2.      客户端的配置

   客户端的配置有三种方法，（三者选一就可以）一种是通过向导来设置参数，从而创建Flex；二是通过指定services-config.xml配置文件来设置；第三种是利用第三方组件RemoteObjectAMF0来连接，这种方式就不用再去配置services-config.xml。

(作者建议：用配置方法好点，方便简单，测试过可行。其它二种没测试过)

3.2.1.      向导设置方法：

（1）新建Flex工程。

（2） 将应用服务器类型设置为：ASP.NET，将服务器设置为:"使用Internet Information Services (IIS)",Web 应用程序根目录指向FluorineFx网站的根路径，Web 应用程序URL则设置为网站在IIS中的配置路径， 按照上面步骤配置好后通过点击“验证配置”进行配置验证，如过验证结果是： Web应用程序根目录和 URL有效.则代表配置正确，具体如下图所示：

 

3.2.2.  services-config.xml配置文件来设置

3.2.3. 利用第三方组件RemoteObjectAMF0来连接：

4.      通信过程

1、在VS中编写数据处理类HelloWorld.cs文件,HelloWorld.cs文件的代码如下所示：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using FluorineFx;

namespace FluorineHelloWorld
{
    /// <summary>
    ///HelloWorld 的摘要说明
    /// </summary>
    [RemotingService()]
    public class HelloWorld
    {
        public HelloWorld()
        {
            //
            //TODO: 在此处添加构造函数逻辑
            //
        }
        public string FromFluorine(string userName)
        {
            return "您好," + userName + "!此消息来自Fluorine Flash Remoting";
        }
    }
}

RemotingService属性并不是必需的，不过使用该属性，在配置了服务浏览器的Web应用上可以通过 Console.aspx查看远程服务类文件，以及调用该服务的ActionScript。例如可以在上页类文件中设置断点，然后将 Console.aspx设置为起始页，启动项目。页面会跳转到Fluorine.aspx页面，当调用FromFluorine()函数时，就会中断。下图是对函数所进行的调用结果。

2、配置客户端，创建Flex项目

<?xmlversion="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                  

                xmlns:s="library://ns.adobe.com/flex/spark"                  

                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  

     <fx:Script>

         <![CDATA[         

              importmx.rpc.events.FaultEvent;

              importmx.rpc.events.ResultEvent;

              importmx.controls.Alert;

             

              publicfunction clickBtnHelloWorld():void{

                   sampleRemoteObject.FromFluorine(this.txtHelloWorld.text);

              }

              publicfunction RemoteResult(re:ResultEvent):void

              {

                   varstr:String = re.result as String;

                   Alert.show(str);

              }            

              protectedfunctionsendRemoteService_faultHandler(event:FaultEvent):void                 

              {

                   // TODO Auto-generated method stub  

              }

              publicfunction RemoteFault(re:FaultEvent):void

              {

                   Alert.show("Message:" + re.fault.faultString,"出错");

              }          

         ]]>     

     </fx:Script> 

     <fx:Declarations>

         <s:RemoteObject id="sampleRemoteObject" endpoint="../Gateway.aspx"

           destination="fluorine" source="FluorineHelloWorld.HelloWorld"fault="sendRemoteService_faultHandler(event)">        

              <s:method name="FromFluorine" result="RemoteResult(event)"fault="RemoteFault(event)"/>               

         </s:RemoteObject>     

     </fx:Declarations>

     <mx:Panel horizontalAlign="center" verticalAlign="middle"width="250" height="200"layout="absolute">

         <mx:TextInput x="35" y="10"id="txtHelloWorld" />

         <mx:Button x="82.5" y="40"label="调用" id="btnHelloWorld"click="clickBtnHelloWorld()"/>

     </mx:Panel>

</s:Application>

这里创建了一个RemoteObject对象，并设置了其id属性，“destination”指向services-config.xml中的“destination”的id，source对应VS类，前面 FluorineHelloWorld是命名空间，后面HelloWorld是类名。RemoteObject中创建了一个method方法，“name”属性跟所要调用的VS类中的函数名相同，“result”设置返回结果后的处理事件，“fault”设置交互过程中出错后的处理事件 。

3、运行Flex，结果如下：