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的交互。

 

评论

5 楼 zhong_pro 2011-11-24  

受益匪浅啊。

4 楼 ouyangfeng521 2010-12-14  

 

3 楼 kingsmail 2010-10-28  

楼主请教一下 创建flex应用的时候为什么不用asp做服务器而选coldfusion？我先前用的是asp没成功 按您的方法成功了 想知道一下为什么？ 谢谢您解答。

2 楼 shansun123 2010-09-14  

beidou566 写道

Couldn't establish a connection to 'fluorine'？？？
请问下报这个错，怎么解决？？？

FluorineFX没配置或destination没有定义channels(默认是fluorine)

1 楼 beidou566 2010-09-14  

Couldn't establish a connection to 'fluorine'？？？
请问下报这个错，怎么解决？？？