Flex调用Webservice实现天气预报

这两天在学习Flex调用Webservice的实现。做了一个天气预报,下面是代码和心得。

Flex调用Webservice有多种方法,可以通过Flex Builder提供的管理Webservices的工具解析WSDL文档生成本地调用类。也可以通过Action Script中Webservice类来实现。还有就是使用<Webservice>组件实现。这次我使用的是最后一种,感觉这种方法较为简洁。

1.构建界面。用于接受用户输入及结果输出。包括:1个Text输入组件,1个按钮组件,10个标签组件

2.添加Webservice组件。根据Web服务提供者的说明,构建Webservice组件。代码如下:

< mx:WebService id ="ws" wsdl ="http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl"
useProxy
="false" showBusyCursor ="true" >
< mx:operation name ="getWeatherbyCityName" result ="resultOK()" >
< mx:request >
< theCityName >
{city.text.toString()}
</ theCityName >
</ mx:request >
</ mx:operation >
</ mx:WebService >

注意:operation组件中的name属性需要和待使用的方法的名字相同。result的属性是在调用方法成功后执行的Action Script 方法。operation还有其他属性,鉴于例子很简单,就不一一使用了。

3.编写Action Script方法。本例中使用了三个方法:resultOK()用于显示结果的,showMessage()用于显示说明,getfocus()用于当输入栏得到焦点时清空输入栏内容的。下面是resultOK()的分析:

publicfunctionresultOK():void{//显示接受的结果
arrayResult=newArrayCollection();
arrayResult=ws.getWeatherbyCityName.lastResult;

//显示今天的情况
jin1.text=arrayResult[6].toString().substring(0,arrayResult[6].toString().indexOf(""));
jin2.text=arrayResult[6].toString().substring((arrayResult[6].toString().indexOf(""))+1);
jin3.text=arrayResult[5];
jin4.text=arrayResult[7];

//显示明天的情况
ming1.text=arrayResult[13].toString().substring(0,arrayResult[13].toString().indexOf(""));
ming2.text=arrayResult[13].toString().substring((arrayResult[13].toString().indexOf(""))+1);
ming3.text=arrayResult[12];
ming4.text=arrayResult[14];

//显示后天的情况
hou1.text=arrayResult[18].toString().substring(0,arrayResult[18].toString().indexOf(""));
hou2.text=arrayResult[18].toString().substring((arrayResult[18].toString().indexOf(""))+1);
hou3.text=arrayResult[17];
hou4.text=arrayResult[19];
}

在使用Web服务返回的结果时,发现其结果保存在字符数组中的,在WSDL中是ArrayOfString,而Flex没有这种格式,在试过String,Array类型后,发现ArrayCollection类可以使用。然后就是显示结果,可根据WSDL说明来挑选信息。

4.使用按钮调用Webservice组件,发送Web服务信息。即调用ws.getWeatherbyCityName.send()方法。

编译发布swf文件。

求助:在使用swf文件的时候有这样的问题,不晓得怎么把flex导出的swf嵌入Html中。普通的嵌入,不能实现调用Web服务的功能,使用项目生成的文件包中的Html文件倒是可以,但是如果把文件包复制出来,放到另外的地方,又无法使用Web服务了。那位高手能够给予帮助,在下将不胜感激。

完整代码如下

<? xmlversion="1.0"encoding="gb2312" ?>
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" width ="330"
height
="155" layout ="absolute" fontSize ="12" viewSourceURL ="srcview/index.html" >
< mx:Script >
<![CDATA[
importmx.controls.Alert;
importmx.collections.ArrayCollection;
publicvararrayResult:ArrayCollection;//保存接收到的结果
publicfunctionresultOK():void{//显示接受的结果
arrayResult=newArrayCollection();
arrayResult=ws.getWeatherbyCityName.lastResult;

//显示今天的情况
jin1.text=arrayResult[6].toString().substring(0,arrayResult[6].toString().indexOf(""));
jin2.text=arrayResult[6].toString().substring((arrayResult[6].toString().indexOf(""))+1);
jin3.text=arrayResult[5];
jin4.text=arrayResult[7];

//显示明天的情况
ming1.text=arrayResult[13].toString().substring(0,arrayResult[13].toString().indexOf(""));
ming2.text=arrayResult[13].toString().substring((arrayResult[13].toString().indexOf(""))+1);
ming3.text=arrayResult[12];
ming4.text=arrayResult[14];

//显示后天的情况
hou1.text=arrayResult[18].toString().substring(0,arrayResult[18].toString().indexOf(""));
hou2.text=arrayResult[18].toString().substring((arrayResult[18].toString().indexOf(""))+1);
hou3.text=arrayResult[17];
hou4.text=arrayResult[19];
}

//显示说明
publicfunctionshowMessage():void{
varalert:Alert=Alert.show("请输入城市中文名称(国外城市可用英文)。web服务来源于http://www.webxml.com.cn,数据来源于中国气象局"+
",包括340多个中国"+
"主要城市和60多个国外主要城市三日内的天气情况。作者EMAIL:[email protected]","说明",Alert.YES);
}

//处理当输入栏获得焦点时,输入栏清空
publicfunctiongetfocus():void{
city.text="";
}
]]>
</ mx:Script >


< mx:WebService id ="ws" wsdl ="http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl"
useProxy
="false" showBusyCursor ="true" >
< mx:operation name ="getWeatherbyCityName" result ="resultOK()" >
< mx:request >
< theCityName >
{city.text.toString()}
</ theCityName >
</ mx:request >
</ mx:operation >
</ mx:WebService >

< mx:TextInput id ="city" text ="请输入城市名,支持国内外主要城市"
width
="200" x ="10" y ="10" focusIn ="getfocus()" fontSize ="12" color ="#909697" />

< mx:Button id ="check" x ="230" y ="10" label ="查询" click ="ws.getWeatherbyCityName.send()" />

<!-- 显示结果的Label -->
< mx:Label x ="10" y ="42" text ="" width ="90" id ="jin1" />
< mx:Label x ="10" y ="70" text ="" width ="90" id ="jin2" />
< mx:Label x ="10" y ="98" text ="" width ="90" id ="jin3" />
< mx:Label x ="10" y ="126" text ="" width ="90" id ="jin4" />
< mx:Label x ="120" y ="42" text ="" width ="90" id ="ming1" />
< mx:Label x ="120" y ="70" text ="" width ="90" id ="ming2" />
< mx:Label x ="120" y ="98" text ="" width ="90" id ="ming3" />
< mx:Label x ="120" y ="126" text ="" width ="90" id ="ming4" />
< mx:Label x ="230" y ="41" text ="" width ="90" id ="hou1" />
< mx:Label x ="230" y ="69" text ="" width ="90" id ="hou2" />
< mx:Label x ="230" y ="97" text ="" width ="90" id ="hou3" />
< mx:Label x ="230" y ="125" text ="" width ="90" id ="hou4" />

<!-- 显示说明的Label -->
< mx:Label x ="288" y ="12" text ="说明" width ="32" textDecoration ="underline" color ="#FAFBFB" click ="showMessage()" />
</ mx:Application >

你可能感兴趣的:(webservice)