Wiring Up the Home Screen

With the required methods added to the TODOLIST.Storage module, and a UI to display our task information, we are now ready to start bringing those pieces together. Thankfully, this is made simple given jQuery’s event system and the trigger call we implemented earlier. Essentially, we need to bind to listen for the activated event, and then do something in response to that event occurring. We will implement the bind handler and code that is called as a result in three places. First, we modify the document.ready event listener to attach event handlers to various views (just the main view at this stage) and then activate the main view on load of the application:

$(document).ready(function() { ...

// bind activation handlers $("#main").bind("activated", TODOLIST.activateMain);

// initialize the main view PROWEBAPPS.ViewManager.activate("main");

}); Next, we implement the TODOLIST.activateMain module function that is invoked when

the activated event is received for the #main element: activateMain: function() {

TODOLIST.Storage.getMostImportantTask(function(task) { if (task) { // the no tasks message may be displayed, so remove it jQuery("#main .notasks").remove();

// update the task details showTaskDetails("#main .task", task);

// attach a click handler to the complete task button jQuery("#main .task-complete").unbind().click(function() {

jQuery("#main .task").slideUp();

// mark the task as complete task.complete();

// save the task back to storage TODOLIST.Storage.saveTask(task, module.activateMain);

}); } else {

jQuery("#main .notasks").remove(); jQuery("#main .task").slideUp().after("<p class='notasks'>You have no tasks

to complete</p>"); } }); }

You can see in the preceding code that we make the call to our TODOLIST.Storage.getMostImportantTask function and pass through a callback to receive the most important task that has been found in the database. Based on whether

CHAPTER 4: Constructing a Multipage App

a task was found or not (the database could be empty), we then either update the contents of the main task or hide the contents and let the user know there are no tasks to complete.

The code also attaches an event handler to the Complete Task link (note the jQuery unbind to prevent multiple event calls) to handle completing the task. Thanks to the work we have put into the Storage module, wiring up the completion handler takes minimal code.

Both in this code sample and the one following, a couple of CSS classes are used. You can decide how you want them to look and add something to the application stylesheet ( todolist.css) according to your tastes.

Finally, we create a private function, showTaskDetails, to do the work of updating an HTML div designed for displaying task details with the actual values:

function showTaskDetails(selector, task) { var container = jQuery(selector), daysDue = task.getDaysDue();

// update the relevant task details container.find(".task-name").html(task.name); container.find(".task-description").html(task.description);

if (daysDue < 0) { container.find(".task-daysleft") .html("OVERDUE BY " + Math.abs(daysDue) + " DAYS").addClass("overdue"); } else {

container.find(".task-daysleft") .html(daysDue + " days").removeClass("overdue"); } // if..else } // showTaskDetails

This yields the various displays, as shown in Figure 4–7 (depending on your data).

84 CHAPTER 4: Constructing a Multipage App

Figure 4–7. The main screen display based on data that is available Congratulations, the main page of the application is now complete. This, combined with

the task-adding functionality that we explored in previous chapters, allows us to create tasks and keep track of important ones. We will need to build the show-all-tasks screen as well so that we can access the other tasks.

Before we do that, though, it’s time we take a little break and have you cut some code (see Exercise 4–1).

EXERCISE 4–1: INTEGRATING THE ADD FORM AS AN EXTRA SCREEN

You now have the required pieces to take the code we created in the last chapter in the create-task- form.html file and integrate it into the todolist.html file. Additionally, with only a small amount of JavaScript, you should be able to return the user to the application main screen once they have successfully created a new task.

There are a few things we haven’t created yet (such as having a back action automatically added), but we will be completing that in the next section, and this will automatically be made available in your Add view.

CHAPTER 4: Constructing a Multipage App

Wiring Up the Home Screen