Flex与webServices交互传递数据

    为了在应用程序中使用数据，Adobe Flex 包括了与HTTP servers，web services 或remoteobject services
（Java objects）进行交互的组件，这些组件被称之为远程过程调用（RPC）服务组件。
    与 Adobe ColdFusion，PHP 或类似的服务器技术不同，Flex 应用程序并不直接连接数据
库。举个例子，你可以在一个Flex 文件中插入HTTP service 来实现与ColdFusion 文件的交
互，以获取MySQL 数据库中的数据，转换成XML，然后返馈给Flex 应用程序。

本篇主要讲述Flex与webServices交互传递数据的过程。

1、webService程序的编写及发布服务
    webService的原理及概念可参考http://blog.youkuaiyun.com/mocklystone/archive/2010/02/24/5322436.aspx。

    webService的编写与平常程序的编写一样，只是他是一个web服务类型，并且在方法上需要添加[WebMethod]来

标识。

A、返回DataTable类型

示例：

   [WebMethod] public DataTable GetUserList() { DataSet ds = new DataSet(); DataTable dt = new DataTable("UserList"); dt.Columns.Add("UserName"); dt.Columns.Add("UserPwd"); dt.Rows.Add(new object[] { "mocklystone", "123" }); ds.Tables.Add(dt); return ds.Tables["UserList"]; }

该函数返回的是一个DataTable类型数据，但在函数中为什么要使用一个DataSet来封装，不是多此一举吗？其实不然，webservice为将这个函数解析成Wsdl（也就是xml形式的一个描述文档），且返回的数据也是解析成xml格式的，所以不管什么类型都需要序列化然后转换成xml，庆幸的是.net有封装对基本类型及一些常用类型的序列化。可这些类型中并没有包含DataTable，但却支持DataSet，所以通过封装成DataSet，再将其中的DataTable数据返回去，就可以转换成xml格式了。

 

B、返回泛型List<T>的数据类型

示例：

[WebMethod] public List<User> GetAllUserList() { List<User> list = new List<User>(); User user = new User(); user.UserName = "mocklystone"; user.UserPwd = "123"; list.Add(user); return list; }

User是自定义的类

public class User { public User() { } private string _username; private string _userpwd; public string UserName { set { _username = value; } get { return _username; } } public string UserPwd { set { _userpwd = value; } get { return _userpwd; } } }

C、一般数据类型

示例：

[WebMethod] public string HelloWorld() { return "Hello World"; }

文件编写完后进行发布，发布到IIS6中的Test虚拟目录下，供下面Flex调用，如何发布就不再详述了。

2、Flex请求WebService服务

Flex中有提供WebService组件及httpService组件，来对相应服务发送请求及接收数据。

A、Webservice组件定义及触发事件

通过一个按钮Button来触发调用webService请求的事件

<mx:WebService id="RequestWebService" wsdl="http://localhost/test/LoginService.asmx?WSDL" useProxy="false"> <mx:operation name="GetAllUserList" result="ShowList(event);"/> <mx:operation name="HelloWorld" result="ShowString(event);"/> <mx:operation name="GetUserList" result="ShowDataTable(event);"/> </mx:WebService> <mx:Button id="btn_GetUserListen" x="50" y="280" label="GetListType"/> <mx:Button id="btn_GetString" x="150" y="280" label="GetString" click="GetString()"/> <mx:Button id="btn_GetDataTable" x="250" y="280" label="GetDataTable" click="GetDataTable()"/>

这边的"http://localhost/test/LoginService.asmx?WSDL"即为本地发布的webService的地址，即发布在IIS中Test的虚拟目录下。

<mx:operation>中的name属性里的值就是所需要调用Webservice的方法名，result属性即定义接收到数据后所要执行的函数。

 

有需要发送参数的定义方法

<mx:WebService id="userGet" wsdl="http://localhost/test/LoginService.asmx?WSDL" useProxy="false"> <mx:operation name="CheckLogin" result="GetResult(event);"> <mx:request xmlns=""> <userName> {txtUserName.text} </userName> <userPwd> {txtUserPwd.text} </userPwd> </mx:request> </mx:operation> </mx:WebService>

其中{txtUserName.text}与{txtUserPwd.text}即为需要传递的参数，这是两个文本编辑框的值的表示方式

B、发送WebService请求

示例：

private function GetDataTable():void { RequestWebService.GetUserList.send(); }

3、Flex解析WebService返回的数据（重点讲述此方法）

重点讲述DataTable数据绑定及泛型List<T>数据绑定

示例：

// 获取范型的数据 private function ShowList(event:ResultEvent):void { var list:ArrayCollection=event.result as ArrayCollection; dg_UserList.dataProvider=list; } // 获取DataTable的数据 private function ShowDataTable(event:ResultEvent):void { dg_UserList.dataProvider=event.result.Tables.UserList.Rows }

dg_UserList是Flex中的DataGrid控件，将数据绑定掉这个控件上，然后将此DataTable中的列名设置到DataGrid中的Datafiled即可显示。

<mx:DataGrid x="30" y="75" id="dg_UserList" width="400" > <mx:columns> <mx:DataGridColumn headerText="用户名" dataField="UserName"/> <mx:DataGridColumn headerText="密码" dataField="UserPwd"/> </mx:columns> </mx:DataGrid>

解析上述的给Dg_UserList绑定数据时为何使用dg_UserList.dataProvider=event.result.Tables.UserList.Rows

这个没有固定写法，要根据以下方法调试方能编写完全。

event.result就是从WebService中的GetUserList中获得的数据，类型为DataTable，DataTable名称为"UserList"

    首先，在请求WebService的函数中设置断点(即在RequestWebService.GetUserList.send();这个地方设置断点)

然后调试该Flex程序，当点击了button后可以通过断点查看出返回结果的格式！然后我们就可以根据这个格式设置DataGrid的dataProvider属性了。如下图所示

 

Flex程序调试需要flash play调用版本9.0以上方可使用
详细源代码下载地址：http://download.youkuaiyun.com/source/2075535