这里简单介绍使用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的交互。