不管我们学习任何语言,第一个先接触到的是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来制作一个小的应用,更是高效快捷!