五分钟快速用Flex构建WebService应用

不管我们学习任何语言，第一个先接触到的是Hello World。然后才是其他方面的知识和技巧。学习Flex，你一定也接触过Hello World之类的起始应用，然后就是你可以开始接触MXML和AS3语法，控件，布局等知识。今天这个例子，是提供给已经开始学习Flex的开发人员，目 的是说我们可以通过Flex Builder，在五分钟之内，构造一个连接WebService服务，获取国内城市的天气预报应用。

在了解这个应用之前，请你先做好以下准备（其实也是开发其他Flex应用的准备）：

下载Flex Builder 3并安装好它。你可以安装for eclispe插件的版本，也可以安装standalone的版本。安装后的使用并没有什么太大的差别。

接下来就让我们看看如何在五分钟之内完成一个Flex城市天气预报小应用，我想这应该比写HelloWorld更有成就感。

首先，我们会先使用已经准备好的一个天气预报的WebService服务，WebService服务来自WebXML，免费，而且查询信息来自国家气象局，地址如下：http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl

你可以试着在浏览器内打开上面的这个连接，你会看到浏览器内返回的是XML结构的WSDL文档描述，从中，你可以找到这样的一部分代码：

<s:element name="getWeatherbyCityName">
  <s:complexType>
    <s:sequence>
      <s:element minOccurs="0" maxOccurs="1" name="theCityName" type="s:string"/>
    </s:sequence>
  </s:complexType>
</s:element>
其中getWeatherbyCityName就是请求WS返回特定城市天气预报的函数名称，而theCityName就是城市名的参数（其实这个参数你只 要将合法的城市名以String格式传给getWeatherbyCityName就可以了。至于哪个城市在它WebService的服务之列，你可以自 己来挖掘WebService发现

截止做完上面我说的这一步，你大概花了30秒的时间

接下来，你可以通过访问这里去进一步测试此WebService，而且可以在着手写代码前，先看看城市天气预报返回的XML数据构成，以及SOAP1.1和1.2的标准请求 和响应示例，包括HTTP的GET和POST示例。你试着，输入城市为“北京”，你将会得到的返回数据是基于XML格式的数据

http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?op=getWeatherbyCityName

<ArrayOfString>
<string>直辖市</string>
<string>北京</string>
<string>54511</string>
<string>54511.jpg</string>
<string>2009-2-20 15:14:50</string>
<string>4℃ / -6℃</string>
<string>2月20日 晴转多云</string>
<string>微风</string>
<string>0.gif</string>
<string>1.gif</string>
<string>今日天气实况：；1℃；风向/风力：南风3级；空气质量：中；紫外线强度：弱</string>
<string>
穿衣指数：天气冷，建议着棉衣、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣或冬大衣。
感冒指数：昼夜温差较大，较易发生感冒，请适当增减衣服。体质较弱的朋友请注意防护。
晨练指数：天气晴朗，空气清新，是您晨练的大好时机，建议不同年龄段的人们积极参加户外健身活动。
交通指数：天气晴朗，路面干燥，交通气象条件良好，车辆可以正常行驶。
中暑指数：温度不高，其他各项气象条件适宜，中暑机率极低。
公园指数：天气寒冷，不适宜放风筝。
防晒指数：紫外线强度较弱，建议涂擦SPF在12-15之间，PA+的防晒护肤品。
旅行指数：晴天，天冷加上有风，旅游指数一般，您在外出游玩的时候可要多穿衣服，以免感冒呀！
</string>
<string>7℃ / -3℃</string>
<string>2月21日 多云</string>
<string>微风</string>
<string>1.gif</string>
<string>1.gif</string>
<string>4℃ / -6℃</string>
<string>2月22日 多云</string>
<string>微风</string>
<string>1.gif</string>
<string>1.gif</string>
<string>
北 京位于华北平原西北边缘，市中心位于北纬39度，东经116度，四周被河北省围着，东南和天津市相接。全市面积一万六千多平方公里，辖12区6县，人口 1100余万。北京为暖温带半湿润大陆性季风气候，夏季炎热多雨，冬季寒冷干燥，春、秋短促，年平均气温10-12摄氏度。
北京是世界历史文化名 城和古都之一。早在七十万年前，北京周口店地区就出现了原始人群部落“北京人”。而北京建城也已有两千多年的历史，最初见于记载的名字为“蓟”。公元前 1045年北京成为蓟、燕等诸侯国的都城；公元前221年秦始皇统一中国以来，北京一直是中国北方重镇和地方中心；自公元938年以来，北京又先后成为辽 陪都、金上都、元大都、明清国都。1949年10月1日正式定为中华人民共和国首都。
北京具有丰富的旅游资源，对外开放的旅游景点达200多处， 有世界上最大的皇宫紫禁城、祭天神庙天坛、皇家花园北海、皇家园林颐和园，还有八达岭、慕田峪、司马台长城以及世界上最大的四合院恭王府等各胜古迹。全市 共有文物古迹7309项，其中国家文物保护单位42个，市级文物保护单位222个。北京的市树为国槐和侧柏，市花为月季和菊花。另外，北京出产的象牙雕 刻、玉器雕刻、景泰蓝、地毯等传统手工艺品驰誉世界。
</string>
</ArrayOfString>

现在，你看到了这就是北京近三天的天气预报和北京这个城市的基本信息（来自国家气象局）。作为一名开发者，你会发现这个WebService返回的数据是 XML结构，但是各个元素的名称却都是string，没有其他特征，这种结构最适合通过Flex的ArrayCollection来承载，而不是e4x。
到这一步，你大概花了一分钟来了解WebService了
接下来，你要开始使用Flex Builder开发一个非常简单的天气预报查询的小应用。我们这里所实现的就是简单的查询，获取WebService结果，显示出来。我们构造这个 Flex应用，首先，我们需要使用ArrayCollection，需要使用WebService类，需要处理响应，同时，需要有个简单的错误响应。有了 这些想法，我们开始着手写代码，首先在应用场景Application上加入三个标签，一个TextInput，用来输入要查询的城市；一个按钮，用来点 击时候调用WebService服务；一个Text文本区域，用来显示返回的天气预报结果。代码也非常简单：

<mx:TextInput id="cityname" text="北京"/>
<mx:Button label="Call WebService" click=""/>
<mx:TextArea id="myWeatherReport" height="100%" width="80%" editable="false" />


到了这里，你又花了一分钟的时间。
接下来，你要引入WebService服务，你需要加入一个WebService标签来帮你完成任务

<mx:WebService id="webService" wsdl="http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl"
showBusyCursor="true" result="onLoad(event)" fault="faultHandler(event)"/>

这里有几个属性，实例化id是webService，wsdl地址就是我们上面的那个wsdl地址，showBusyCursor设置为true，表示工作 状态，result事件就是当WebService返回结果时，调用一个方法，这个方法，我们叫做onLoade，传递的参数是result event对象，同样，fault事件的响应函数将是faultHandler。然后，我们给Button控件的click事件加入对于 WebService的调用"webService.getWeatherbyCityName(cityname.text)"。
到了这里，你又花了大概一分钟的时间。
最后，引入我们对于Onload和faultHandler的处理，也很简单：

  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.utils.ArrayUtil;
      import mx.controls.Alert;
      import mx.rpc.events.ResultEvent;
      import mx.rpc.events.FaultEvent;
      private function onLoad(event:ResultEvent):void{
        //Alert.show(event.result.toString(),"WebService Results");
        var weatherInfo:ArrayCollection = (event.result) as ArrayCollection;
        for(var i:int=0;i<weatherInfo.length;i++){
          myWeatherReport.text+=weatherInfo[i]+"\n";
        }
      }
      private function faultHandler(event:FaultEvent):void{
        Alert.show(event.fault.toString(),’WebService Error’);
      }
    ]]>
  </mx:Script>
截止到这里，你可能又花了大概一分半钟，总共已经花掉了四分半钟的时间。
最后30秒，留给你测试这个应用。



怎么样，是不是比做HelloWorld还有成就感？你还可以通过CSS和其他各种方式进一步美化应用，达到很酷的设计要求。

当然，我这五分钟只是一个“噱头”，真正要说的意思，就是Flex开发上手和学习的确非常简单，尤其是对于已经有Java或.net开发经验的朋友，用Flex来制作一个小的应用，更是高效快捷！ 

转载于:http://www.5uflash.com/Flex-AIR/Flexziliao/4914.html
                                                          谢谢作者

评论

1 楼 eric_619 2010-06-03  

好好的多写点完整代码不行吗 :