Flex构建WebService应用

淡淡的烟草味﹌ 2022-08-07 07:35 170阅读 0赞

在网上看到一篇文章，内容如下（原文：http://www.5uflash.com/Flex-AIR/Flexziliao/4914.html）：  
不管我们学习任何语言，第一个先接触到的是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发现  
  
接下来，你可以通过访问这里去进一步测试此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>   
  
  
怎么样，是不是比做HelloWorld还有成就感？你还可以通过CSS和其他各种方式进一步美化应用，达到很酷的设计要求。