`

flex 全球天气预报小程序(自己开发)

    博客分类:
  • Flex
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
						layout="horizontal" 
						width="660" height="720"
						creationComplete="init(),getIp()" >
	
	<mx:Script>
		<![CDATA[
		import mx.controls.Alert;
		import mx.collections.ArrayCollection;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;
		import mx.formatters.DateFormatter;      
		import flash.utils.Timer;   
		import flash.events.TimerEvent;                 
		
		[Bindable]
		private var pros:ArrayCollection = new ArrayCollection();
		[Bindable]
		private var cities:ArrayCollection = new ArrayCollection();
		
		//Initillization
		private function init():void {
			addEventListener(KeyboardEvent.KEY_DOWN, onEnterHandler);
			wsWeather.getWeatherbyCityName("Beijing");
		//wsWeather.getSupportProvince();
		}  
		
		// Enter key Event Handler
		private function onEnterHandler(event:KeyboardEvent):void {			
			if (event.keyCode == Keyboard.ENTER){
				query();
			}
		}
		
		//ResultHandler
		private function resultHandler( evt:ResultEvent ):void {
			pros = evt.result as ArrayCollection;
			var arr:ArrayCollection = ArrayCollection(evt.result);    
			this.lblCity.text = arr[0] + "-" + arr[1];
			this.city.source = "http://www.cma.gov.cn/tqyb/img/city/" + arr[3];
			//Weather of Today
			this.lblDate.text = arr[6];
			this.lblwd.text = "Temp:" + arr[5];
			this.lblfl.text = arr[7]; 
			this.img1.source = "assets/images/weather/" + arr[8];
			this.img2.source = "assets/images/weather/" + arr[9];
			//Weather of Tomorrow
			this.lblDate1.text = arr[13];
			this.lblwd1.text = "Temp:" + arr[12];
			this.lblfl1.text = arr[14];	    
			this.img3.source = "assets/images/weather/" + arr[15];
			this.img4.source = "assets/images/weather/" + arr[16];
			//Weather of The day after tomorrow
			this.lblDate2.text = arr[18];
			this.lblwd2.text = "Temp:" + arr[17];
			this.lblfl2.text = arr[19];
			this.img5.source = "assets/images/weather/" + arr[20];
			this.img6.source = "assets/images/weather/" + arr[21];
			
			this.txtIndex.text = arr[11];
			this.txtWeaDetail.text = "        " + arr[10];
			this.txtCityInfo.text = "        " + arr[22];
		}
		//FaultHandler
		private function faultHandler( evt:FaultEvent ):void {
			Alert.show("Sorry.Remote Connetion is unavailable now. Please try it later","Warning Message");
		}
		//Set time
		private function resetNow(event:TimerEvent):void {      
			// get current date and time
			var dateFormatter:DateFormatter = new DateFormatter();    
			dateFormatter.formatString = "YYYY-MM-DD JJ:NN:SS";   
			var time:String = new Date().toLocaleTimeString();   
			var date:String = dateFormatter.format(new Date());   
			this.date.text = date;     
		}
		private function getDate():void{
			//set clock time
			var timer:Timer = new Timer(1000);      
			timer.addEventListener(TimerEvent.TIMER, this.resetNow);                       
			timer.start();
		}           
		//Button Search Clicked handler
		private function query():void {
			if(txtCity.text  == "") {
			Alert.show("Please input a city name!","*Message Tips*");
			return;
			}
			
			wsWeather.getWeatherbyCityName(txtCity.text);
		}
		public function onComplete(event:ResultEvent):void{
			var ipInfo:ArrayCollection = (event.result) as ArrayCollection; 
			ip.text = ipInfo[0];
			address.text = ipInfo[1];
			var addr : String = ipInfo[1];
			var cityPattern:RegExp = /(.*省|.{0})(.*)市/;
			var rs:Object = cityPattern.exec(addr);
			var realAddr:String = rs[2];        
		}
		private function getIp():void{       
			ipWwebService.getGeoIPContext();
		}
		
		]]>
	</mx:Script>
	
	<mx:Style source="assets/css/styles.css" />
	<!--WebService-->
	<mx:WebService id="wsWeather" wsdl="http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl"
				   showBusyCursor="true" 
				   result="resultHandler(event)" 
				   fault="faultHandler(event)"/>
	<mx:WebService id="ipWwebService" wsdl="http://www.webxml.com.cn/WebServices/IpAddressSearchWebService.asmx?wsdl"
				   showBusyCursor="true" result="onComplete(event)" fault="faultHandler(event)"/>
	<mx:Panel  width="100%" height="100%" 
			   layout="absolute" 
			   title="Weather Forecast All Around the World" 
			   fontSize="12" >
		<!--Header Part-->
		<mx:Canvas top="0"> 
			<mx:TextInput x="10" y="10" id="txtCity" text="Beijing" width="119" toolTip="Please input a City Name"/>
			<mx:Button x="137" y="10" label="Search" id="btnQuery" click="query()" 
					   buttonMode="true" 
					   toolTip="Press Enter to Search"
					   borderColor="#0099ff"/>
			
			<mx:Label x="10" y="38" width="206.25" height="24" fontWeight="bold" color="#FD060C" id="lblCity"/> 
			<mx:Text id="date" text="" creationComplete="this.getDate()" right="1" height="20" width="167" top="2" color="red"/>
			<mx:Image id="city" x="226.25" y="3" width="140.75" height="69"/>
			<mx:Label x="390" y="23" text="IP:" width="53" height="24" fontWeight="bold" truncateToFit="true" textAlign="right" paddingTop="4"/>
			<mx:Label x="378" y="48" text="Location:" height="24"  textAlign="right" paddingTop="4"/>
			<mx:Text x="449" y="26" id="ip" width="120" height="24" color="#6E8ADE"/>
			<mx:Text x="450" y="53" width="120" id="address" height="24" color="#6E8ADE"/>
			
		</mx:Canvas>
		<!--Weather Info of Three Days-->
		<mx:HBox top="90" left="80" horizontalGap="90" width="100%">  	    
			<mx:Label  text="Today"   fontWeight="bold" color="#000000"/>
			<mx:Label  text="Tomorrow"  fontWeight="bold" color="#cdcdcd" />
			<mx:Label  text="The Day After Tomorrow"   fontWeight="bold" color="#ffbdbd"/>
		</mx:HBox>
		
		<mx:HBox  y="111" x="20" >
			<!--Weather of Today-->
			<mx:Canvas  width="168" height="138" borderStyle="solid" borderColor="#111AC6">
				<mx:VBox left="10" horizontalAlign="center" verticalGap="10">  
					<mx:Label   width="146" height="24" id="lblDate" styleName="WeaToday"/>
					<mx:Label  width="146" height="24" id="lblwd" styleName="WeaToday"/>
					<mx:Label   id="lblfl" width="146" height="29" styleName="WeaToday"/> 
				</mx:VBox>
				<mx:HBox top="100" left="40" horizontalGap="20">		   
					<mx:Image id="img1" />
					<mx:Image id="img2"  />
				</mx:HBox>
			</mx:Canvas>
			<!--Weather of Tomorrow-->
			<mx:Canvas   width="168" height="138" borderStyle="solid" borderColor="#111AC6">
				<mx:VBox left="10" horizontalAlign="center" verticalGap="10">
					<mx:Label   width="146" id="lblDate1" styleName="WeaTomorrow"/>
					<mx:Label   width="146" height="24" id="lblwd1" styleName="WeaTomorrow"/>
					<mx:Label   id="lblfl1" width="146" height="29" styleName="WeaTomorrow"/>
				</mx:VBox>
				<mx:HBox top="100" left="40" horizontalGap="20">		   
					<mx:Image id="img3"  />
					<mx:Image id="img4"  />
				</mx:HBox>
			</mx:Canvas>
			
			<!--Weather of The day after tomorrow-->
			<mx:Canvas   width="168" height="138" borderStyle="solid" borderColor="#111AC6">
				<mx:VBox left="10" horizontalAlign="center" verticalGap="10">
					<mx:Label  width="146" id="lblDate2" styleName="WeaAfter"/>
					<mx:Label   width="146" height="24" id="lblwd2" styleName="WeaAfter"/>
					<mx:Label   id="lblfl2" width="146" height="29" styleName="WeaAfter"/>
				</mx:VBox>
				<mx:HBox top="100" left="40" horizontalGap="20">		   
					<mx:Image id="img5" />
					<mx:Image id="img6" />
				</mx:HBox>
			</mx:Canvas>    	
		</mx:HBox>
		
		<mx:VBox top="260" left="10" borderColor="#dedede">
			<mx:Label  text="今日综合指数信息概览" color="#0099ff"/>
			<mx:TextArea  width="570" height="85" id="txtIndex" editable="false"/>
			
			<mx:Label  text="今天的详细天气情况" color="#0099ff"/>
			<mx:TextArea   width="570" height="54" id="txtWeaDetail" editable="false"/>
			
			<mx:Label   id="lblCityInfo" text="{txtCity.text}市信息概览" color="#0099ff" />
			<mx:TextArea  width="570" height="98" id="txtCityInfo" editable="false"/>
			
		</mx:VBox>
		
	</mx:Panel>
	
</mx:WindowedApplication> 
分享到:
评论

相关推荐

    一个Flex做的天气预报widget

    总的来说,这个Flex天气预报小部件展示了如何结合Flex的组件化UI设计、ActionScript编程以及JSON数据交换来创建交互式的Web应用程序。通过学习这个项目,开发者可以深入了解Flex框架,理解如何处理JSON数据,以及...

    Flex实现天气预报服务

    在本项目中,“Flex实现天气预报服务”指的是利用Flex的技术来创建一个应用,该应用能够通过调用外部的Web服务接口获取并显示天气预报信息。 Flex中的WebService组件是用于与SOAP(Simple Object Access Protocol)...

    FLEX AIR天气预报查询

    【标题】"FLEX AIR天气预报查询"是一个基于Adobe Flex和Adobe AIR技术开发的应用程序,主要功能是通过WebService接口获取并展示天气预报信息。这个小程序是开发者为了学习Flex与Web服务之间的通信机制而创建的,同时...

    微信小程序+Flex布局示例源代码

    微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要应用于移动端,提供了一套自己的开发工具和语言,使得开发者可以构建出与原生应用体验相近的小程序。在这个"微信小程序+Flex布局示例源代码"中,我们将...

    Flex开发的天气预报APP

    flex开发的跨平台应用app,天气预报。 用的是flex4.6 SDK开发的。

    使用Flex调用webService开发一个天气预报服务

    通过Flex调用Web Service开发天气预报服务,我们可以利用Flex的强大UI设计能力和ActionScript的灵活性,结合Web Service的数据交换能力,实现跨平台的应用程序。这种技术在很多实际项目中都有广泛应用,比如构建交互...

    ruby+flex实现天气预报

    本文介绍了如何使用Ruby和Flex技术来实现一个天气预报应用,展示了RIA(Rich Internet Applications)开发的优势。Ruby是一种动态、灵活的编程语言,常用于后端业务逻辑处理,而Flex则是一种用于构建富客户端应用的...

    使用微搭低代码平台开发天气预报应用小程序.docx

    使用微搭低代码平台开发天气预报应用小程序 微搭低代码平台是一种快速开发应用程序的平台,利用腾讯云的微搭低代码平台,可以快速地搭建一个天气预报的小程序。本文将指导读者如何使用微搭低代码平台开发天气预报...

    flex天气预报源码

    Flex天气预报源码是一款基于Adobe Flex技术开发的应用程序,它主要功能是获取并展示全球各地的天气信息。Flex是一种开源的、基于ActionScript的编程语言和框架,用于创建富互联网应用(RIA)。这款源码利用Flex强大...

    微信小程序 FlexLayout布局 (源码)

    微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...

    微信小程序开发中flex布局容器及元素之属性技术释疑.pdf

    微信小程序开发中的Flex布局是一种灵活的布局方式,其核心是通过设置容器的display属性为flex或inline-flex来启用。Flex布局允许容器内的元素能够以灵活的方式进行排列,适应不同屏幕尺寸和分辨率。在微信小程序中,...

    flex 两个图片播放小程序

    在IT行业中,Flex是一种强大的开发框架,主要用于构建富互联网应用程序(RIA)。在这个“flex 两个图片播放...这样的小程序在用户体验、图像处理和性能优化方面都有一定的技术深度,展示了Flex在RIA开发中的强大能力。

    微信小程序flex布局demo

    微信小程序是一种轻量级的应用开发框架,由腾讯公司推出,主要应用于移动端,提供了一套基于JavaScript和WXML(微信小程序标记语言)的开发环境。在微信小程序中,开发者可以利用CSS布局方式之一的Flex布局来实现...

    Flex应用程序开发

    ### Flex应用程序开发:深入理解与实践 #### 一、Flex概览 Flex是Adobe Systems Incorporated推出的一款用于构建高质量的Rich Internet Applications(RIA)的开源框架。它基于Flash平台,允许开发者使用标准的Web...

    微信小程序 Flex布局详解

    弹性因子(flex-grow, flex-shrink, flex-basis)在微信小程序的Flex布局中,每个伸缩项目都可以通过flex属性来指定其弹性因子,它是一个简写属性,可以设置三个值:flex-grow, flex-shrink, 和 flex-basis。1. flex...

    微信小程序的FlexLayout布局实例.rar

    本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...

    微信小程序-微信小程序的Flex布局demo

    掌握flex布局可以在制作微信小程序时减少wxss的代码,同时也符合微信小程序开发的文档要求 本代码中涉及到四种Flex的布局方式,分别使用了不同的flex的不同属性。 建议看本文最后的学习参考进行相关属性的学习 骰子...

    使用Flex4.5开发Android应用程序

    在本文中,我们将深入探讨如何使用Adobe Flex 4.5框架来开发针对Android操作系统的应用程序。Flex是一款强大的、基于ActionScript的开源开发工具,它允许开发者创建富互联网应用(RIA)以及跨平台的移动应用。Flex ...

Global site tag (gtag.js) - Google Analytics