Flex和.NET協同開發利器FluorineFx Flex與.NET互操作_Flex

通過這些方式來完成與服務端的通訊是非常方便和簡單的，但有他的缺點就是通訊資料量較小，如要傳輸大量的資料或是實現不同對象的序列化傳輸，它們則滿足不了我們的需求，需要尋找另外一種通訊協定，另一種高效的傳輸協議來代替SOAP協議傳輸的方案，那便是AMF（ActionScript Message Format）協議。

     開源項目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

     

     OK，下面我們來看看使用FluroineFx通訊的.NET和Flex配置。開發環境選擇如下：

     .NET:Microsoft Visual Studio 2008 + .NET Framework 3.5

     Flex:Adobe Flex Builder CS3 + Flex SDK 3.2

     FluroineFx:FluorineFx v1.0.0.15 (點擊可下載)

 一、.NET服務端的開發

     通過Microsoft Visual Studio 2008 建立建立解決方案，並添加FluroineFx伺服器庫，如下圖示：

     FluorineFx服務庫添加成功後會發現，項目模板會自動為我們建立一個Sample類和一個Echo方法，如下：

 1 namespace FlexDotNet.ServiceLibrary
 2 {
 3     /// <summary>
 4     /// Fluorine sample service.
 5     /// </summary>
 6     [RemotingService("Fluorine sample service")]
 7     public class Sample
 8     {
 9         public Sample()
10         {
11         }
12 
13         public string Echo(string text)
14         {
15             return "Gateway echo: " + text;
16         }
17     }
18 }

     接著添加FluorineFx 網站到解決方案，添加成功後網站會自動引用FluorineFx服務庫的dll。如下圖：

     到這裡我們可以簡單的測試FluorineFx的.NET服務端是否成功建立。通過在瀏覽器中查看FluroineFx網站中的Console.aspx或是將網站設定為啟動項目並設定Console.aspx為啟始頁運行網站都可以，程式便會運行到FluorineFx的控制台，展開左邊項目的Services節點便會看到上面模板為我們建立的類和方法，點擊方法節點在右邊就可以進行簡單的測試了，如下圖示：

     

     OK，到這裡.NET的伺服器端就開發完成了，這裡我們需要記住幾點，在接下來的Flex開發中需要根據這些參數來進行配置。

     FluorineFx的.NET網站目錄：F:\Demo\FlexDotNet\Web

     FluorineFx的.NET網站虛擬目錄：/Web

     FluorineFx的.NET網站URL：http://localhost:2836/Web

     接受Flex用戶端請求的URL：http://localhost:2836/Web/Gateway.aspx

     有了上面這些東西配置Flex就簡單了，首先建立Flex項目，並將項目路徑指向前建立的FluorineFx網站的根路徑：

     如上圖，將Application type設定為:Web application,Application Server type設定為：ASP.NET，然後“Next”。進入下一個建立項目嚮導介面，將Server設定為:"Use Internet Information Services (IIS)",Web Application root同樣指向FluorineFx網站的根路徑，Web Appliation URL則設定為上面我們擷取到的路徑便OK，詳細見下圖：

     按照上面步驟配置好後通過點擊“Validate Configuration”進行配置驗證，如過驗證結果是： The web application root and the URL are valid.則代表配置正確，可以直接點下一步只到完成項目的建立。

     Flex項目建立完畢，下面在通過一些相應的配置就可以通過FluorineFx和.NET通訊了。開發項目屬性設定面板，設定其Flex Compiler為下圖所示（-services的配置也可以設定為相對路徑）：

     設定Flex Server為如下配置，可以點“Validate Location”驗證設定的正確性：

     最後設定輸出路徑就完成了Flex端的配置了：

     到這裡Flex端的配置就全部完成，下面我們通過FluorineFx庫模板為我們產生的Sample為例來測試下該環境是否可以通過，在Flex的mxml檔案下通過<mx:RemoteObject>標籤來訪問遠程對象，詳細如下：

1 <mx:RemoteObject id="service" destination="fluorine"
2     source="FlexDotNet.ServiceLibrary.Sample">
3         <mx:method name="Echo" result="onResult(event)">
4         </mx:method>
5 </mx:RemoteObject>

     這裡需要注意的是destination需要設定為與remoting-config.xml中的destination的id一致，source則配置為遠程對象的全路徑（名稱空間＋類），通過<mx:method>標籤配置遠程對象下的方法並設定其成功調用後的結果處理函數，下面便可通過id去調用遠程方法了。

 1 <mx:Script>
 2     <![CDATA[
 3         import mx.rpc.events.ResultEvent;
 4         internal function onClick():void
 5         {
 6             service.Echo(txtInput.text);
 7         }
 8         
 9         internal function onResult(evt:ResultEvent):void
10         {
11             txtResult.text = evt.result.toString();
12         }
13     ]]>
14 </mx:Script>

下面是完整的Flex用戶端mxml的代碼定義：

完整的範例程式碼
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 3     <mx:RemoteObject id="service" destination="fluorine"
 4         source="FlexDotNet.ServiceLibrary.Sample">
 5             <mx:method name="Echo" result="onResult(event)">
 6             </mx:method>
 7     </mx:RemoteObject>
 8     
 9     <mx:Script>
10         <![CDATA[
11             import mx.rpc.events.ResultEvent;
12             internal function onClick():void
13             {
14                 service.Echo(txtInput.text);
15             }
16             
17             internal function onResult(evt:ResultEvent):void
18             {
19                 txtResult.text = evt.result.toString();
20             }
21         ]]>
22     </mx:Script>
23     
24     <mx:Panel x="53" y="52" width="250" height="200" layout="absolute" title="測試FluorineFx" fontSize="12">
25         <mx:TextInput x="35" y="21" id="txtInput"/>
26         <mx:Button x="35" y="63" label="確 定" fontWeight="normal" click="onClick()"/>
27         <mx:Label x="35" y="95" text="結 果："/>
28         <mx:TextInput x="35" y="123" width="160" id="txtResult"/>
29     </mx:Panel>
30 </mx:Application>
31 

本文樣本截圖：