使用雅虎的API便捷的创建天气预报程序

在这篇自学材料的帮助下，你将学会使用雅虎的天气API来获取和显示天气预报。

最终结果显示

让我们来先看下最终结果：


第一步：创建一个新文件

我猜想你会使用Flash IDE，尽管你也能用Flex或标准的AS3工程来实现这篇自学材料。
打开Flash，选择文件——>新建，选择Flash文件(ActionScript 3.0),然后设置场景大小为320*180px,并把这个FLA文件保存在任何你想保存的地方。



第二步：创建文档类
现在选择文件——>新建,选择创建ActionScript File，然后将该文件命名为Weather.as并将它保存在你刚才保存FLA文件的同一目录下。
接着回到你刚创建的FLA文件，打开属性面板，填写文档类的名字为你刚新建的ActionScript文件名(想知道更多关于文档类信息， 请阅读这个介绍 )



第三步：建立文档类
回到ActionScript File并开始编写文档类的代码。

1. package{
   
2. 
   
3. import flash.display.MovieClip;
   
4. 
   
5. //the name of the class has to be the same as the file类名必须与文件名相同
   
6. public class Weather extends MovieClip{
   
7. 
   
8. //Constructor: this function has to have the same name as the file and class构造函数：方法名必须与文件名和类名相同
   
9. public function Weather(){
   
10. 
    
11. trace("This is your weather class"):
    
12. 
    
13. }
    
14. }
    
15. }

复制代码

测试以上代码，它将会在输出面板显示"This is your weather class"。

第四步：检测雅虎的天气API
点击以下链接到 雅虎开发者网站的雅虎天气API部分 ；你会找到关于雅虎天气API的一些解释。



第五步：请求xml
在Flash中我们需要阅读的是一个XML文件，所以我们需要知道怎样请求xml,这个很简单的。你需要提供你想知道的天气的地址和温度的单位（摄氏温度还是华氏温度）作为URL的参数。
然后你可以通过这个URL请求到包含天气情况数据的xml。

1. var url:String = "http://weather.yahooapis.com/forecastrss" + "?w=" + (location number) + "&u=" + ("c" 摄氏温度或者 "f" 华氏温度);

复制代码

第六步：获取地址编号
地址编号必须是一个 WOEID ,你可以通过 雅虎的天气预报首页 查询你需要的地址编号。这个编号在
你想要的那个城市天气预报页的URL中。你也可以通过在首页中输入你的邮政编码查询WOEID。例如，你想查询洛杉矶的天气情况，这个城市的天气预报页的URL是
[url]http://weather.yahoo.com/united-states/california/los-angeles-2442047/ [/url]，所以它的WOEID是2442047.

第七步：理解xml
当你请求任何地方的天气情况时，你会接收到如下结构的xml:

1. <rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
   
2. <channel>
   
3. <title>Yahoo! Weather - Los Angeles, CA</title>
   
4. <link>http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html</link>
   
5. <description>Yahoo! Weather for Los Angeles, CA</description>
   
6. <language>en-us</language>
   
7. <lastBuildDate>Mon, 01 Mar 2010 5:47 am PST</lastBuildDate>
   
8. <ttl>60</ttl>
   
9. <yweather:location city="Los Angeles" region="CA" country="United States"/>
   
10. <yweather:units temperature="C" distance="km" pressure="mb" speed="km/h"/>
    
11. <yweather:wind chill="12" direction="0" speed="0" />
    
12. <yweather:atmosphere humidity="80"visibility="16.09"pressure="1018.4"rising="1" />
    
13. <yweather:astronomy sunrise="6:22 am" sunset="5:49 pm"/>
    
14. <image>
    
15. <title>Yahoo! Weather</title>
    
16. <width>142</width>
    
17. <height>18</height>
    
18. <link>http://weather.yahoo.com</link>
    
19. <url>http://l.yimg.com/a/i/us/nws/th/main_142b.gif</url>
    
20. </image>
    
21. <item>
    
22. <title>Conditions for Los Angeles, CA at 5:47 am PST</title>
    
23. <geo:lat>34.05</geo:lat>
    
24. <geo:long>-118.25</geo:long>
    
25. <link>http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html</link>
    
26. <pubDate>Mon, 01 Mar 2010 5:47 am PST</pubDate>
    
27. <yweather:conditiontext="Fair"code="33"temp="12"date="Mon, 01 Mar 2010 5:47 am PST" />
    
28. <description><![CDATA[>
    
29. <img src="http://activetuts.s3.amazonaws.com/tuts/093_weather/Tutorial/http://l.yimg.com/a/i/us/we/52/33.gif"/><br />
    
30. <b>Current Conditions:</b><br />
    
31. Fair, 12 C<BR />
    
32. <BR /><b>Forecast:</b><BR />
    
33. Mon - Mostly Cloudy. High: 20 Low: 10<br />
    
34. Tue - AM Clouds/PM Sun. High: 19 Low: 9<br />
    
35. <br />
    
36. <a href="http://us.rd.yahoo.com/dailynews/rss/weather/Los_Angeles__CA/*http://weather.yahoo.com/forecast/USCA0638_c.html">Full Forecast at Yahoo! Weather</a><BR/><BR/>
    
37. (provided by <a href="http://www.weather.com" >The Weather Channel</a>)<br/>
    
38. ]]></description>
    
39. <yweather:forecast day="Mon" date="1 Mar 2010" low="10" high="20" text="Mostly Cloudy" code="28" />
    
40. <yweather:forecast day="Tue" date="2 Mar 2010" low="9" high="19" text="AM Clouds/PM Sun" code="30" />
    
41. <guid isPermaLink="false">USCA0638_2010_03_01_5_47_PST</guid>
    
42. </item>
    
43. </channel>
    
44. </rss><!-- api7.weather.re4.yahoo.com compressed/chunked Mon Mar1 06:59:00 PST 2010 -->

复制代码

(如果你想了解更多关于这个xml的信息，你可以访问 http://developer.yahoo.com/weather/ ).
在这个程序中我们需要用的标签有yweather:location ，yweather:atmosphere，yweather:forecast ：
location可以给我们提供地名，atmosphere可以提供湿度信息，forecast可以提供今明两天的温度情况。

第八步：解析xml
现在你已经对这个xml有了更好的理解了，我们现在需要做的就是将这些数据指派给变量，然后用这些数据去创建我们的应用程序。
因此我们需要创建一些变量来加载XML。下面是代码（把这些代码放在你的文档类的相关地方）。

1. //This is going to contain all the data from the XML包含xml的所有数据
   
2. private var _xmlData:XML;
   
3. //This is going to be the url of the XML that we will loadxml加载地址
   
4. private var _xmlURL:String;
   
5. 
   
6. private function loadXML(xmlURL:String):void {
   
7. var loader:URLLoader = new URLLoader();
   
8. var request:URLRequest = new URLRequest(_xmlURL);
   
9. 
   
10. loader.load(request);
    
11. loader.addEventListener(Event.COMPLETE, loadData);
    
12. }
    
13. 
    
14. private function loadData(event:Event):void {
    
15. _xmlData = new XML(event.currentTarget.data);
    
16. 
    
17. var yweather:Namespace = new Namespace("http://xml.weather.yahoo.com/ns/rss/1.0");
    
18. var day:String = _xmlData.channel.item.yweather::forecast[0].@day;
    
19. var codeToday:String = _xmlData.channel.item.yweather::forecast[0].@code;
    
20. var codeTomorrow:String = _xmlData.channel.item.yweather::forecast[1].@code;
    
21. }

复制代码

你需要把_xmlData定义到所有方法外面（即定义成成员变量），因为你在代码的任何地方都用到它，不仅仅在一个方法中。

第一个方法loadXML(),加载xml文件到Flash中；我们使用事件监听来检查xml是否加载完成，在加载完成后运行 loadData()。

loadData()方法将接收到的xml数据保存在_xmlData变量中。我们使用namespace因为雅虎决定创建他们自己的XML（你可以在 livedocs.adobe.com 找到更多关于命名空间的信息）。
其他的变量用于在程序中显示信息。
(想知道更多关于AS3解析xml的信息，请看Dru Kepple的 AS3:101 – XML 自学材料。)

第九步：创建文本框
现在我们需要显示信息。完成这些你可以使用代码来创建文本框并可以设置文本的格式和文本内容。但是我更喜欢使用Flash IDE来节省时间。
我们需要八个文本框：温度，湿度，当天的最高温度和最低温度，第二天的最高温度和最低温度以及城市地址。这些文本框都必须设为动态文本。
不要忘了给所有这些文本框命实例名；我选择temp, humidity, max, min, maxt, mint, tomorrow and state。

第十三步：添加翻转效果
很好，我们已经完成了最艰难的部分，现在让我们让这个应用更加漂亮。如果你想添加更多信息或改变地理位置的话，我们需要更多的空间，
所以让我们把所有创建的转成movie clip,只要选定舞台上所有东西，按下F8(转换为元件)并且导出这个元件的ActionScript类为Front，
接着将它从舞台上移除，创建背景，并将它也转换为元件，导出类名为Back.

1. private var _front:Front;
   
2. private var _back:Back;
   
3. 
   
4. //all below code goes in Weather() constructor以下这些代码添加在Weather类的构造函数中
   
5. 
   
6. _front = new Front();
   
7. this.addChild(_front);
   
8. _front.y = 100;
   
9. _front.x = 160;
   
10. _font.rotationY = 0;
    
11. _front.btn.buttonMode = true;
    
12. _front.btn.addEventListener(MouseEvent.CLICK, turnAround);
    
13. _front.addChild(_weatherToday);
    
14. 
    
15. //this is going to be behind so we don't want it to be visible yet, and we need to set the rotation to -180
    
16. _back = new Back();
    
17. _back.y = 100;
    
18. _back.x = 160;
    
19. _back.back.buttonMode = true;
    
20. _back.back.addEventListener(MouseEvent.CLICK, turnAround);
    
21. _back.rotationY = -180;
    
22. _back.visible = false;
    
23. this.addChild(_back);

复制代码

第十四步：建立缓动
我们已经创建好元件了，现在需要让它转动起来。达到这个效果我们需要使用Tweener 库，你可以在
[url]http://code.google.com/p/tweener/ [/url]找到它。下载它，并且解压，将 \caurina\ 文件夹放到和FLA相同的目录下。

在这个工程中，我们只需要使用Tweener的一个方法：我们使用turnAround() 方法制造旋转效果很酷。
把以下代码放在你的文档类的合适位置。

1. import caurina.transitions.Tweener;
   
2. 
   
3. private var _currentFace:String;
   
4. 
   
5. //flip the faces and then calls the function that change the order of the faces and finish the animation
   
6. private function turnAround(event:MouseEvent):void {
   
7. Tweener.addTween(_back, { rotationY: -90, onComplete:changeIndex, time:0.5, transition:"linear" } );
   
8. Tweener.addTween(_back, { scaleY:0.6, scaleX:0.6,time:0.3, transition:"linear" } );
   
9. Tweener.addTween(_front, { scaleY:0.6, scaleX:0.6,time:0.3, transition:"linear" } );
   
10. Tweener.addTween(_front, { rotationY:90, time:0.5, transition:"linear" } );
    
11. }
    
12. 
    
13. //we use a String, _currentFace, so it can know which face is in front
    
14. private function changeIndex():void {
    
15. if (_currentFace == "front") {
    
16. this.setChildIndex(_front, 0);
    
17. Tweener.addTween(_back, { rotationY: 0, time:0.5, transition:"linear" } );
    
18. Tweener.addTween(_back, { scaleY:1, scaleX:1,time:0.6, transition:"linear" } );
    
19. Tweener.addTween(_front, { rotationY:180, time:0.5, transition:"linear" } );
    
20. Tweener.addTween(_front, { scaleY:1, scaleX:1,time:0.6, transition:"linear" } );
    
21. _currentFace = "back";
    
22. _front.visible = false;
    
23. _back.visible = true;
    
24. } else {
    
25. this.setChildIndex(_back, 0);
    
26. Tweener.addTween(_back, { rotationY: -180, time:0.5, transition:"linear" } );
    
27. Tweener.addTween(_back, { scaleY:1, scaleX:1,time:0.6, transition:"linear" } );
    
28. Tweener.addTween(_front, { rotationY:0, time:0.5, transition:"linear" } );
    
29. Tweener.addTween(_front, { scaleY:1, scaleX:1,time:0.6, transition:"linear" } );
    
30. _currentFace = "front";
    
31. _front.visible = true;
    
32. _back.visible = false;
    
33. }
    
34. }

复制代码

第十五步：添加选择城市位置

现在我们有了更多的空间来添加更多的州或者任何你想添加的城市。我会简单的添加更多城市。
我们所需要的是回到FLASH并且按下Ctrl+F7 (Windows系统下)或者Command+F7 (Mac系统下)
打开组件面板，拖拽一个Combo Box到你的库中，然后把它加到你的文档类中

1. import flash.xml.*;
   
2. 
   
3. _comboBox = new ComboBox();
   
4. 
   
5. //inside the constructor
   
6. //the default text
   
7. _comboBox.prompt = "Choose your location:";
   
8. //repeat this for each location that you want to add
   
9. //remember to get the location's URL from the Yahoo site
   
10. comboBox.addItem( { Location:"Mahtomedi", url: "http://weather.yahooapis.com/forecastrss?w=2444293&u=c"} );
    
11. //calls the function that give the value to the ComboBox
    
12. _comboBox.labelFunction = nameLabelFunction;
    
13. _comboBox.width = 150;
    
14. _comboBox.editable = false;
    
15. //calls the function that is going to change the data
    
16. _comboBox.addEventListener(Event.CHANGE, changeLocation);
    
17. 
    
18. private function nameLabelFunction(item:Object):String {
    
19. var str:String;
    
20. if (item == null) {
    
21. str = _comboBox.value;
    
22. } else {
    
23. str = item.Location ;
    
24. }
    
25. return str;
    
26. }
    
27. 
    
28. //reaload the data and reassign the data of your application
    
29. private function changeProvince(event:Event):void {
    
30. loadXML(_comboBox.selectedItem.url);
    
31. }

复制代码

第十六步：享受吧！
现在开始享受你的程序吧！不要忘记雅虎哦


总结

现在我们完成了我们的天气预报程序，我希望你们从中能学到许多知识，
如果你有任何问题,可以留言给我。

我希望你们喜欢这篇自学材料，感谢您的阅读