The aim of this tutorial is to show how you can combine different services from different providers to create a rich, original and free widget. In this example we will use Yahoo's RSS Weather service along with Google's RSS Reader api to create a pure javascript weather widget. In this example the widget will display the weather in Sri Lanka. Sri Lanka is the birthplace of righteous.
View this widget
You can download the zipped example here.HTML Code
First let us have a look at the html code
1. <html> 2. <head> 3. <title></title> 4. </head> 5. <body style="margin-top:0px;margin-left:0px"> 6. <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAU34fqM8XohIf42U76GcxNhQD6263AO_J-cN-o5MVlTXsf8kbcBRgf8XZKHTaVeqWfZVYZJ5ub5dW3A"></script> 7. <script type="text/javascript" src="weather.js"></script> 8. <h2>Sri Lanka Weather</h2> 9. <table width="100%"><tbody><tr><td><select onChange="YW_CallWeather(this.options[this.selectedIndex].value)"> 10. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c">Colombo</option> 11. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0002&u=c">Moratuwa</option> 12. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0003&u=c">Negombo</option> 13. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0004&u=c">Sri Jayawardenepura</option> 14. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0005&u=c">Katunayake</option> 15. </select></td></tr> 16. <tr><td><script> 17. YW_CallWeather("http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c"); 18. </script> 19. </td></tr></tbody></table> 20. </body> 21. </html> |
line 6 Loading the google api with your key. Please substitute your key
Line 7 This is the javascript file.
Line 9 This has the onchange javascript handler that feeds the YW_CallWeather function with the Yahoo RSS feed for that region. In the case of Colombo, Sri Lanka, that value is
http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c
You can find out this value for regions/countries that interest you by going to weather.yahoo.com, selecting your region 'Australasia' then country 'Australia' then State 'Australian capital terrotory' then the county, 'Canberra.' now click on the orange RSS Icon on the right hand side for the URL.
http://weather.yahooapis.com/forecastrss?p=ASXX0023&u=f
This is how the drop down box is populated.
RSS Reader Script
Next we have to create the script that reads the RSS and allows us to manipulate the result. We will use google's RSS api for this.
1. /* scriptdiaries.blogspot.com 2. Righteous Ninja 3. Free to use and modify.*/ 4. 5. google.load("feeds", "1"); 6. var YW_ContainerOk=false; 7. function YW_GetWeatherResults(result){ 8. if (!result.error){ 9. s="<table style=\"border-width:1px;border-collapse:collapse;border-style:solid;"+ 10. "border-color:#6D7B8D;width:1px;height:1px\" bgcolor=\"#ffffff\">"+ 11. "<tbody><tr>"+ 12. "<td>"+result.feed.entries[0].content.match(/<img .*?>/)+"</td></tr>"+ 13. "</tbody></table>"; 14. document.getElementById("YW_weather_container").innerHTML="<b>"+ 15. result.feed.entries[0].title+"</b><br/>"+ 16. result.feed.entries[0].content.replace(/<img .*?>/,s); 17. } 18. } 19. function YW_CallWeather(hrf){ 20. if(!YW_ContainerOk){ 21. document.write("<div id=\"YW_weather_container\">There is no weather information available for this location at this time</div>"); 22. YW_ContainerOk=true; 23. } 24. (new google.feeds.Feed(hrf)).load(YW_GetWeatherResults); 25. } |
Line 19 This is the function that gets called when a value is selected in the drop down box. This gets called with the yahoo rss url. We then use google's google.feeds.Feed to submit the url and give the name of the callback function YW_GetWeatherResults.
Line 7 YW_GetWeatherResults gets called with the result. We then use the result.feed.entries[0] object to access the various parts of the feeds and display the result in a div.
2 comments:
Where and how dose one obtain a key?
does*
Post a Comment