Single HTML File, Multiple App Pages

Before we get into building our main to-do list application page, let’s work through adding some additional styles to our proui.css file to handle setting up divs for display and also showing a simple application menu at the base of the screen.

Firstly, let’s look at what is required to correctly display only one page when the application page loads:

div.view { display: none; padding: 0 6px;

div#main {

66 CHAPTER 4: Constructing a Multipage App

display: block; }

This simple CSS sets all div elements with the class view to be hidden by default. The second style declaration simply says that, if we have a div with an ID of main, that should override the view class and display the block.

<div id="main" class="view"> <h1>To Do List</h1> <p>Application Main Page</p>

</div> <div id="add" class="view">

<h1>Create Task</h1> <p>Add Form Goes Here</p>

</div> The preceding HTML fragment would generate a display with a title bar showing “To Do

List” and the text “Application Main Page.” On page load, there would be no visibility of either the “Create Task” header or the “Add Form Goes Here” text.

Additionally, let’s just make a simple change to the existing proui.css stylesheet styles to display the h1.fancy style if an h1 tag is contained within a div of class view:

h1.fancy, div.view h1 { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #666666), color-stop(0.5, #3A3A3A), color-stop(0.5, #222222), color-stop(1.0, #000000)); -webkit-box-shadow: 0 2px 1px #AAAAAA; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; font-size: 1.1em; color: white; padding: 10px 8px; margin: 0 0 6px 0; text-align: center;

} In the to-do list application, we will create a bottom menu bar that will contain the action

links that are relevant for the current view. This will meet the requirements of both items

1 and 2, and is consistent with native applications on Android.

NOTE: We will be using the same screen real estate and UI styling to meet both of the preceding requirements for Android. If you have experience with other mobile platforms, however, then you will know these user interactions are often done differently depending on the platform. In that case, the location of action and back buttons will vary.

Choosing an appropriate formatting style that is going to suit the majority of devices is difficult, which is why using a third-party UI suite is highly recommended. Unfortunately, at this time, most UI frameworks are geared toward an iPhone look and feel, and building an Android web app that feels like an iPhone app isn’t really what we are after here.

We will get started by having a look at some CSS styling to create such an action bar:

CHAPTER 4: Constructing a Multipage App

ul#menu { position: fixed; bottom: 0px; margin: 0; padding: 5px; list-style-type: none; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,

#666666), color-stop(0.5, #3A3A3A), color-stop(0.5, #222222), color-stop(1.0, #000000));;

width: 100%; }

ul#menu li { margin: 0; float: left; padding: 4px 10px 0 0;

ul#menu li a { color: white; font-weight: bold;

} This CSS, when applied with the following menu list (inserted into the HTML just before

our previous view declarations), will generate a display as per the one in Figure 4–1. <ul id="menu">

Figure 4–1. Our application main view with an action menu bar

68 CHAPTER 4: Constructing a Multipage App

While the preceding HTML fragment demonstrates how to construct the menu for display to the screen, it is not something that you would or should manually construct in HTML. Instead, we need an intelligent way to tell our application what the valid menu items for each screen are, and, additionally, what action should be taken for any given menu item.

Single HTML File, Multiple App Pages