jQuery Mobile 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.
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
