[Flex] 在Flex 4(Flash Builder 4) 中呼叫 .Net Web Service

2011/04/01

之前有分享過幾篇 使用Flex Call .Net WebService 那是使用  Flex 3 的方法..
現在更新到Flex 4 還真的有點不習慣..

從Flex 2 玩到現在只能說她依賴IDE的成分越來越重..
好的是簡單,快速 但是缺點是很多東西在理解上面會不如以前來的紮實..
Anyway ,既然都已經到了21 世紀我們就來看看Flex 4 在Call WebService是有多溫馨..
不過說真的,只要學會了會覺得Call WebService很簡單,但是如果以前是玩Flex 的人現在玩Flex 4
反而會被Flash Builder 弄得霧沙沙~~


1. 首先建立 .Net WebService
這邊很簡單,我就貼上程式碼,程式碼裡面我解釋做啥

 
 
using System.Web.Services;
 
namespace SampleFlex4Service
{
/// <summary>
/// Summary description for Service
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
 
[WebMethod]
public UserInfo ModifyUserInfo(UserInfo userInfo)
{
 
userInfo.Name += "!!";
userInfo.Age += 1;
userInfo.Friends = "Kelly,Wiwi,Shinban,h40".Split(',');
return userInfo;
 
}
}
 
public class UserInfo
{
public string Name { get; set; }
public int Age { get; set; }
public string[] Friends { get; set; }
}
}


這邊就不多做解釋 就是我開一個叫做UserInfo 的Class 然後並且寫一隻叫做 ModifyUserInfo 的 Web Method
他主要就是把傳進來的UserInfo物件做些修改後傳回…

之後我們Run 起來..

blog-101
其中我們要注意的 就是我們跑起來的網址 http://localhost:39920/Service.asmx 這之後要用到

2.建立Flex 專案:

首先開一個專案叫做 SampleCallService (當然這名字你可以隨便取)

blog-93

建立完成後 我們拉一些元件 如下

blog-97
在 btnGetUserData 按下後我們會送到Service 一個UserInfo 的物件並且取回後顯示他的姓名跟朋友清單..
檢查是否有改變..

這時候我們就來建立Flex 如何呼叫  Service  的方法..

首先在Flash Builder 4 上面 可以找到  Data –> Connect to Web Service

blog-94

blog-95
A 這欄位 就是在步驟一的時候你的Web Service 的網址不過後面記得加上?wsdl 這一點很重要
B 跟 C 的地方要不要自行改名字都可以..

接下來…
blog-96
檢查一下 Web Method 正不正確後就按下Finish..

完成後你會在Flash Builder 上面看到

blog-98

有一個 Data/Services 的 tab 下面有您剛剛引入的Service 還有WebMethod ..

這樣大致上就完成了…

3.發/收 資料

接下來我們在 Data/Service 的地方 對  ModifyUserInfo(userInfo: UserInfo):UserInfo 按下滑鼠右鍵
選擇 Generate Service Call
blog-99

之後畫面一閃而過… 我們來看一下 MXML多了寫什麼?!
blog-100

她其實已經幫您建立好了呼叫方式…
所以你只需要那一隻  modifyUserInfo(userInfo:UserInfo):void 就可以成功呼叫
但是呼叫回來的方式 是在  <s:CallResponder  id="ModifyUserInfoResult" />
加入一個result 事件

譬如 :
<s:CallResponder  id="ModifyUserInfoResult"  result="ModifyUserInfoResult_resultHandler(event)" />

這樣你就可以在

protected function ModifyUserInfoResult_resultHandler(event:ResultEvent):void {} 中處理傳回來的值..

這邊我就不贅述 Code 如下:

 
 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:dotnetservice="services.dotnetservice.*">
<fx:Declarations>
<s:CallResponder  id="ModifyUserInfoResult"  result="ModifyUserInfoResult_resultHandler(event)" />
<dotnetservice:DotNetService id="dotNetService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button x="56" y="52" label="送入Service並取得" width="162" id="btnGetUserData" height="41" click="btnGetUserData_clickHandler(event)"/>
<s:Label x="56" y="117" text="-" width="150" height="23" id="lblNameAge"/>
<s:List x="56" y="148" width="151" height="220" id="listFriends"></s:List>
<fx:Script>
<![CDATA[
import DotNetServiceObjects.UserInfo;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
protected function modifyUserInfo(userInfo:UserInfo):void
{
ModifyUserInfoResult.token = dotNetService.ModifyUserInfo(userInfo);
}
protected function ModifyUserInfoResult_resultHandler(event:ResultEvent):void
{
//將傳回結果取得
var userInfo:UserInfo= event.result as UserInfo ; 
//顯示在畫面上
this.lblNameAge.text=userInfo.Name +" , 年齡" + userInfo.Age.toString();
this.listFriends.dataProvider=userInfo.Friends;
}
 
protected function btnGetUserData_clickHandler(event:MouseEvent):void
{
//準備UserInfo 物件
var  userInfo:UserInfo =new UserInfo();
userInfo.Name="當麻許";
userInfo.Age=27; 
userInfo.Friends="Allen,Boss,Cat".split(",");
//呼叫
modifyUserInfo(userInfo);
}
 
]]>
</fx:Script>
</s:Application>

看一下執行結果:

blog-102

打完收工…

檔案下載:
.Net Service Code:


Flex 4 Proj Code :


讚一下:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.