Results 1 to 1 of 1
  1.    #1  
    Here I am again at it! Not being satisfied with my first attempt at "development", with the silly "Beach" micro app, I've just sweated out the second.



    Gooweather is, you guessed it, yet another weather app that gets data from Google. It's extremely small, and thus limited, but perhaps serves as an example for someone else: It contains techniques to download data with XMLhttpRequest(), dynamically creates HTML elements, and fills them matching the ids of its elements with the tagnames of the requested information elements.

    Again, it's the smallest possible application, consisting in a single HTML document. It starts up so fast it's hard to believe! It doesn't even use the Mojo framework, and thus it should work on any computer with a comparable internet browser.

    Currently, it's localized in spanish, and defaults to my beautiful hometown. I guess I'd need to add Mojo to solve those...

    Where can I easily get the country string? Like those "us_en" that I can send to Google's weather API. Going further, I guess I could read where I am in the location service, but that's well over my abilities right now!

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<title>Gooweather</title>
    	</head>
    	<body>
    		<div id="forecast_information" style="font-size:larger">
    			<input id="city" value="Pinto, Madrid"/><input onclick="search();" type="button" style="height:expression(city.offsetHeight)" value="Buscar"/>
    			<div id="current_date_time"></div>
    		</div>
    		<div id="current_conditions" style="display:none">
    			<img align="right" id="icon" style="height:80px"/>
    			<div id="condition"></div>
    			<span id="temp_c"></span>&nbsp;&deg;C
    			<div id="humidity"></div>
    			<div id="wind_condition"></div>
    			<br clear="all">
    		</div>
    		<div id="forecast_conditions" style="display:none;font-size:smaller"">
    			<hr/>
    			<img align="right" id="icon"/>
    			<div id="day_of_week"></div>
    			<div id="condition"></div>
    			<span id="low"></span>&nbsp;-&nbsp;<span id="high"></span>&nbsp;&deg;C
    		</div>
    	</body>
    </html>
    <script>
    	var request;
    
    	if (window.PalmSystem) window.PalmSystem.stageReady();
    
    	for(var i = 0; i < 3; i++) document.body.appendChild(forecast_conditions.length == undefined ? forecast_conditions.cloneNode(true) : forecast_conditions(0).cloneNode(true));
    
    	search();
    
    	function search() {
    		if(city.value != "") {
    			request = new window.XMLHttpRequest;
    			if(request != null) {
    				request.baseURL = "http://www.google.com";
    				request.open("GET", request.baseURL+"/ig/api?weather="+escape(city.value)+"&hl=es", true);
    				request.onreadystatechange = request_onreadystatechange;
    				request.send();
    			}
    		}
    	}
    
    	function request_onreadystatechange() {
    		if(request.readyState == 4) {
    			if(request.status == 200) {
    				var weather = request.responseXML.firstChild.firstChild;
    				if(weather.firstChild.tagName=="forecast_information") {
    					show(forecast_information, weather.childNodes[0]);
    					show(current_conditions, weather.childNodes[1]);
    					var forecasts = weather.getElementsByTagName("forecast_conditions");
    					for(var i=0; i < forecasts.length; i++) if(forecast_conditions(i) != undefined) show(forecast_conditions[i], forecasts[i]);
    				} else {
    					alert(weather.firstChild.textContent);
    				}
    			}
    		}
    	}
    
    	function show(target,source) {
    		var nodes;
    		with(target.childNodes) {
    			for(var i=0; i < length; i++) {
    				if(item(i).id != undefined && item(i).id != "") {
    					nodes=source.getElementsByTagName(item(i).id);
    					if(nodes.length != 0) {
    						switch(item(i).tagName) {
    						case "IMG":
    							item(i).src = request.baseURL+"/"+nodes[0].attributes[0].value;
    							break;
    						case "INPUT":
    							item(i).value = nodes[0].attributes[0].value;
    							break;
    						default:
    							item(i).innerText = nodes[0].attributes[0].value;
    							break;
    						}
    					}
    				}
    			}
    		}
    		target.style.display="inline";
    	}
    </script>
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by jcmarcos; 04/13/2011 at 10:38 AM.

Posting Permissions