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.csdn.net/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.csdn.net/source/2075535