Developing Weather Application using Dojo Mobile

Abstract

Dojo mobile (dojox/mobile) is one of the most powerful JavaScript frameworks that enable you to build cross mobiles web applications. It does not only contain mobile components but also it mimics the interface of the different mobile devices. Adding to this it responds to the mobile orientations. In this article, I will illustrate how to use the framework for building a weather application on the iPhone mobile.

Application Story

The application story is simple. In the weather mobile application, the user can get the current weather forecasting of a specific location. The user can do this by selecting one city from a list of available cities in the drop down and then click the “Get Information” button to get the weather information as shown in the screenshot below.

Building the weather application

In order to create the weather forecasting page, we need to know the main parts of the Dojo mobile page:

  • The Doc Type and META tags.
  • The mobile script and style includes.
  • The application pages.

The Doc Type and META Tags

The Doc type that is recommended to be used is the HTML5 doctype as shown below:

<!DOCTYPE html>

For the META tags, it is important to use the "viewport" META tag to setup cross-device layout as shown below:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

The other important META tag is an iPhone specific one which is the “apple-mobile-web-app-capable”. It is recommend to be set to “yes” to make the web application runs in full-screen mode as shown below:

<meta name="apple-mobile-web-app-capable" content="yes"/>

The script and style includes

Now, we come to the script and style includes. I’m using Dojo 1.7.1 for this application; in order to include the script and the style files; this can be done as shown below:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"></link>

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script>

I only included the iPhone CSS file, and the dojo.js file which is loaded asynchronously for including only the resources we need to keep the application optimized.

After including the script and the style, we need to use the require statements for including the Dojo modules. I use the new Asynchronous Modules (AMD) convention for making asynchronous loading of the modules as shown below:

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) {
			
		//...			
		parser.parse();
	});

The following modules are loaded:

  • The Dojo mobile parser "dojox/mobile/parser" for converting the HTML elements to Dojo mobile components.
  • The Dojo XHR module "dojo/_base/xhr" for allowing performing Ajax requests.
  • The Dojo mobile device theme "dojox/mobile/deviceTheme", for allowing detecting the mobile type and loading the proper theme correctly.
  • "dojox/mobile/TextBox", "dojox/mobile/Button", "dijit/form/DataList", "dojox/mobile/ComboBox", for loading the mentioned components.
  • The "dojox/mobile/compat" module is required for allowing having cross mobiles CSS3 animations.
  • "dojo/domReady!" module is a replacement for the old dojo.ready API. The exclamation mark is required to tell Dojo not to execute the callback until the DOM is ready.

Finally in the callback, I’m using only the first parameter which is the parser object. The parser.parse statement is called for allowing the Dojo mobile parser to convert the HTML elements to Dojo mobile components.

The Application Pages

In our weather application, we have mainly two pages; the weather forecasting page and the about page. In order to make the pages scroll to the left and the right while navigation, we need to use the Dojo mobile views. The Dojo mobile views are normal HTML elements with the dojo type "dojox.mobile.View". To define the two views, we can do this as shown below:

<div id="weather" dojoType="dojox.mobile.View" selected="true">
	...
</div>
			
<div id="about" dojoType="dojox.mobile.View">
	...
</div>		

The main view should be marked as selected by setting the selected attribute to "true".

In the weather forecasting page, there are three main elements:

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

In order to create the heading element, you can mark an HTML element h1 with the “dojox.mobile.Heading” dojo type as follows:

<h1 dojoType="dojox.mobile.Heading">Weather
	<div dojoType="dojox.mobile.ToolBarButton" moveTo="about">About</div>		
</h1>

I included a toolbar button for moving to the other view. The moveTo attribute can have the id of the view to switch to, in our case it is the about view id.

In order to create the combo box element, we need to use two tags, one for the data which is the dijit.form.DataList, and the other for the widget itself which is the dojox.mobile.ComboBox as follows:

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

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

The “location” combo box is referring to the “locationList” using the list attribute.

The “Get Information” button calls the getWeatherInformation function to get the weather information as follows:

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

The getWeatherInformation JavaScript function is calling a proxy Java Servlet that interacts with the Yahoo weather service API using dojo xhrGet.

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;
		}
	});
}

The location value is read from the “location” combo box and the code of the location is retrieved from a custom JavaScript Map that I created for mapping the WOEID (Where on earth identification) to the locations.

When the HTML response is returned from the server, it is displayed directly in the "weatherResult" span.

Finally in the weather forecasting view, I embed the combo box and the button in the "dojox.mobile.RoundRect" div as follows:

<div dojoType="dojox.mobile.RoundRect" shadow="true">
	<label for="txtLocation">Select location</label> <br/>
	
	<select data-dojo-type="dijit.form.DataList" data-dojo-props="id:'locationList'" >
	  <option selected>Cairo, Egypt</option>
	  <option>Stockholm, Sweden</option>	
	  <option>Vienna, Austria</option>
	  <option>Madrid, Spain</option>	
	  <option>Paris, France</option>
	  <option>New York, USA</option>
	  <option>Lima, Peru</option>
	</select>
	
	<input id="location" class="ninety" type="text" data-dojo-type="dojox.mobile.ComboBox" data-dojo-props="list:'locationList'" /><br/><br/>
	
	<button class="mblBlueButton full" dojoType="dojox.mobile.Button" onClick="getWeatherInformation();">Get Information</button><br/><br/>
	
	<span id="weatherResult"/>
</div>

The other “about” view element is a simple one that contains description for the sample as follows:

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

It contains a heading that includes a back button using the back attribute. The back attribute should be set to id of the view element that the application navigates to when the back button is clicked.

The next code listing shows the complete code of the weather forecasting page:

<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Welcome to the weather application</title> 
	
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"></link>
	<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script>
	
	<script 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;
			    }
			});
		}
	</script> 
	
	<style>
		.full {
			width:100%
		}
		
		.ninety {
			width:90%
		}		
	</style>
</head>

<body>
	<div id="weather" dojoType="dojox.mobile.View" selected="true">
		<h1 dojoType="dojox.mobile.Heading">Weather
			<div dojoType="dojox.mobile.ToolBarButton" moveTo="about">About</div>		
		</h1>
		
		<div dojoType="dojox.mobile.RoundRect" shadow="true">
			<label for="txtLocation">Select location</label> <br/>
			
			<select data-dojo-type="dijit.form.DataList" data-dojo-props="id:'locationList'" >
			  <option selected>Cairo, Egypt</option>
			  <option>Stockholm, Sweden</option>	
			  <option>Vienna, Austria</option>
			  <option>Madrid, Spain</option>	
			  <option>Paris, France</option>
			  <option>New York, USA</option>
			  <option>Lima, Peru</option>
			</select>
			
			<input id="location" class="ninety" type="text" data-dojo-type="dojox.mobile.ComboBox" data-dojo-props="list:'locationList'" /><br/><br/>
			
			<button class="mblBlueButton full" dojoType="dojox.mobile.Button" onClick="getWeatherInformation();">Get Information</button><br/><br/>
			
			<span id="weatherResult"/>
		</div>
	</div>
				
	<div id="about" dojoType="dojox.mobile.View">
		<h1 dojoType="dojox.mobile.Heading" back="back" moveTo="weather">About</h1>
		<div dojoType="dojox.mobile.RoundRect">This sample is developed by TechnicalAdvices.COM. It is powered by Dojo Mobile.</div>
	</div>					

</body>
</html>

The Backend Java Servlet

Finally, the backend Java Servlet reads the WOEID parameter and opens a URL connection to the yahoo API weather forecasting URL for getting the weather forecasting of the location as shown in the code listing below.

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;

/**
 * <code>WeatherProxyServlet</code> 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 + "<br/>" + 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;
	}
}

You can try the application from your iPhone by going to the following URL:
http://www.mashups4jsf.com/mobileSamples/weather.jsp

You can download the complete Eclipse project from the following URL:
https://www.ibm.com/developerworks/mydeveloperworks/blogs/hazem/resource/29052012/mobileSamples.zip

Conclusion

In this article, you learned how to build a mobile application using the Dojo mobile APIs. You know how to use the framework views, headings, and components for building the weather forecasting application.

“Efficient JavaScript unit testing” video session in CONFESS 2012

This video provides a presentation about how to make efficient JavaScript unit testing. I presented it in the CON-FESS 2012 international conference which was held in Leogang, Austria. I wish it can be useful.

See the presentation with the slides on Parleys.com

See the presentation with the slides on Parleys.com

and I included below the presentation:

Fix of reason code “7” SQLCODE=-668 SQLSTATE=57016

In DB2, you may face this error. This error means that the access to the table is restricted. Do not be worry if you see this error because it may happen after the ALTER TABLE DROP COLUMN statement.

In order to fix this error, you need to run the REORG command as follows:

REORG TABLE [YOUR_TABLE_NAME]

After running this command, you will be able to access the table.

For more information about the DB2 REORG command check:
http://publib.boulder.ibm.com/infocenter/db2e/v9r1/index.jsp?topic=%2Fcom.ibm.db2e.doc%2Fsqlreorgt.html

DB2 calling REORG command from JDBC

Sometimes, you need to run the DB2 REORG command from the JDBC code. You will need to run the REORG command usually after executing the ALTER TABLE DROP COLUMN statement. In order to execute the REORG command from JDBC, you can do this as follows:

Call Sysproc.admin_cmd ('reorg Table [YOUR_TABLE_NAME]');

I hope that this tip can be useful to you.

“Efficient JavaScript unit testing” presentation in CONFESS 2012

I just got back from the International technical conference CONFESS 2012 which was held in Leogang, Austria. The conference was very cool, the hotel and the city were fantastic, the quality of the sessions and the speakers were great.

Now, I got finally some free time to share with you my presentation about my efficient JavaScript unit testing. I hope it will be useful for you. Once I get the video session, I will definitely share it with you as well.

Have a nice time.

JsTestDriver integration with Hudson

Abstract

JsTestDriver is one of the most efficient JavaScript unit testing tools. Integrating JsTestDriver with continuous integration tools is a mandatory step for ensuring the web application quality. In this article, I will illustrate how this sort of integration can be done between JsTestDriver and Hudson.

Installing Hudson

To install Hudson on your machine, you need to download it from http://hudson-ci.org/.

Run the following command to start Hudson:

java -jar hudson-2.2.0.war

You can start launching Hudson by typing the following address in your browser:

http://localhost:8080/

You should now be redirected to the Hudson home page.

Creating Hudson Job

First of all, you need to create a new Job in Hudson. You can do this by clicking on “New Job” and entering the Job name and selecting “Build a free-style software project” as shown in the figure below:

Configuring JsTestDriver with Hudson

Click the “Configure” link of the project. In the configuration page, enter the project description. In order to run the job periodically, you need to configure the “Build Triggers”. Check the “Build periodically” option and enter the cron-like expression. To run the job every 5 mins past the hour (for example), enter the following expression 5 * * * * as shown below in the figure:

In order to execute the JsTestDriver test command, you need to configure the “Build” section. There are many ways to do so, you can either add “Execute Shell”, “Invoke Ant or Maven2 or Maven3”, or “Execute Windows Batch command”. The latter case can be used when you are working on Windows environment. For the case of this example, I use the “Execute Windows Batch command” option and specify the path of the batch file as shown in the screenshot below:

The batch file has the following content:

java -jar JsTestDriver-1.3.4.b.jar 
      --config jsTestDriver.conf 
      --tests all 
      --testOutput c:/outputFolder 
      --reset

For the matter of simplicity, I assume that the JsTestDriver server is already started and some browsers are already captured. This step is not included in this post, however, This step also can be automated if required.

Testing the integration of JsTestDriver with Hudson

In order to test the integration of JsTestDriver with Hudson, this can be done by manually or automatically (as indicated in the “Build periodically” option). To test the integration manually, click on the “Build Now” link as shown in the screenshot below:

Click the “console output” link to check the output of the results:

setting runnermode QUIET
Firefox: Reset
...
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (3.00 ms)
  Firefox 12.0 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (3.00 ms)

Notices

You may face this error while trying to run a new Job:

hudson java.io.IOException: Cannot run program "sh"

In order to fix this error, check this post:
http://www.technicaladvices.com/2012/05/04/hudson-java-io-ioexception-cannot-run-program-sh-resolution/.

More Information about JsTestDriver

Efficient JavaScript unit testing

Generating Test Reports using JsTestDriver

Running Jasmine on the top of the JsTestDriver test runner

Hudson java.io.IOException: Cannot run program “sh” resolution

You may face this error while working with Hudson and trying to run a new Job:

hudson java.io.IOException: Cannot run program "sh"

This error happens because Hudson is not aware about the shell path. In order to solve this issue, select:
Manage Hudson -> Configure System -> Shell and set the shell path in the Shell executable field as shown in the screenshot below:
.

This is all about this error.

Converting the JsTestDriver coverage files to HTML Reports

In this post, I will show you the detailed steps that are required to convert the JsTestDriver LCOV coverage files to HTML reports. Before reading this post, I recommend you to read this post first “Generating Test Reports using JsTestDriver“.

First of all, you need to download the LCOV visualizer from: http://ltp.sourceforge.net/coverage/lcov.php.

Then install the downloaded rpm file in your Linux Redhat environment using the following command line:

rpm -i lcov-1.9-1.noarch.rpm

To check that the tool is installed correctly, run the genhtml command, you should see the following output:

After that you can start running the HTML report generation command:

genhtml jsTestDriver.conf-coverage.dat

Note that you have to make sure that the paths of the JavaScript source files are correct in the jsTestDriver.conf-coverage.dat file, otherwise you will face the genhtml: ERROR: cannot create directory !

You should see the LCOV visualizer tool is generating the testing report as indicated in the screenshot below:

After the successful generation of the HTML report, click the index.html file in the parent folder to see the HTML report:

As shown in the previous screenshot, the report covers the three main code coverage criteria:
1. Line coverage (statement coverage) which represents the percentage of the source code statements that are tested.
2. Function coverage which represents the percentage of the functions that are tested.
3. Branch coverage which represents the percentage of code branches that are tested.

I attached here the test report files for your reference.