[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 起來..

其中我們要注意的 就是我們跑起來的網址 http://localhost:39920/Service.asmx 這之後要用到
2.建立Flex 專案:
首先開一個專案叫做 SampleCallService (當然這名字你可以隨便取)

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

在 btnGetUserData 按下後我們會送到Service 一個UserInfo 的物件並且取回後顯示他的姓名跟朋友清單..
檢查是否有改變..
這時候我們就來建立Flex 如何呼叫 Service 的方法..
首先在Flash Builder 4 上面 可以找到 Data –> Connect to Web Service


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

檢查一下 Web Method 正不正確後就按下Finish..
完成後你會在Flash Builder 上面看到

有一個 Data/Services 的 tab 下面有您剛剛引入的Service 還有WebMethod ..
這樣大致上就完成了…
3.發/收 資料
接下來我們在 Data/Service 的地方 對 ModifyUserInfo(userInfo: UserInfo):UserInfo 按下滑鼠右鍵
選擇 Generate Service Call

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

她其實已經幫您建立好了呼叫方式…
所以你只需要那一隻 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>
看一下執行結果:

打完收工…
檔案下載:
.Net Service Code:
Flex 4 Proj Code :
讚一下:
標籤:
教學,
ActionScript,
Flex
|
This entry was posted on 下午2:58
and is filed under
教學
,
ActionScript
,
Flex
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
訂閱:
張貼留言 (Atom)
0 意見:
張貼留言