Building Android Apps : Traffic Cop

10/14/2010 9:38:04 AM
For the next series of examples, we’ll write a single page called android.html that will sit in front of all the site’s other pages. Here’s how it works:
  1. On first load, android.html will present the user with a nicely formatted version of the site navigation.

  2. We’ll then use jQuery to “hijack” the onclick actions of the nav links, so when the user clicks a link, the browser page will not navigate to the target link. Rather, jQuery will load a portion of the HTML from the remote page and deliver the data to the user by updating the current page.

We’ll start with the most basic functional version of the code and improve it as we go along.

The HTML for the android.html wrapper page is extremely simple (see Example 1). In the head section, set the title and viewport options and include links to a stylesheet (android.css) and two JavaScript files: jquery.js and a custom JavaScript file named android.js.


You must put a copy of jquery.js in the same directory as the HTML file.

The body has just two div containers: a header with the initial title in an h1 tag and an empty div container, which will end up holding HTML snippets retrieved from other pages.

Example 1. This simple HTML wrapper markup will sit in front of the rest of the site’s pages
<title>Jonathan Stark</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="android.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="android.js"></script>
<div id="header"><h1>Jonathan Stark</h1></div>
<div id="container"></div>

Let’s move on to the android.css file. As you can see in Example 2.

Example 2. The base CSS for the page is just a slightly shuffled version of previous examples
body {
background-color: #ddd;
color: #222;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
#header {
background-color: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(#999));
border-color: #666;
border-style: solid;
border-width: 0 0 1px 0;
#header h1 {
color: #222;
font-size: 20px;
font-weight: bold;
margin: 0 auto;
padding: 10px 0;
text-align: center;
text-shadow: 0px 1px 1px #fff;
ul {
list-style: none;
margin: 10px;
padding: 0;
ul li a {
background-color: #FFF;
border: 1px solid #999;
color: #222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
ul li a:active,ul li a:hover {
#content {
padding: 10px;
text-shadow: 0px 1px 1px #fff;
#content a {
color: blue;

1. Setting Up Some Content to Work With

This JavaScript loads a document called index.html, and will not work without it.

If you want a couple functioning links to play with, you can create about.html, blog.html, and consulting-clinic.html. To do so, just duplicate index.html a few times and change the filename of each copy to match the related link. For added effect, you can change the content of the h2 tag in each file to match the filename. For example, the h2 in blog.html would be <h2>Blog</h2>.

At this point, you should have the following files in your working directory:


You created this in Example 1.


You created this in Example 2.


A copy of index.html, with the h2 set to “About”.


A copy of index.html, with the h2 set to “Blog”.


A copy of index.html, with the h2 set to “Consulting Clinic”.

2. Routing Requests with JavaScript

The JavaScript in android.js is where all the magic happens in this example. Create this file in the same directory as your android.html file. Please refer to Example 3 as we go through it line by line.

Example 3. This bit of JavaScript in android.js converts the links on the page to Ajax requests
function loadPage(url) {
if (url == undefined) {
$('#container').load('index.html #header ul', hijackLinks);
} else {
$('#container').load(url + ' #content', hijackLinks);
function hijackLinks() {
$('#container a').click(function(e){


One of my favorite things about JavaScript is that you can pass a function as a parameter to another function. Although this looks weird at first, it’s extremely powerful and allows you to make your code modular and reusable. If you’d like to learn more, you should check out JavaScript: The Good Parts by Douglas Crockford (O’Reilly). In fact, if you are working with JavaScript, you should check out everything by Douglas Crockford; you’ll be glad you did.

Click handlers do not run when the page first loads; they run when the user actually clicks a link. Assigning click handlers is like setting booby traps; you do some initial setup work for something that may or may not be triggered later.


It’s worth taking a few minutes to read up on the properties of the event object that JavaScript creates in response to user actions in the browser. A good reference is located at

When testing the code in this chapter, be sure you point your browser at the android.html page. Web servers will typically default to displaying index.html if you just navigate to the directory that the files are in. Normally this is helpful, but in this case it will cause a problem.

  •  iPhone Application Development : Exploring Interface Builder - Connecting to Code
  •  iPhone Application Development : Customizing Interface Appearance
  •  iPhone Application Development : Creating User Interfaces
  •  iPhone Application Development : Understanding Interface Builder
  •  Android Security Tools
  •  Android Security : Binder Interfaces
  •  Android Security : Files and Preferences
  •  Android Security : ContentProviders
  •  Android Security : Services
  •  Android Security : Broadcasts
  •  Android Security : Activities
  •  Android Security : Creating New Manifest Permissions
  •  Android Permissions Review
  •  Android’s Security Model
  •  Android’s Securable IPC Mechanisms
  •  CSS for Mobile Browsers : CSS Techniques
  •  CSS for Mobile Browsers : Selectors
  •  CSS for Mobile Browsers : Where to Insert the CSS
  •  iPhone Programming : Creating a Table View
  •  iPhone Programming : Simplifying the Template Classes
    Top 10
    Home Theatre Pc Software And Operating Systems (Part 4) - XBMC
    Home Theatre Pc Software And Operating Systems (Part 3) - Setting Up Windows Media Center
    Home Theatre Pc Software And Operating Systems (Part 2)
    Home Theatre Pc Software And Operating Systems (Part 1) - Windows Media Center
    Nokia's Extreme Megapixel Bid
    Storage, Screens And Sounds (Part 3)
    Storage, Screens And Sounds (Part 2)
    Storage, Screens And Sounds (Part 1)
    Microsoft ASP.NET 4 : Using the SqlProfileProvider (part 4) - The Profile API, Anonymous Profiles
    Microsoft ASP.NET 4 : Using the SqlProfileProvider (part 3) - Profiles and Custom Data Types
    Most View
    Managing and Administering SharePoint 2010 Infrastructure : Using Additional Administration Tools for SharePoint
    Binding Application Data to the UI objects in Silverlight
    iPhone Application Development : Getting the User’s Attention - Generating Alerts
    Understanding and Using Windows Server 2008 R2 UNIX Integration Components (part 2)
    iPhone Application Development : Creating and Managing Image Animations and Sliders (part 3) - Finishing the Interface
    Cisco Linksys X3000 - The Link to Connectivity
    HP LaserJet Pro CM1415fnw - Print from The Clouds
    Building Your First Windows Phone 7 Application (part 2) - Using Your First Windows Phone Silverlight Controls
    Determine Your Need for Server Core
    Mobile Application Security : Bluetooth Security - Overview of the Technology
    Using System Support Tools in Vista
    Windows 7 : Using Windows Live Calendar (part 3) - Scheduling Appointments and Meetings & Viewing Agendas and Creating To-Do Lists
    Advanced ASP.NET : The Entity Framework (part 3) - Handling Errors & Navigating Relationships
    Graham Barlow: the Apple view
    Ipad : Presentations with Keynote - Adding Transitions (part 2) - Object Transitions
    Windows Server 2003 : Troubleshooting Group Policy
    Microsoft XNA Game Studio 3.0 : Controlling Color (part 2)
    Building the WinPE Image
    Programming the Mobile Web : HTML 5 (part 3) - Offline Operation
    Windows Phone 7 Development : Using Culture Settings with ToString to Display Dates, Times, and Text