Building the Application’s Main Screen

Now that we have built some application code that will allow us to build more than just a simple application, we are ready to start building those separate screens. Let’s start by building the main screen of our application.

For both the main screen and the to-do list task display, we’ll begin by putting together

a screen mockup (I’m a big fan of Inkscape [ www.inkscape.org] for this kind of thing), and then building the display to match that layout. Figure 4–3 shows the mockup for the to-do list application home page.

Figure 4–3. To-do list application home page mockup The layout of the home screen is designed to be very simple. Rather than showing the

complete lists of tasks, just the most important task is shown—in an attempt to stop us from getting distracted (trust me, I’m very distractable). Readers of the Lifehacker blog ( http://lifehacker.com) may well be familiar with the technique.

The HTML for a static replacement for the main div is listed here: <div id="main" class="view">

<h3>Task: <span class="task-name">Mow the Lawn</span></h3> <p class="task-description">Task description goes here</p> <p class="task-due">

</p> <ul class="task-actions">

74 CHAPTER 4: Constructing a Multipage App

<li class="right"><a href="#" class="task-complete">COMPLETE TASK</a></li> <li><a href="#" class="task-start">START WORKING</a></li>

</ul> </div> <ul class="buttons">

<li><a class="changeview" href="#alltasks">Show All Tasks</a></li> <li><a class="changeview" href="#add">Add New</a></li>

</ul> </div>

Notice here that we have a number of HTML elements that will end up displaying the actual task details once the application logic is written. For now, placeholder values are included.

Without any CSS to style this HTML (see Figure 4–4), the view looks pretty ordinary, so we add the following styles to the todolist.css file for the formatting of the task box, name, description, and so on:

div.task { margin: 8px 4px; }

div.task h3 { border: 1px solid #ff6600; background: #ff7f2a; color: white; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; margin: 0; padding: 8px; font-size: 0.8em;

div.task p { margin: 0; background: #e6e6e6; border-left: 1px solid #b3b3b3; border-right: 1px solid #b3b3b3; padding: 8px;

p.task-due label { font-weight: bold; width: 70px; float: left;

CHAPTER 4: Constructing a Multipage App

Figure 4–4. The main screen of our app is showing a distinct lack of style. Add the following for formatting the task actions that are displayed beneath the task

details: ul.task-actions {

background: #b3b3b3; border: 1px solid #b3b3b3; color: white; padding: 8px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; margin: 0; list-style-type: none;

ul.task-actions li a { color: white; text-decoration: none; font-weight: bold; font-size: 0.8em;

ul.task-actions li.right { padding: 4px 0 0 0; }

Finally, we add a definition for elements matching the right class to float right: .right {

float: right; }

76 CHAPTER 4: Constructing a Multipage App

While the task details area of the screen now looks like the mockup, there is still some work to do to show buttons instead of links—as shown in Figure 4–5. This is achieved by adding the following CSS to the proui.css file:

ul.buttons { margin: 4px 0 0 0; padding: 0; list-style-type: none;

ul.buttons li { margin: 4px 4px 10px 4px; }

ul.buttons li a { display: block; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,

#b3b3b3), color-stop(0.4, #666666), color-stop(1.0, #333333)); color: white; text-decoration: none; padding: 8px; text-align: center; -webkit-box-shadow: 0 2px 2px #333333; -webkit-border-radius: 6px;

Figure 4–5. Task elements styled With all the styles applied, this generates a static HTML screen, as shown in Figure 4–6.

It’s definitely starting to look the part.

CHAPTER 4: Constructing a Multipage App

Figure 4–6. The static HTML equivalent to our home screen mockup

Building the Application’s Main Screen