Mobile applications: client storage and offline execution - HTML5 in Action - page 199

Building this interface will generate a list of user features to guide your later development
of database management functions.
5.3.3. Developing a dynamic list with HTML and JavaScript
Your Task List view will require a list of to-do items that can change as the user adds and
deletes tasks. Building a web page with a varying list requires the use of JavaScript to gen-
erate new HTML markup for each list item and its UI controls. In addition, you'll need to
insert those new list items by making modifications to the DOM. If a user needs to delete
an item, the application will regenerate the entire list rather than try to remove an individual
list item from the DOM. Although this isn't the most efficient way to handle list manage-
ment, it's fast to implement and allows you to get on to more interesting tasks like learning
about the HTML5 IndexedDB API!
Step 3: Develop the UI for the task list view
The Task List view is a dynamic part of the application's webpage that updates itself in re-
sponse to user actions. Here's a list of those actions and how to implement them:
• Adding a task to the list —The application needs to define a function, showTask ,
to generate the HTML markup for each added task and then insert the markup into
the view's DOM.
• Checking off and deleting tasks —You'll also use showTask to add check boxes
and Delete buttons to each added task. showTask will also define and bind an
event handler for each check box and delete button.
Figure 5.5 illustrates how the buttons and check boxes will appear.
Figure 5.5. Each task item has two components that allow the user to update the task list. Checking the box on the
left-hand side will mark the task as complete, whereas pressing the red Delete button on the right-hand side will
remove the task.
The code in listing 5.11 implements the showTask and createEmptyItem functions.
CreateEmptyItem is a helper function to handle the boundary conditions where the