一个Flex做的天气预报widget

弄了一个天气预报的widget,有些心得在里面,拿出来分享。

最终的效果:

 

使用的技术:

Flex ,asp.net,flash

关于天气数据:

本人是在气象局工作的,但对于气象局的公众服务其实相当不满,怎奈自己是个小兵,能做的只是积极献言献策,试图改变“上面”的思维。就拿数据服务来说,部门内部不论软硬件环境都很不错,至少把天气预报通过某种途径(WebService,mashup,rss等)提供借口是没有问题的。在做这个widget是才发现,根本没有直接的接口可寻,翻了翻一些大站的天气服务,总算找到一个提供Json数据的(也许人家根本不是主动提供的),就不透露是那个站了smile

 

一些技术细节:

跨域访问数据问题

既然天气数据来自某网站,自然存在跨域问题,服务器不在你手上,自然就不是crossdomain.xml能解决的了。这个问题参考了noahgenius 关于使用asp.net作数据代理的文章,简单说就是使用自己的服务器将数据获取到,然后提供给客户端。

 

Flash的中文编码问题

这个问题有两部分,一个是单纯的中文显示问题,这个有好些方法,在initialize方法中添加“"flash.system.System.useCodePage=true”较为简单。另一个是flash生成连接url的中文编码问题,可以在要传递的中文参数(城市名称)上使用encodeURI方法就可以了。当然.net中也会涉及这个问题。

 

Flex处理Json数据的问题

Json这么新潮的数据格式,Adobe不会不考虑,提供了专门的类文件(我会防到附件里)来处理,com.adobe.serialization.json这是他的名称空间。使用方法参考岩屋的文章《Flex用JSON处理返回的数据》。

.net的WebClient缓存问题

如果每次客户端访问,服务器代理都会访问天气数据网站并下载数据,那绝对是可悲的。气象预报工作我是有一定了解的,中国的天气预报一般在北京时间8时会发布一次,包括24小时预报、48小时预报、72小时预报,下午4时会视上个预报周期后这12小时的情况,发布一次更正预报。我说上面的意思是说,其实天气预报信息一天24小时之内只会发布两次,那么最佳解决方案当然是缓存天气预报数据。我们现在是基于.net实现的,就说说.net的WebClient的缓存处理,这个你可以参考官方文档关于WebClient.CachePolicy 属性的描述。其实就是把WebClient的缓存策略(RequestCachePolicy )设置成Revalidate。

MSDN 写道
Revalidate 如果时间戳与服务器上的资源的时间戳相同,则使用资源的缓存副本满足请求;否则从服务器下载资源,将资源展示给调用方然后存储在缓存中。

 

这样服务器还是会到目标服务器上看看的,但只是去查看该文档的最后修改时间,如果没有更新,就不会获取整个数据实体。如果用Jakarta Commons

的HTTPClient的话,也是一样的道理。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的HTML天气预报页面示例: ```html <!DOCTYPE html> <html> <head> <title>天气预报</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; background-color: #F5F5F5; } h1 { text-align: center; font-size: 36px; color: #333; margin-top: 50px; } .weather { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 50px; } .weather .day { width: 200px; height: 200px; background-color: #FFF; margin: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); overflow: hidden; } .weather .day h2 { text-align: center; font-size: 24px; color: #333; margin-top: 20px; } .weather .day img { display: block; margin: 0 auto; margin-top: 30px; width: 100px; height: 100px; } .weather .day p { text-align: center; font-size: 18px; color: #666; margin-top: 20px; } </style> </head> <body> <h1>天气预报</h1> <div class="weather"> <div class="day"> <h2>今天</h2> <img src="http://www.weather.com.cn/m/i/weatherpic/29x20/d/01.png"> <p>晴,温度:25℃</p> </div> <div class="day"> <h2>明天</h2> <img src="http://www.weather.com.cn/m/i/weatherpic/29x20/d/02.png"> <p>多云,温度:23℃</p> </div> <div class="day"> <h2>后天</h2> <img src="http://www.weather.com.cn/m/i/weatherpic/29x20/d/07.png"> <p>小雨,温度:20℃</p> </div> </div> </body> </html> ``` 此示例中,页面包含一个标题和一个天气预报部分。天气预报部分包含三个天气预报卡片,每个卡片包含日期、天气图标和温度信息。 你可以替换图片链接和文本内容,以显示你所在地区的天气情况。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值