Flex4之与后台服务器通信方式:WebService

这次说的关于Flex的WebService来自于一位网友的贡献,看了后十分清晰,果然比纯JAVA的WebService要方便许多,只需要提供一个WebService服务地址,如中国气象局的免费服务【当然大家都知道这个界面就是个XML】:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl

通过下面这个网址可以输入城市,查询城市天气预报

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

我们现在要做的就是实现这个功能,在Flex上面非常容易,贴上代码

只有一个mxml即可

Xml代码 复制代码 收藏代码
  1. <spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?> 
  2. <s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"  
  3.                xmlns:s="library://ns.adobe.com/flex/spark"  
  4.                xmlns:mx="library://ns.adobe.com/flex/mx"minWidth="955"minHeight="600"> 
  5.     <fx:Declarations> 
  6.         <!-- 将非可视元素(例如服务、值对象)放在此处 --> 
  7.         <mx:WebServiceid="webService"wsdl="http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl" 
  8.                        showBusyCursor="true"result="onLoad(event)"fault="faultHandler(event)"/> 
  9.     </fx:Declarations> 
  10.     <fx:Script> 
  11.         <![CDATA[
  12.             import mx.collections.ArrayCollection;
  13.             import mx.controls.Alert;
  14.             import mx.rpc.events.FaultEvent;
  15.             import mx.rpc.events.ResultEvent;
  16.             private function onLoad(event:ResultEvent):void{
  17.                 //Alert.show(event.result.toString(),"WebService Results");
  18.                 var weatherInfo:ArrayCollection = (event.result) as ArrayCollection;
  19.                 for(var i:int=0;i<weatherInfo.length;i++){
  20.                     myWeatherReport.text+=weatherInfo[i]+"\n";
  21.                 }
  22.             }
  23.             private function faultHandler(event:FaultEvent):void{
  24.                 Alert.show(event.fault.toString(),'WebService Error');
  25.             }
  26.            
  27.             protected function button1_clickHandler(event:MouseEvent):void
  28.             {
  29.                 webService.getWeatherbyCityName(cityName.text);
  30.             }
  31.         ]]> 
  32.     </fx:Script> 
  33.     <s:Panelx="48"y="21"width="679"height="423"title="城市天气预报查询FLEX"> 
  34.         <s:TextInputx="135"y="26"id="cityName"/> 
  35.         <s:Labelx="43"y="31"text="请输入城市名称"/> 
  36.         <s:Buttonx="286"  y="26"label="点击查询"click="button1_clickHandler(event)"/> 
  37.         <s:TextAreaid="myWeatherReport"x="31"y="68"width="615"height="297"/> 
  38.     </s:Panel> 
  39.      
  40. </s:Application> 
  41. </span> 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<mx:WebService id="webService" wsdl="http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl"
					   showBusyCursor="true" result="onLoad(event)" fault="faultHandler(event)"/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			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'); 
			} 
			

			protected function button1_clickHandler(event:MouseEvent):void
			{
				webService.getWeatherbyCityName(cityName.text);
			}

		]]>
	</fx:Script>
	<s:Panel x="48" y="21" width="679" height="423" title="城市天气预报查询FLEX">
		<s:TextInput x="135" y="26" id="cityName"/>
		<s:Label x="43" y="31" text="请输入城市名称"/>
		<s:Button x="286"  y="26" label="点击查询" click="button1_clickHandler(event)"/>
		<s:TextArea id="myWeatherReport" x="31" y="68" width="615" height="297"/>
	</s:Panel>
	
</s:Application>

 

效果图就是下面这样的

posted @ 2014-03-26 20:06  regalys168  阅读(140)  评论(0编辑  收藏  举报