Applying Some jQTouch-Ups to Moundz

Now that we have jQTouch available to us in the Moundz application, let’s go about making the changes to have it display effectively. First, let’s start with the changes required in the HTML. Here we will change the code for the layout of the HTML body to the following:

<div id="mapper"> <div class="toolbar"> <h1>Moundz</h1> </div> <div id="map_canvas" style="width:100%; height: 100%;"></div> <div id="marker-nav">

</div> </div> <div id="marker-detail">

<div class="toolbar"> <a href="#mapper" class="back">Back</a> <h1>Test Location</h1>

</div> <div class='content'> </div>

</div> </div> </body>

In the preceding code, we make some relatively major changes to the HTML to structure things appropriately for jQTouch. jQTouch requires that a top-level #jqt div element be the container for the jQTouch components of your application. CSS rules are crafted around this principle, and without it your application won’t display as it should. This is one of the primary differences between the older release that is available on the jQTouch web site and the new version—the older version does not have the #jqt container requirement, and, while it makes things simpler, it also makes it more difficult to include non-jQTouch parts of your application.

CHAPTER 11: Mobile UI Frameworks Compared

In our case, we made the following changes:

1. We replaced our top-level #app div with a top-level #jqt div.

2. We created “page” divs within the #jqt div to house our application pages. We have one for the map ( #mapper) and one for the detail display (#marker-detail). This is somewhat similar to the layout we had prior to adding jQTouch.

3. Next, we added div elements with the class of toolbar to the pages that we want

a toolbar for (which is all of them). In the case of the #marker-detail page, we also added a Back button, as, when the detail view is displayed, we want to be able to return to the main map view.

4. We moved our #marker-nav bar to within the #mapper div so that we can navigate around our markers.

If you have applied the changes successfully, your jQTouch version of Moundz will simply display an empty page (due to CSS rules). We now need to activate jQTouch within the moundz.js file to get things displaying correctly. We will do this by modifying the initScreen function inside moundz.js.

function initScreen() { jQT = new $.jQTouch();

$('#map_canvas').height( $('#mapper').height() - $('#mapper .toolbar').outerHeight() - $('#marker-nav').outerHeight()

); } // initScreen

In addition to activating jQTouch, we set the height of the map canvas to fill the available space in the #mapper div. Once this is done, you should see a screen similar to the one displayed in Figure 11–9.

CHAPTER 11: Mobile UI Frameworks Compared

Figure 11–9. Once both the HTML and JavaScript changes have been completed, things start to come together. With those modifications made, all of the basic elements are there. However, we have a

rather unappealing marker navigation bar displayed. Let’s make some modifications to the moundz.css file to improve the look and feel of the marker navigation bar. Locate the rule for the #marker-nav element and strip it back to a very basic look and feel:

#marker-nav { /* set general color and style */ color: white; font-weight: bold; text-align: center; padding: 10px;

} With that simple modification, we should have a more appealing display. Figure 11–10

shows an example of what you should expect to see.

CHAPTER 11: Mobile UI Frameworks Compared

Figure 11–10. With some CSS simplification, the display looks much improved. As we have kept our structure from the original application with regard to the #marker-

nav bar, the application code all works as it did before. Clicking the left and right arrows will toggle between resources and the title updates, as it should. All that remains now is to update the functionality within the MOUNDZ module to properly handle showing the resource details when the resource title is clicked.

Because we have kept many of the UI elements the same for the jQTouch sample, the changes required here are very simple. All we need to do is update the code in our showScreen function to call the correct method in jQTouch to update the screen:

function showScreen(screenId) { jQT.goTo('#' + screenId, 'slide'); } // showScreen

Essentially, we remove all of our custom code and pass the request on to the goTo method of our jQTouch object. This takes care of the screen navigation, but we also need to very slightly tweak the activateMarker function to update the title of the detail page:

function activateMarker(marker) { // iterate through the markers and set to the inactive image for (var ii = 0; ii < markers.length; ii++) {

markers[ii].setIcon('img/pin-inactive.png'); } // for

// update the specified marker's icon to the active image marker.setIcon('img/pin-active.png');

// update the navbar title using jQuery

CHAPTER 11: Mobile UI Frameworks Compared

$('#marker-nav .marker-title') .html(marker.getTitle()) .removeClass('has-detail') .unbind('click');

$('#marker-detail h1').html(marker.getTitle());

// if content has been provided, then add the has-detail // class to adjust the display to be "link-like" and // attach the click event handler var content = markerContent[marker.getTitle()]; if (content) {

$('#marker-nav .marker-title') .addClass('has-detail') .click(function() {

$('#marker-detail .content').html(content); showScreen('marker-detail');

}); } // if

// update the marker navigation controls updateMarkerNav(getMarkerIndex(marker));

} // activateMarker Once we have done this, we have successfully integrated jQTouch into Moundz. Figure

11–11 shows the screen you should see once you are able to navigate from a marker to the detail page.

Figure 11–11. We are now able to navigate to the details for a resource in our jQTouch Moundz app. This concludes our sample integrating with jQTouch. Next up is jQuery Mobile.

CHAPTER 11: Mobile UI Frameworks Compared

jQuery Mobile

While third on our list of mobile frameworks, jQuery Mobile is one of the frameworks that has probably attracted the most attention. This is due in part to the popularity of the jQuery library, and also in part to the amount of planning that has gone into the library.

Framework: jQuery Mobile Style: Markup based Web site: http://jquerymobile.com License: Open source (MIT or GPL) Source code: https://github.com/jquery/jquery-mobile Requirements: jQuery (1.4.4)

The following are some of jQuery Mobile’s strengths:

A great deal of research went into the state of mobile device browsers before any work commenced on the library. An excellent resource created as part of this research is the Mobile Graded Browser Support chart, available at http://jquerymobile.com/gbs.

There are sponsors and a very strong team behind this library. jQuery Mobile is based on and well integrated with jQuery. jQuery Mobile provides great documentation. It’s likely to be considered a quality solution by tech-savvy clients

when building mobile applications, given that it is an official jQuery Foundation product. Thus, there’s little need to justify its use when building a mobile web application.

The following are some of its weaknesses:

At the time of writing, it’s still only in an alpha release state. For some, the tight integration with jQuery will be considered a

weakness.

NOTE: While the Mobile Graded Browser Support data was primarily developed as a tool to assist with the development of the jQuery Mobile library, this is an excellent resource when building mobile web applications in general. This chart is invaluable for making quick determinations of where particular mobile applications may or may not run. Theoretically, the code that we have worked on throughout the course of the book should work on any WebKit-powered device that is rated with A-class support.

CHAPTER 11: Mobile UI Frameworks Compared

Applying Some jQTouch-Ups to Moundz