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
(8)测试FluorineFx的.NET服务端是否成功创建:通过在浏览器中查看FluroineFx网站中的Console.aspx,运行FluorineFx的控制台,展开左边项目的Services节点便会看到上面模板创建的类和方法,点击方法节点在右边就可以进行简单的测试了,如下图示:
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配置文件来设置
(1) 修改工程的属性,修改“附加的编译器参数”,设置services-config.xml配置文件的路径,指向刚建立的网站中的“WEB-INF/flex”中的services-config.xml路径。也可以将services-config.xml这个文件拷贝到调用文件的同级目录中,然后设为-locale en_US-services"services-config.xml"。
(2)配置Flex工程中的services-config.xml。主要是设置这个endpoint属性。让其指向之前得到的网关地址,另外就是设置了“destination”。
<?xml version="1.0" encoding="UTF-8"?> <services-config> <services> <service id="remoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage"> <destination id="fluorine"> <channels> <channel ref="my-amf"/> </channels> <properties> <source>*</source> </properties> </destination> </service> </services> <channels> <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel"> <endpoint uri=" http://localhost/Fluorine/Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/> </channel-definition> </channels> </services-config>
3.2.3. 利用第三方组件RemoteObjectAMF0来连接:
(1)RemoteObjectAMF0组件是一种基于MXML的第三方组件,用于连接AMF网关,同时它是一个开源的组件。首先下载RemoteObjectAMF0后解压,在“src”文件夹中就可以看到关于该组件的源代码,它基本上是对flex中的RemoteObject组件进行的重写。可以将“src”文件夹中的“com”文件夹全部拷贝到flex的工程中,也可以将其编译成库文件再引用到Flex工程中。
(2)这时将“com”文件夹拷贝到了工程中。要使用该组件,默认情况下,要在MXML文件中的“Applications”标签中加入命名空间“xmlns:renaun="com.renaun.rpc.*"”。
(3)RomoteObjectAMF0组件的定义语法如下所示:
<renaun:RemoteObjectAMF0 endpoint="http://localhost:4166/FluorineTest/Gateway.aspx" id="sampleRemoteObject" source="FluorineHelloWorld.HelloWorld" showBusyCursor="true">
<renaun:methods>
<renaun:method name="FromFluorine" result="RemoteResult(event)" fault="RemoteFault(event)"/>
</renaun:methods>
</renaun:RemoteObjectAMF0>
RemoteObjectAMF0组件的“endpoint”属性指明AMF网关地址,“source”属性指明类的名称空间,<名称空间:method>组件的name属性指向类中的方法,必须与类中的定义相同,result事件处理返回的数据。
(4)RemoteObjectAMF0的调用方法跟RemoteObject时差不多,比如都可以通过sampleRemoteObject.FromFluorine(this.txtHelloWorld.text);去调用.NET中的FromFluorine()方法(通信过程中的例子)。
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项目
<?xml version="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[ import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.controls.Alert; public function clickBtnHelloWorld():void{ sampleRemoteObject.FromFluorine(this.txtHelloWorld.text); } public function RemoteResult(re:ResultEvent):void { var str:String = re.result as String; Alert.show(str); } protected function sendRemoteService_faultHandler(event:FaultEvent):void { // TODO Auto-generated method stub } public function 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,结果如下: