Flex构建WebService应用

转载

mb5fe94c9f04536 2010-09-30 00:04:00

文章标签 xml 数据手写代码返回结果 i++ 文章分类 代码人生

就让我们看看如何在五分钟之内完成一个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

<string>2月20日晴转多云</string>

<string>今日天气实况：；1℃；风向/风力：南风3级；空气质量：中；紫外线强度：弱</string>

穿衣指数：天气冷，建议着棉衣、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣或冬大衣。

感冒指数：昼夜温差较大，较易发生感冒，请适当增减衣服。体质较弱的朋友请注意防护。

晨练指数：天气晴朗，空气清新，是您晨练的大好时机，建议不同年龄段的人们积极参加户外健身活动。

交通指数：天气晴朗，路面干燥，交通气象条件良好，车辆可以正常行驶。

中暑指数：温度不高，其他各项气象条件适宜，中暑机率极低。

公园指数：天气寒冷，不适宜放风筝。

防晒指数：紫外线强度较弱，建议涂擦SPF在12-15之间，PA+的防晒护肤品。

旅行指数：晴天，天冷加上有风，旅游指数一般，您在外出游玩的时候可要多穿衣服，以免感冒呀！

</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="webService.getWeatherbyCityName(cityname.text)"/>

<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;