Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition

Simple Bells and Whistles

With this tiny bit of HTML, CSS, and JavaScript, we have essentially turned an entire website into a single-page application. However, it still leaves quite a bit to be desired. Let’s slick things up a bit.

Progress Indicator

Since we are not allowing the browser to navigate from page to page, the user will not see any indication of progress while data is loading. We need to provide some feedback to users to let them know that something is, in fact, happening (Figure 3-1). Without this feedback, users may wonder if they actually clicked the link or missed it, and will often start clicking all over the place in frustration. This can lead to increased server load and application instability (i.e., crashing).

Figure 3-1. Without a progress indicator of some kind, your app will seem unresponsive and your users will get frustrated

Thanks to jQuery, providing a progress indicator only takes two lines of code. We’ll just append a loading div to the body when loadPage() starts and remove the loading div when hijackLinks() is done. Example 3-4 shows a modified version of Example 3-3. The lines you need to add to android.js are shown in bold.

Example 3-4. Adding a simple progress indicator to the page

$(document).ready(function(){
    loadPage();
});
function loadPage(url) {
    $('body').append('<div id="progress">Loading...</div>'); if (url == undefined) { $('#container').load('index.html ...