Setting Up for the Framework Comparison

Before we get started on the challenge, let’s simplify some of the Moundz source code so we don’t have to go through the Twitter authentication step or location detection (which can be pretty frustrating in the emulator).

To do this, we will need to make some modifications to the Moundz source files. Comment out (or remove) the splash screen div element in the index.html file:

<!DOCTYPE html> <html> <head> ... </head> <body onload="initialize()"> <!--

<div id="splash"> <strong>Welcome to</strong>

CHAPTER 11: Mobile UI Frameworks Compared

Press the 'Sign in with Twitter' button below to get started playing. </p> <span id="login"></span>

</div>

--> <div id="app">

... </div> </body> </html>

Next, we need to make some modifications to the moundz.js file that will make the process of testing the various mobile frameworks less painful.

Firstly, locate the run function and provide an ability to specify a mock location. This comes in the form of a second, optional parameter that we can pass to the run function. When the second parameter is supplied, location detection will be bypassed and that location will be used instead.

function run(zoomLevel, mockPosition) { // check that the watch hasn't already been set up // if it has, then exit, as we don't want two watches... if (posWatchId !== 0) {

return; } // if

// if mock position, then use that instead if (mockPosition) {

gotoPosition(mockPosition, zoomLevel ? zoomLevel : 15); findResources(function() {

module.updateDisplay();

}); } else {

// create the watch (original non-mock code) posWatchId = navigator.geolocation.watchPosition(

function(position) { var pos = new google.maps.LatLng( position.coords.latitude, position.coords.longitude);

if (map) { map.panTo(pos); } else {

gotoPosition(pos, zoomLevel ? zoomLevel : 15); } // if..else

findResources(function() { module.updateDisplay(); }); }, null, {

enableHighAccuracy: true

CHAPTER 11: Mobile UI Frameworks Compared

}); } // if..else } // run

Next, modify the MOUNDZ.init function and comment out the authenticated event handler. Additionally, place a call to the run function in the main body of the init function so the application initializes properly.

MOUNDZ = (function() { ...

var module = { ...

init: function(zoomLevel) { // initialize the geominer bridge geominer = new GEOMINER.Bridge({

app: 'moundz', login: '#login'

/* $(geominer).bind('authenticated', function(evt) {

$('#splash').hide(); $('#app').show();

run(zoomLevel); }); */

// initialize the screen initScreen();

// run the application run(zoomLevel, new google.maps.LatLng(-33.86, 151.21));

return module; })();

All right, we’re almost there. Finally, make one simple change to the moundz.css file to have the #app div display on application start by default.

/* application window styles */

#app { height: 100%; width: 100%;

/* display: none; */

} While we may need to modify this CSS later when integrating the various frameworks, it

would be nice to know that the code for our starting point works correctly. If everything is going to plan, your Moundz application should start up and resemble Figure 11–1.

CHAPTER 11: Mobile UI Frameworks Compared

Figure 11–1. The baseline Moundz app, ready for UI framework testing We now have Moundz at a suitable baseline ready for our framework comparison. Now

make copies of the modified source into four directories—one for each of the frameworks that we are going to compare. Figure 11–2 shows an example structure.

Figure 11–2 . The folder structure for the UI framework comparison—one base directory and one directory for each of the frameworks

CHAPTER 11: Mobile UI Frameworks Compared

This structure will serve you well if you wish to make comparisons against the frameworks. The completed code for each of the frameworks is available from the following URL: https://github.com/sidelab/prowebapps- code/tree/master/frameworks/challenge.

NOTE: If you would prefer to have a quick look at any one of the frameworks rather than work through each separately, then accessing the code from the GitHub repository can be very useful. Additionally, it might give you a feel for which of the frameworks you have a preference for, and you can then have a look at that particular framework in more depth.

Setting Up for the Framework Comparison