Developing Weather Application using Dojo Mobile

• Heading element.
• Combo Box of the available cities.
• The “Get Information” button.

 dojoType="dojox.mobile.Heading">Weather
	 dojoType="dojox.mobile.ToolBarButton" moveTo="about">About

 data-dojo-type="dijit.form.DataList" data-dojo-props="id:'locationList'" >
   selected>Cairo, Egypt
  Stockholm, Sweden
  Vienna, Austria
  Madrid, Spain
  Paris, France
  New York, USA
  Lima, Peru


 id="location" class="ninety" type="text" data-dojo-type="dojox.mobile.ComboBox" data-dojo-props="list:'locationList'" />

 class="mblBlueButton full" dojoType="dojox.mobile.Button" onClick="getWeatherInformation();">Get Information

function getWeatherInformation() {
	var selectedCode = cityMap[dijit.byId("location").value];

	dojo.xhrGet({
		url: "/mobileSamples/weatherProxyServlet?w=" + selectedCode,
		handleAs: "text",
		load: function(data) {
			document.getElementById("weatherResult").innerHTML = data;
		}
	});
}

 dojoType="dojox.mobile.RoundRect" shadow="true">
	 for="txtLocation">Select location 


	 data-dojo-type="dijit.form.DataList" data-dojo-props="id:'locationList'" >
	   selected>Cairo, Egypt
	  Stockholm, Sweden
	  Vienna, Austria
	  Madrid, Spain
	  Paris, France
	  New York, USA
	  Lima, Peru
	

	 id="location" class="ninety" type="text" data-dojo-type="dojox.mobile.ComboBox" data-dojo-props="list:'locationList'" />


	 class="mblBlueButton full" dojoType="dojox.mobile.Button" onClick="getWeatherInformation();">Get Information


	 id="weatherResult"/>

 id="about" dojoType="dojox.mobile.View">
	 dojoType="dojox.mobile.Heading" back="back" moveTo="weather">About
	 dojoType="dojox.mobile.RoundRect">This sample is developed by TechnicalAdvices.COM. It is powered by Dojo Mobile.

	 name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	 name="apple-mobile-web-app-capable" content="yes"/>
	 

	 rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet">
	 src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true">

	 type="text/javascript">
		var cityMap = {};

		require(["dojox/mobile/parser", "dojo/_base/xhr", "dojox/mobile", "dojox/mobile/deviceTheme",
		         "dojox/mobile/TextBox", "dojox/mobile/Button", "dojox/mobile/compat",
		         "dijit/form/DataList", "dojox/mobile/ComboBox",
		         "dojo/domReady!"], function(parser) {

					// initialize WOIDs ...
					cityMap["Cairo, Egypt"] = "1521894";
					cityMap["Stockholm, Sweden"] = "906057";
					cityMap["Vienna, Austria"] = "551801"
					cityMap["Madrid, Spain"] = "766273";
					cityMap["Paris, France"] = "615702";
					cityMap["New York, USA"] = "2459115";
					cityMap["Lima, Peru"] = "418440";

					parser.parse();
				});

		function getWeatherInformation() {
			var selectedCode = cityMap[dijit.byId("location").value];

			dojo.xhrGet({
			    url: "/mobileSamples/weatherProxyServlet?w=" + selectedCode,
			    handleAs: "text",
			    load: function(data) {
			    	document.getElementById("weatherResult").innerHTML = data;
			    }
			});
		}
	 

	



	 id="weather" dojoType="dojox.mobile.View" selected="true">
		 dojoType="dojox.mobile.Heading">Weather
			 dojoType="dojox.mobile.ToolBarButton" moveTo="about">About
		

		 dojoType="dojox.mobile.RoundRect" shadow="true">
			 for="txtLocation">Select location 


			 data-dojo-type="dijit.form.DataList" data-dojo-props="id:'locationList'" >
			   selected>Cairo, Egypt
			  Stockholm, Sweden
			  Vienna, Austria
			  Madrid, Spain
			  Paris, France
			  New York, USA
			  Lima, Peru
			

			 id="location" class="ninety" type="text" data-dojo-type="dojox.mobile.ComboBox" data-dojo-props="list:'locationList'" />


			 class="mblBlueButton full" dojoType="dojox.mobile.Button" onClick="getWeatherInformation();">Get Information


			 id="weatherResult"/>
		
	

	 id="about" dojoType="dojox.mobile.View">
		 dojoType="dojox.mobile.Heading" back="back" moveTo="weather">About
		 dojoType="dojox.mobile.RoundRect">This sample is developed by TechnicalAdvices.COM. It is powered by Dojo Mobile.
						

The Backend Java Servlet

package servlets;

import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.HttpURLConnection;
import java.net.ProtocolException;
import java.net.URL;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sun.syndication.feed.synd.SyndEntry;
import com.sun.syndication.feed.synd.SyndFeed;
import com.sun.syndication.io.SyndFeedInput;

/**
 * WeatherProxyServlet is a proxy servlet that wraps Yahoo weather REST service.
 * @author hazems
 *
 */
public class WeatherProxyServlet extends HttpServlet {
	private static final long serialVersionUID = 8732370454506907957L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		String WOEID = request.getParameter("w");
		HttpURLConnection connection = null;

		response.setContentType("text/html");

		PrintWriter writer = null;

		try {
			URL url = new URL("http://weather.yahooapis.com/forecastrss?u=c&w=" + WOEID);

			connection = createHTTPConnection(url);

			String output = getHTTPOutputResponse(connection);

			SyndFeedInput input = new SyndFeedInput();
			SyndFeed feed = input.build(new InputStreamReader(new ByteArrayInputStream(output.getBytes("UTF-8"))));  		

		    if (feed.getEntries() != null && feed.getEntries().size() > 0) {
	            SyndEntry entry = ((SyndEntry) feed.getEntries().get(0));

	            String title = entry.getTitle();
	            String description = entry.getDescription().getValue();

	            if (description.contains("Invalid")) {
	            	throw new Exception(description);
	            }

	    		writer = response.getWriter();
	            writer.print(title + "
" + description);
	        }
		} catch (Exception exception) {
			throw new ServletException(exception.getMessage());
		} finally {
			if (connection != null) {
				connection.disconnect();
			}

			if (writer != null) {
				writer.flush();
	        	writer.close();
			}
		}
	}

	private static HttpURLConnection createHTTPConnection(URL url) throws IOException, ProtocolException {
		HttpURLConnection conn = (HttpURLConnection) url.openConnection();

		conn.setDoOutput(true);
		conn.setDoInput(true);
		conn.setRequestMethod("GET");
		conn.setRequestProperty("Accept", "text/html");
		conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

		return conn;
	}

	private static String getHTTPOutputResponse(HttpURLConnection conn) throws IOException {
		BufferedReader br = new BufferedReader(new InputStreamReader((conn.getInputStream())));

		String httpOutputResponse = "";
		String outputLine;

		while ((outputLine = br.readLine()) != null) {
			httpOutputResponse += outputLine;
		}

		return httpOutputResponse;
	}
}

Conclusion