jQuery Mobile Calculator

Click here for a PhoneGap Calculator

WORKING DEMO

Here is an easy to get your head around jQuery Mobile (JQM) project, a simple calculator. I like this project because it helps to break want-to-be web app program out of the web site mentality. The entire app consist of a single page and about 200 lines of code. Let's begin our explanation with the Kernel which is near the beginning of the file app.js.

The Kernel

The Kernel's function is to tie HTML and JavaScript files together. We map all of JQM's page events to the Kernel. First we assign the event name to the variable eventType. Then we pull the page's JavaScript file name from the psuedo-attribute, "data-rockncoder-jspage" and assign it to the variable pageName. The final lines of the Kernel call the event's handler in its page code, only if the handler exists. The long if statement simply makes sure that there is a handler before it is called. Rockncoder.App follows the Kernel. Its only function is to hook all of the page events and direct them to the Kernel.

The Page Code

Next comes the page's code in RocknCoder.Pages.calculator. We use an object literal to hold all of the pages code. At some point in the future I will be changing this code to use a function not an object literal, but I have been doing for so long like this the habit is hard to break. A better implementation would be to do something like a "Revealing Module Pattern", which would also give us the ability to hide our local variables.

In the page's code we handle three events: pageinit, pageshow, and pagehide. Any event which is not  defined is not called by the Kernel. The first event handler, pageinit, is the JQM's equivalent to jQuery's document ready event. This is the place to do any page level initialization code. Here we initialize our Android address bar hider. The second event, pageshow, is called after JQM  has rendered the page. In this handler we initialize the calculator, the poorly named RocknCoder.Display and hook all of the calculator's keys. The final event is pagehide, which we use to unhook the events. Truth be told, this event will probably never be called since  there is only one page and JQM will have no page to switch to  and therefore no need to hide the current page.

The Calculator 

The meat of the calculator is in RocknCoder.Display. I am not going to explain its function other than to say it is a very simple calculator. We could have created a more robust calculator by using the Command Pattern. Then we could have been able to have features like undo and a much cleaner separation of concerns.  But then it would not have been so light in code. 

Summary

Although this is a very simple project, it has the ability to grow. By following the example of RocknCoder.Pages.calculator, you can add other pages, just remember to add HTML markup along with JavaScript. For each use of the psuedo-attribute "data-rockncoder-jspages='xxx'" be sure to create a match JavaScript literal with the name "RocknCoder.Pages.xxx.

Next week I will turn the calculator into a PhoneGap project and show how to get it to run on iPhone, Android, and Windows Phone 7.

Complete Source Code

	var RocknCoder = RocknCoder || {};
	RocknCoder.Pages = RocknCoder.Pages || {};
	// handles all of the page events and dispatches them to a handler, if one exists
	RocknCoder.Pages.Kernel = function (event) {
	var that = this,
	eventType = event.type,
	pageName = $(this).attr("data-rockncoder-jspage");
	// if you want to see jQuery Mobile's page event lifecycle, uncomment the line below
	//console.log("Kernel: "+pageName+", "+eventType);
	if (RocknCoder && RocknCoder.Pages && pageName && RocknCoder.Pages[pageName] && RocknCoder.Pages[pageName][eventType]) {
	RocknCoder.Pages[pageName][eventType].call(that);
	}
	};
	// hooks all of the page events
	// uses "live" so that the event will stay hooked even if new elements are added later
	RocknCoder.App = function () {
	$("div[data-rockncoder-jspage]").live("pagebeforecreate", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pagecreate", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pagebeforeload", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pagebeforeshow", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pageshow", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pagebeforechange", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pagechange", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pagebeforehide", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pagehide", RocknCoder.Pages.Kernel);
	$("div[data-rockncoder-jspage]").live("pageinit", RocknCoder.Pages.Kernel);
	}();
	// this is the handler for all page events
	RocknCoder.Pages.calculator = {
	pageinit: function () {
	RocknCoder.HideAddressBar();
	},
	pageshow: function () {
	RocknCoder.Display.init($("#displayControl")[0]);
	$("button").tap(function(event){
	var key = ($(this).attr("data-rockncoder-tag"))+"",
	id = event.target.id;
	switch(id){
	case "key0":
	case "key1":
	case "key2":
	case "key3":
	case "key4":
	case "key5":
	case "key6":
	case "key7":
	case "key8":
	case "key9":
	case "keyDecimalPoint":
	RocknCoder.Display.enterDigit(key);
	break;
	case "keyC":
	RocknCoder.Display.clearDisplay();
	break;
	case "keyCe":
	RocknCoder.Display.clearError();
	break;
	case "keyAdd":
	RocknCoder.Display.setOperator("+");
	break;
	case "keySubtract":
	RocknCoder.Display.setOperator("-");
	break;
	case "keyMultiply":
	RocknCoder.Display.setOperator("*");
	break;
	case "keyDivide":
	RocknCoder.Display.setOperator("/");
	break;
	case "keyEquals":
	RocknCoder.Display.setOperator("=");
	break;
	}
	});
	},
	pagehide: function () {
	$("button").unbind("tap");
	}
	};
	// Display in this case refers to the input type="text" above the buttons
	RocknCoder.Display = function() {
	var $displayControl,
	operator,
	operatorSet = false,
	equalsPressed = false,
	accumulator = null,
	add = function(x, y) {
	return x + y;
	},
	divide = function(x, y) {
	if (y == 0) {
	alert("Can't divide by 0");
	return 0;
	}
	return x / y;
	},
	multiply = function(x, y) {
	return x * y;
	},
	subtract = function(x, y) {
	return x - y;
	},
	calculate = function() {
	if (!operator || accumulator == null) return;
	var currNumber = parseFloat($displayControl.value),
	newVal = 0;
	switch (operator) {
	case "+":
	newVal = add(accumulator, currNumber);
	break;
	case "-":
	newVal = subtract(accumulator, currNumber);
	break;
	case "*":
	newVal = multiply(accumulator, currNumber);
	break;
	case "/":
	newVal = divide(accumulator, currNumber);
	break;
	}
	setValue(newVal);
	accumulator = newVal;
	},
	setValue = function(val) {
	$displayControl.value = val;
	},
	getValue = function(){
	return $displayControl.value + "";
	},
	// clears all of the digits
	clearDisplay = function() {
	accumulator = null;
	equalsPressed = operatorSet = false;
	setValue("0");
	},
	// removes the last digit entered in the display
	clearError = function(){
	var display = getValue();
	// if the string is valid, remove the right most character from it
	// remember: to be valid, must have a value and length
	if(display){
	display = display.slice(0, display.length - 1);
	display = display? display: "0";
	setValue(display);
	}
	},
	// handles a numeric or decimal point key being entered
	enterDigit = function(button) {
	if (operatorSet == true || $displayControl.value === "0") {
	setValue("");
	operatorSet = false;
	}
	setValue($displayControl.value + button);
	},
	setOperator = function(newOperator) {
	if (newOperator === "=") {
	equalsPressed = true;
	calculate();
	return;
	}
	if (!equalsPressed) calculate();
	equalsPressed = false;
	operator = newOperator;
	operatorSet = true;
	accumulator = parseFloat($displayControl.value);
	},
	// set the pointer to the HTML element which displays the text
	init = function(currNumber) {
	$displayControl = currNumber;
	};
	// all of the functions below are visible outside of this function
	return {
	clearDisplay: clearDisplay,
	clearError: clearError,
	enterDigit: enterDigit,
	setOperator: setOperator,
	init: init
	};
	}();

view raw app.js hosted with ❤ by GitHub

	<!DOCTYPE html>
	<html>
	<head>
	<title>JQM Calculator</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<!-- All of the themed CSS was removed for clarity's sake -->
	<link href="content/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" />
	<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script src="scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="calculator" data-role="page" data-theme="a" data-rockncoder-jspage="calculator">
	<header data-role="header">
	<h1>JQM Calculator</h1>
	</header>
	<section data-role="content" >
	<input type="text" id="displayControl" style="text-align: right;" value="0" />
	<!-- Added two buttons, one for clear all, the other for clear error -->
	<div class="ui-grid-a">
	<div class="ui-block-a"><button data-theme="b" id="keyC" data-rockncoder-tag="C">C</button></div>
	<div class="ui-block-b"><button data-theme="b" id="keyCe" data-rockncoder-tag="CE" >CE</button></div>
	</div>
	<div class="ui-grid-c">
	<div class="ui-block-a"><button data-theme="b" id="key7" data-rockncoder-tag="7">7</button></div>
	<div class="ui-block-b"><button data-theme="b" id="key8" data-rockncoder-tag="8" >8</button></div>
	<div class="ui-block-c"><button data-theme="b" id="key9" data-rockncoder-tag="9" >9</button></div>
	<div class="ui-block-d"><button data-theme="e" id="keyDivide" >/</button></div>
	<div class="ui-block-a"><button data-theme="b" id="key4" data-rockncoder-tag="4" >4</button></div>
	<div class="ui-block-b"><button data-theme="b" id="key5" data-rockncoder-tag="5" >5</button></div>
	<div class="ui-block-c"><button data-theme="b" id="key6" data-rockncoder-tag="6" >6</button></div>
	<div class="ui-block-d"><button data-theme="e" id="keyMultiply" >*</button></div>
	<div class="ui-block-a"><button data-theme="b" id="key1" data-rockncoder-tag="1" >1</button></div>
	<div class="ui-block-b"><button data-theme="b" id="key2" data-rockncoder-tag="2" >2</button></div>
	<div class="ui-block-c"><button data-theme="b" id="key3" data-rockncoder-tag="3" >3</button></div>
	<div class="ui-block-d"><button data-theme="e" id="keySubtract" >-</button></div>
	<div class="ui-block-a"><button data-theme="e" id="keyDecimalPoint" data-rockncoder-tag=".">.</button></div>
	<div class="ui-block-b"><button data-theme="b" id="key0" data-rockncoder-tag="0" >0</button></div>
	<div class="ui-block-c"><button data-theme="e" id="keyEquals" >=</button></div>
	<div class="ui-block-d"><button data-theme="e" id="keyAdd" >+</button></div>
	</div>
	</section>
	<footer data-role="footer" data-position="fixed">
	<h1></h1>
	</footer>
	</div>
	<script src="scripts/hideAddressBar.js" type="text/javascript"></script>
	<script src="scripts/app.js" type="text/javascript"></script>
	</body>
	</html>

view raw index.htm hosted with ❤ by GitHub

	var RocknCoder = RocknCoder || {};
	RocknCoder.HideAddressBar = function () {
	var hideUrlBar = function () {
	if (!pageYOffset) {
	window.scrollTo(0, 1);
	}
	};
	if (navigator.userAgent.match(/Android/i)) {
	window.scrollTo(0, 0); // reset in case prev not scrolled
	var docHeight = $(document).height();
	var winHeight = window.outerHeight;
	if (winHeight > docHeight) {
	winHeight = winHeight / window.devicePixelRatio;
	$('BODY').css('height', winHeight + 'px');
	}
	window.scrollTo(0, 1);
	} else {
	addEventListener("load orientationchange", function () {
	setTimeout(hideUrlBar, 0);
	setTimeout(hideUrlBar, 500);
	}, false);
	}
	};

view raw hideAddressBar.js hosted with ❤ by GitHub