|
本文以.NET平台下C#语言开发的WebService作为远程数据源,详细介绍Flex与.NET的 WebService的数据通信知识点;包括连接WebService，远程调用WebService方法，给WebService方法传递参数等相关知 识点。三个标签的使用方法基本上是一样，这里就以标签为例进行介绍。
Flex提供了、和标签来直接访问远程数据，这用于与各种不同语言环境开发提供的远程服务端数据源(如WebService)进行数据交互通信显得更加容易.
本文以.NET平台下C#语言开发的WebService作为远程数据源,详细介绍Flex与.NET的WebService的数据通信知识 点;包括连接WebService，远程调用WebService方法，给WebService方法传递参数等相关知识点。三个标签的使用方法基本上是一 样，这里就以标签为例进行介绍。
首先看看如下代码块：
?
1?????internal?function?onClick():void
2?????{
3?????????var?service:WebService?=?new?WebService();
4?????????service.loadWSDL("[url]http://localhost:1146/FlashFlexService.asmx?wsdl[/url]");
5?????????service.addEventListener(ResultEvent.RESULT,onResult);
6?????????service.addEventListener(FaultEvent.FAULT,onFault);
7?????????service.GetBook();
8?????}
|
?wsdl属性指定到要访问的WebService的wsdl地址既可，其中定义了两个操作标签()，分别对应于WebService中定义的WebMethod方法。result属性标记访问WebService方法成功后的处理函数;fault则相反，指定于访问失败的处理函数。以上两个对应于WebService的WebMethod方法如下：
?
1?????///?<summary>
?2?????///?返回字符串
?3?????///?</summary>
?4?????///?<returns></returns>
?5?????[WebMethod]
?6?????public?string?HelloWorld()
?7?????{
?8?????????return?"Hello?World";
?9?????}
10?
11?????///?<summary>
12?????///?返回一个简单对象
13?????///?</summary>
14?????///?<returns></returns>
15?????[WebMethod]
16?????public?Book?GetBook()
17?????{
18?????????return?new?Book
19?????????{
20?????????????Id?=?1,
21?????????????Name?=?"三国演义",
22?????????????Author?=?"罗贯中",
23?????????????Price?=?100
24?????????};
25?????}
如上便是WebService方法定义和在Flex的客户端(mxml)通过标签来访问WebService的完整流程，下面我们来看看在Flex的客户端怎么去调用WebService所定义的方法：
?
?
1?<mx:.>
2?<![CDATA[
3?import?mx.controls.Alert;
4?import?mx.rpc.events.FaultEvent;
5?import?mx.rpc.events.ResultEvent;
6
7?
10?internal?function?onRequest():void
11?{
12?dataService.HelloWorld();
13?}
14
15?
18?internal?function?onSuccess(evt:ResultEvent):void
19?{
20?Alert.show(evt.result.toString());
21?}
22
23
24?
27?internal?function?onFault(evt:FaultEvent):void
28?{
29?Alert.show("访问WebService失败!");
30?}
31?]]>
32?</mx:.>
通过上面的调用，就可以完成一个Flex和.NET WebService的交互。当然我们在Flash/Flex的客户端调用WebService也是可以传递参数的，如下WebService的WebMethod定义：
?
1?///?///?<summary>
2?///?将传递进来的参数转化为大写字符返回
3?///?///?</summary>
4?///?///?<param?name="value"></param>
5?///?///?<returns></returns>
6?[WebMethod]
7?public?string?ConvertToUpper(string?value)
8?{
9?return?value.ToUpper();
10?}
通过在标签下配置执行该方法就可以访问了，如下：
?
??????1?
4?internal?function?onRequest():void
5?{
6?//dataService.HelloWorld();
7?dataService.ConvertToUpper("abcdefg");
8?}
另外，我们还可以通过来传递参数，这里只需要知道里的参数配置与WebService提供的WebMethod方法参数同名就OK。
回到前面看看WebService的方法定义，其中一个方法GetBook是返回的一个Book对象，如果是返回的对象我们在Flex的客户端怎么来获取这个对象的值呢?详细见如下代码示例：
?
?????1?internal?function?onObject():void
2?{
3?dataService.GetBook();
4?}
5
6?internal?function?onObjectSuccess(evt:ResultEvent):void
7?{
8?//直接通过事件的result属性得到返回值,然后直接访问属性便OK
9?Alert.show(evt.result.Name);
10?}
11
12?
15?internal?function?onFault(evt:FaultEvent):void
16?{
17?Alert.show("访问WebService失败!");
18?}
如上便完成了服务端的WebService返回对象到客户端的调用。
在上一篇文章《Flex与.NET互操作(二)：基于WebService的数据访问(上) 》中介绍了通过标签来访问Webservice。实际上我们也可以通过编程的方式动态的访问WebService，Flex SDK为我们提供了WebService类。
在上一篇文章《Flex与.NET互操作(二)：基于WebService的数据访问(上) 》中介绍了通过标签来访问Webservice。实际上我们也可以通过编程的方式动态的访问WebService，Flex SDK为我们提供了WebService类。
使用WebService类来访问WebService其实也就是将标签的属性通过类对象的属性形式来表示，相比之下使用WebService类比使用标签要灵活。下面我们来看看编程方式怎么连接和调用远程方法：
?
1?internal?function?onClick():void
2?{
3?var?service:WebService?=?new?WebService();
4?service.loadWSDL("[url]http://localhost:1146/FlashFlexService.asmx?wsdl[/url]");
5?service.addEventListener(ResultEvent.RESULT,onResult);
6?service.addEventListener(FaultEvent.FAULT,onFault);
7?service.GetBook();
8?}
直接通过类对象的loadWSDL()方法调用远程WebService，动态为类对象指定相关的处理函数，然后和标签一样调用远程WebService方法既可。
1?internal?function?onResult(evt:ResultEvent):void
2?{
3?Alert.show(evt.result.Id);
4?}
5
6?internal?function?onFault(evt:FaultEvent):void
7?{
8?Alert.show(evt.fault.faultDetail.toString());
9?}
|
如上便完成了使用WebService类通过编程的方式访问远程WebService方法的调用。
下面来看看WebService返回DataTable等负责类型，在Flex客户端该怎么解析。首先定义WebService方法如下：
1?[WebMethod(Description="该方法将返回DataTable类型的数据")]
2?public?DataTable?GetDataTable()
3?{
4?DataTable?dt?=?new?DataTable("Books");
5?dt.Columns.Add("Id",?typeof(int));
6?dt.Columns.Add("Name",?typeof(string));
7?dt.Columns.Add("Author",?typeof(string));
8?dt.Columns.Add("Price",?typeof(double));
9
10?DataRow?dr?=?dt.NewRow();
11?dr["Id"]?=?1;
12?dr["Name"]?=?"《Flex游戏开发》";
13?dr["Author"]?=?"张三";
14?dr["Price"]?=?54.85;
15?dt.Rows.Add(dr);
16
17?dr?=?dt.NewRow();
18?dr["Id"]?=?2;
19?dr["Name"]?=?"《Flash游戏开发》";
20?dr["Author"]?=?"李四";
21?dr["Price"]?=?65.50;
22?dt.Rows.Add(dr);
23
24?return?dt;
25?}
同样在Flex客户端通过WebService来访问就可以了，下面是使用标签访问(这里需要注意，标签的name必须与服务端的WebService方法同名)：
1?????<mx:WebService?id="myService"?
2?????????wsdl="[url]http://localhost:1146/DataWebService.asmx?wsdl[/url]"?useProxy="false">
3?????????<mx:operation?name="GetDataTable">
4?????????</mx:operation>
5?????</mx:WebService>
?????提供好了WebService，客户端也连接上了WebService，现在只差调用WebService提供的远程方法了。如下：
1?internal?function?onTable():void
2?{
3?myService.addEventListener(ResultEvent.RESULT,onSuccess);
4?myService.addEventListener(FaultEvent.FAULT,onFault);
5?myService.GetDataTable.send();
6?}
7
8?internal?function?onSuccess(evt:ResultEvent):void
9?{
10?//bookGrid.dataProvider=this.myService.GetDataTable.lastResult.Tables.Books.Rows;
11?}
12
13?internal?function?onFault(evt:FaultEvent):void
14?{
15?Alert.show("调用WebService方法失败，详细："?+?evt.fault.faultDetail.toString());
16
17?}
将WebService的返回值绑定在Flex的DataGrid组件，mxml的相关代码如下：
<mx:Panel?x="41"?y="123"?width="480"?height="279"?layout="absolute"?fontSize="12">
?2?????<mx:DataGrid?x="10"?y="10"?width="436"?id="bookGrid"?
?3?????????dataProvider="{this.myService.GetDataTable.lastResult.Tables.Books.Rows}">
?4?????????<mx:columns>
?5?????????????<mx:DataGridColumn?headerText="编号"?dataField="Id"/>
?6?????????????<mx:DataGridColumn?headerText="书名"?dataField="Name"/>
?7?????????????<mx:DataGridColumn?headerText="作者"?dataField="Author"/>
?8?????????????<mx:DataGridColumn?headerText="价格"?dataField="Price"/>
?9?????????</mx:columns>
10?????</mx:DataGrid>
11?????<mx:ControlBar>
12?????????<mx:Button?label="DataTable"?click="onTable()"/>
13?????</mx:ControlBar>
14?</mx:Panel>
通过DataGrid的dataProvider属性绑定 DataGrid组件的数据源，除了直接通过"{}"绑定表达式帮定外我们也可以在调用远程方法成功的处理函数里给DataGrid指定数据源，见上面代 码中注释的代码部分。{this.myService.GetDataTable.lastResult.Tables.Books.Rows}表示将远 程WebService方法GetDataTable()的返回结果(DataTable)的所有行作为数据源与DataGrid组件进绑定，其中 Books为数据源DataTable的name，详细见前面WebService方法的定义出。程序运行结果如下图：
DataSet,DataTable相比泛型集合来说，性能上有很大的差距，复杂的序列化和反序列化过程也很负责，自从.net 2.0推出泛型到现在，我一直就比较喜欢用泛型来传递大数据。OK，下面我将介绍下在Flex中怎么去处理WebService方法返回的泛型集合数据。 我们有如下WebService方法定义：
1?[WebMethod(Description="该方法返回泛型集合")]
2?public?List?BookList()
3?{
4?return?new?List
5?{
6?new?Book
7?{
8?Id?=?1,
9?Name?=?"《Flex游戏开发》",
10?Author?=?"张三",
11?Price?=?54.85
12?},
13?new?Book
14?{
15?Id?=?1,
16?Name?=?"《Flash游戏开发》",
17?Author?=?"李四",
18?Price?=?65.50
19?}
20?};
21?}
相比DataSet,DataTable类型，使用List<>返回数据我个人认为更方面容易处理。我们直接在WebService的调试环境下测试返回List<>的WebService方法可以看到如下结果：
这就是以泛型结合(List<>)的形式返回的数据形式，相比DataTable的返回结果更为简洁，明了。话说到此，我们在 Flex下该怎么去获取这个返回值和处理这个值呢?其实这里已经很清楚的展现了我们可以通过什么方式去处理，仔细看上图会发 现"ArrayOfBook"????这是什么东西?莫非是在客户端可以通过数组的形式得到这个返回值。为了进一步搞清楚这里面的的点点滴滴，我们需要深 入到内部去了解下返回值的具体构造，通过Flex Builder的调试环境可以得到如下信息：
看清楚了吗?BookList方法的lastResult结构集下有两个对象，点开节点可知正是我们通过List返回的两个 Book对象，而lastResult的类型是：mx.collections.ArrayCollection，这不真是ActionScript中的 数组集合吗?好的，既然这样，在Flex客户端便可以直接通过lastResult得到WebService返回的泛型集合数据了。如下代码块：
1?internal?function?onTable():void
2?{
3?myService.addEventListener(ResultEvent.RESULT,onFault);
5?myService.BookList.send();
6?}
7
8?internal?function?onSuccess(evt:ResultEvent):void
9?{
10?var?arrC:ArrayCollection?=?this.myService.BookList.lastResult?as?ArrayCollection;
11?bookGrid.dataProvider=arrC;
12?}
13
14?internal?function?onFault(evt:FaultEvent):void
15?{
16?Alert.show("调用WebService方法失败，详细："?+?evt.fault.faultDetail.toString());
17
18?}
对应的mxml代码如下(运行结果和上面返回DataTable类型一样)：
?1???mx:Panel?x="41"?y="123"?width="480"?height="279"?layout="absolute"?fontSize="12"> ?2?????<mx:DataGrid?x="10"?y="10"?width="436"?id="bookGrid"> ?3?????????<mx:columns> ?4?????????????<mx:DataGridColumn?headerText="编号"?dataField="Id"/> ?5?????????????<mx:DataGridColumn?headerText="书名"?dataField="Name"/> ?6?????????????<mx:DataGridColumn?headerText="作者"?dataField="Author"/> ?7?????????????<mx:DataGridColumn?headerText="价格"?dataField="Price"/> ?8?????????</mx:columns> ?9?????</mx:DataGrid> 10?????<mx:ControlBar> 11?????????<mx:Button?label="DataTable"?click="onTable()"/> 12?????</mx:ControlBar> 13?</mx:Panel>
