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>

 

  

最后运行结果如下图