<?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天气预报小部件展示了如何结合Flex的组件化UI设计、ActionScript编程以及JSON数据交换来创建交互式的Web应用程序。通过学习这个项目,开发者可以深入了解Flex框架,理解如何处理JSON数据,以及...
在本项目中,“Flex实现天气预报服务”指的是利用Flex的技术来创建一个应用,该应用能够通过调用外部的Web服务接口获取并显示天气预报信息。 Flex中的WebService组件是用于与SOAP(Simple Object Access Protocol)...
【标题】"FLEX AIR天气预报查询"是一个基于Adobe Flex和Adobe AIR技术开发的应用程序,主要功能是通过WebService接口获取并展示天气预报信息。这个小程序是开发者为了学习Flex与Web服务之间的通信机制而创建的,同时...
微信小程序是一种轻量级的应用开发平台,由腾讯公司推出,主要应用于移动端,提供了一套自己的开发工具和语言,使得开发者可以构建出与原生应用体验相近的小程序。在这个"微信小程序+Flex布局示例源代码"中,我们将...
flex开发的跨平台应用app,天气预报。 用的是flex4.6 SDK开发的。
通过Flex调用Web Service开发天气预报服务,我们可以利用Flex的强大UI设计能力和ActionScript的灵活性,结合Web Service的数据交换能力,实现跨平台的应用程序。这种技术在很多实际项目中都有广泛应用,比如构建交互...
本文介绍了如何使用Ruby和Flex技术来实现一个天气预报应用,展示了RIA(Rich Internet Applications)开发的优势。Ruby是一种动态、灵活的编程语言,常用于后端业务逻辑处理,而Flex则是一种用于构建富客户端应用的...
使用微搭低代码平台开发天气预报应用小程序 微搭低代码平台是一种快速开发应用程序的平台,利用腾讯云的微搭低代码平台,可以快速地搭建一个天气预报的小程序。本文将指导读者如何使用微搭低代码平台开发天气预报...
Flex天气预报源码是一款基于Adobe Flex技术开发的应用程序,它主要功能是获取并展示全球各地的天气信息。Flex是一种开源的、基于ActionScript的编程语言和框架,用于创建富互联网应用(RIA)。这款源码利用Flex强大...
微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...
微信小程序开发中的Flex布局是一种灵活的布局方式,其核心是通过设置容器的display属性为flex或inline-flex来启用。Flex布局允许容器内的元素能够以灵活的方式进行排列,适应不同屏幕尺寸和分辨率。在微信小程序中,...
在IT行业中,Flex是一种强大的开发框架,主要用于构建富互联网应用程序(RIA)。在这个“flex 两个图片播放...这样的小程序在用户体验、图像处理和性能优化方面都有一定的技术深度,展示了Flex在RIA开发中的强大能力。
微信小程序是一种轻量级的应用开发框架,由腾讯公司推出,主要应用于移动端,提供了一套基于JavaScript和WXML(微信小程序标记语言)的开发环境。在微信小程序中,开发者可以利用CSS布局方式之一的Flex布局来实现...
### Flex应用程序开发:深入理解与实践 #### 一、Flex概览 Flex是Adobe Systems Incorporated推出的一款用于构建高质量的Rich Internet Applications(RIA)的开源框架。它基于Flash平台,允许开发者使用标准的Web...
弹性因子(flex-grow, flex-shrink, flex-basis)在微信小程序的Flex布局中,每个伸缩项目都可以通过flex属性来指定其弹性因子,它是一个简写属性,可以设置三个值:flex-grow, flex-shrink, 和 flex-basis。1. flex...
本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...
掌握flex布局可以在制作微信小程序时减少wxss的代码,同时也符合微信小程序开发的文档要求 本代码中涉及到四种Flex的布局方式,分别使用了不同的flex的不同属性。 建议看本文最后的学习参考进行相关属性的学习 骰子...
在本文中,我们将深入探讨如何使用Adobe Flex 4.5框架来开发针对Android操作系统的应用程序。Flex是一款强大的、基于ActionScript的开源开发工具,它允许开发者创建富互联网应用(RIA)以及跨平台的移动应用。Flex ...