Flex + ASP.Net + FlourineFX 示例

这里简单介绍使用Flex Builder 4 与 VS2008 协同开发Flex与ASP.NET交互的步骤与简单数据交互演示。

 

第一步：安装FlourineFX

 

开源项目FluorineFx就是专门针对.NET平台与Flex通信提供的AMF协议通信网关，我们可以通过FluorineFx很方便的完成与.NET的通信。

     FluorineFx官方提供了安装包的下载和在线文档，可以帮助我们有效的利用FluorineFx来开发。 

     FluroineFx官方网站：http://www.fluorinefx.com/    

     FluroineFx下载地址：http://www.fluorinefx.com/download.html

     FluroineFx在线文档：http://www.fluorinefx.com/docs/fluorine/index.html

下载安装后记得重启Visual Studio后才能在模板中找到FlourineFX相关的选项

 

第二步： 配置并开发.NET服务端

 

2.1 新建网站

 

通过Microsoft Visual Studio 2008 新建网站，选择FlourineFX ASP.NET Web Site，并在保存位置处选择文件系统，设置路径，确定。如下图所示：

确定后得到项目视图如下：

 

2.2 编写服务端代码

 

在工程上右键选择“添加ASP.NET 文件夹”à “App_Code”，然后新建一个类，不妨起名为MySample，类中代码修改如下：

using System; using System.Data; using System.Configuration; using System.Linq; 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 System.Xml.Linq; using FluorineFx;   namespace FlourineDemo.Test {     [RemotingService]     public class MySample     {         public int Add(int num1, int num2)         {             return num1 + num2;         }     } }

 

到这里我们可以简单的测试FluorineFx的.NET服务端是否成功创建。通过在浏览器中查看FluroineFx网站中的Console.aspx或是将网站设置为启动项目并设置Console.aspx为启始页运行网站都可以，程序便会运行到FluorineFx的控制台，展开左边项目的Services节点便会看到上面模板为我们创建的类和方法，点击方法节点在右边就可以进行简单的测试了，如下图示：

OK，到这里.NET的服务器端就开发完成了，这里我们需要记住几点，在接下来的Flex开发中需要根据这些参数来进行配置。

     FluorineFx的.NET网站目录：E:\vs2008-workspace\FlourineDemo

     FluorineFx的.NET网站虚拟目录：/FlourineDemo

    FluorineFx的.NET网站URL：http://localhost:63339/FlourineDemo/

   接受Flex客户端请求的URL：http://localhost:63339/FlourineDemo/Fluorine.aspx

 

第三步：配置并开发Flex客户端

 

3.1 新建Flex项目

 

打开Flash Builder

在这一页，设置项目位置时，前面红色方框标示的路径是前面.Net 下WebSite的路径。另外，在服务器技术中选择ColdFusion，并选择Flash Remoting选项，点击下一步。

 

按上图设置Web根文件夹、根URL以及上下文根目录，点击“验证配置按钮”，如果提示“Web 根文件夹和根 URL 有效”则说明配置成功，如出现下图所示，则表示配置错误（下图演示的是根URL填错了，其实是填错了端口号），需检查后重新配置：

         配置成功后点击“完成”按钮，完成项目的新建。

 

3.2 编写Flex程序

 

修改FlourineDemo2.mxml代码如下：

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">          <mx:Script>                    <![CDATA[                             import mx.controls.Alert;                             import mx.rpc.events.FaultEvent;                             import mx.rpc.events.ResultEvent;                                                         internal function onResult(evt:ResultEvent):void                             {                                      reslt.text = evt.result.toString();                             }                                                         internal function onFault(evt:FaultEvent):void                             {                                      Alert.show(evt.fault.toString());                             }                                                         internal function onClick(evt:MouseEvent):void                             {                                      var num1:int = parseInt(txtInput1.text);                                      var num2:int = parseInt(txtInput2.text);                                                                           service.Add(num1, num2);                             }                    ]]>          </mx:Script>                   <mx:RemoteObject id="service" destination="fluorine"                                                 source="FlourineDemo.Test.MySample" showBusyCursor="true" >                    <mx:method name="Add" result="onResult(event)" fault="onFault(event)">                    </mx:method>          </mx:RemoteObject>                   <mx:TextInput x="20" y="25" width="100" id="txtInput1"/>          <mx:TextInput x="180" y="25" width="100" id="txtInput2"/>          <mx:Button label="=" click="onClick(event)" x="300" y="25"/>          <mx:Label id="reslt" fontSize="18" x="370" y="25" width="120" height="22"/>          <mx:Label x="146" y="27" text="+"/> </mx:Application>

 

执行该项目，得到的程序效果如下：

 

这样就完成了Flex与ASP.NET的交互。