Flex3+Weborb3.6+.NET開發入門

 

引言

 

 

如果你對.NET和Flex都熟悉。您將很快入門。下面簡短的總結可以讓你記住使用WebORB來集成flex和.net。

 

 

l WebORB當作HttpHandler可插入任何一個ASP.NET應用程序（不過WebORB HttpHandler必須在web.config中註冊）。

 

l WebORB向FLEX Clients自動顯露 來自ASP.NET應用程序中的所有程序集合所提供遠程服務的.NET 類（需要對安全性和訪問權限進行額外配置）

 

l WebORB不需要對flex,flash,ajax或者Silverlight使用的類作任何修改

 

l WebORB實現AMF3協議，因此，Flex客戶端應用程序可以使用RemoteObject tag/ API來調用.NET方法（WebORB還支持AMF0和的RTMP協議）

 

l WebORB使用和Flex一樣的配置文件，這些文件位於“WEB-INF/flex”

 

l 通過在“WEB-INF/flex/remoting-config.xml”註冊，你可以明確的顯露一個.NET類作爲一個remoting的destination（當然這不是一個必須的步驟，因爲通過下面介紹的“GenericDestination”可以暗中將一個類顯露）。

 

本教程的目的是演示一個Flex Remoting 請求.NET 類中的一個方法。下面的步驟將指導你完操作過程。

 

 

下載

  

地址：http://www.themidnightcoders.com/products/weborb-for-net/download.html

（此時，若沒有註冊，要先註冊，然後登錄，就可看到如下圖所示的畫面，在下圖你可以看到weborb可用於多種語言）

 

 

 

  

 

點擊如上圖中的紅色圈。

 

  

安裝

 

 

最簡單的方法是使用該產品的默認安裝。然後，你可以使用這個控制檯的部署特性，在其他虛擬目錄中部署本產品。

WebORB在硬盤上的實際路徑應該是“/Inetpub/wwwroot/weborb30”，這意味着可以通過“http://localhost/weborb30/”來訪問。安裝目錄結構如下：

 

 

 

  

創建虛擬目

 

 

 

如在電腦的E盤下新建一個網站的虛擬目錄：nothingProj目錄，在IIS中映射爲虛擬目錄（如下圖）。

 

 

 

 

 

  

Server端 ASP.NET站點

 

 

 

首先申明，本教程使用的是weborb fot .NET  3.6.0.3。該版本安裝完成後會在ASP.NET中生成一個對應的站點模板（如下圖選中的模板項目所示）。然後，在這個之前的版本都沒有些項目模板，因些需要人工複製文件進行環境配置，低於此版的配置見下列網址介紹http://www.cnblogs.com/jacktu/archive/2008/04/06/1139283.html。

 

 

 

1.文件 —》新建 —》網站

 

  

 

 

  

2.選擇WebORB-enabled Web Site 項目模板（此版本新增加的一個功能OK），作如下配置：

 

 

 

  

3.點擊如上圖中的“確定”按鈕，此時解決方案資源管理器如圖所示：

 

  

 

  

4.在上圖中的“App_Code”上右擊，“添加新項”，打開如下對話框，選擇“類模板”

輸入如下名稱：User.cs，最後在編輯器中輸入如下代碼：

  

 

 

  

 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; /// <summary> ///User 的摘要說明 /// </summary> namespace nothingProj { public class User { private UserInfo user; public User() { user = new UserInfo(); user.username = "樂天（letian）"; user.age = 23; user.gender = "男"; } public UserInfo getUser() { return user; } public string getUserName() { return user.username; } } public class UserInfo { public string username; public int age; public string gender; public UserInfo() { } } }

 

  

（注：由於自己纔剛開始學習.NET所以，還不會做太複雜的例子，呵呵…………）

 

 

 

Client端 新建Flex項目

 

  

1.右擊—》NEW—》Flex Project

 

 

 

  

2.指定如下圖所示的：Servicer location

 

  

 

  

3.設置如下圖所示的服務器配置文件services參數。

 

  

 

  

4.打開nothingProj_flex.mxml文件，編寫如下代碼：

 

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; private function faultHandler(evt:FaultEvent):void { printUser.text=evt.message.toString(); } private function onGetUser(evt:ResultEvent):void { printUser.text=evt.result.toString(); } ]]--> </mx:Script> <mx:RemoteObject id="userRobj" destination="GenericDestination" source="nothingProj.User" showBusyCursor="true" fault="faultHandler(event)"> <mx:method name="getUserName" result="onGetUser(event)"/> </mx:RemoteObject> <mx:Panel x="15" y="23" width="298" height="236" layout="absolute"> <mx:TextArea x="10" y="10" width="258" height="140" id="printUser" fontSize="12"/> <mx:ControlBar> <mx:Button label="Get User" click="userRobj.getUserName()"/> </mx:ControlBar> </mx:Panel> </mx:Application>

 

 

 運行該mxml文件，結果如下：

 

  

 

 

  

數據映射

 

 

 

通過在Flex類中使用[RemoteClass（alias="服務器端的類名")]標籤可以實現該FLEX類與服務器端類建立映射關係。（如下代碼）

 

  

 package vo { [RemoteClass(alias="nothingProj.UserInfo")] public class User { public var username:String; public var age:int; public var gender:String; public function User(){ } } }

 

 

 

修改主應用程序文件如下所示：

 

  

 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ import vo.User; import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; private function faultHandler(evt:FaultEvent):void { printUser.text=evt.message.toString(); } private function onGetUser(evt:ResultEvent):void { var users:User=evt.result as User; printUser.text+="user name:"+users.username+"/n"; printUser.text+="age:"+users.age+"/n"; printUser.text+="gender:"+users.gender+"/n"; } ]]--> </mx:Script> <mx:RemoteObject id="userRobj" destination="GenericDestination" source="nothingProj.User" showBusyCursor="true" fault="faultHandler(event)"> <mx:method name="getUser" result="onGetUser(event)"/> </mx:RemoteObject> <mx:Panel x="15" y="23" width="298" height="236" layout="absolute"> <mx:TextArea x="10" y="10" width="258" height="140" id="printUser" fontSize="12"/> <mx:ControlBar> <mx:Button label="Get User" click="userRobj.getUser()"/> </mx:ControlBar> </mx:Panel> </mx:Application>

 

  

最後運行結果如下圖