Adding persistent data to applications - Build Windows 8 Apps with HTML5 and JavaScript - page 262

One extra step you might also want to take consists of removing the selection on the ListView
when the current task is closed. Users close a task by clicking the Cancel button. Here's the new
version of the cancelTaskClick method:
TodoList.cancelTaskClick = function () {
// Hide the editor
var editor = document.getElementById("editor-container");
editor.style.display = "none";
// Remove any selection on the list view
var listview = document.getElementById("task-listview").winControl;
listview.selection.clear();
}
The last feature left for the exercise is deleting an existing task.
Deleting tasks
In Figure 10-13, you see a new button—the Delete Task button. When you use the local or roaming
folder, users have no way to dismiss in all or in part the entire data set they created. They can only
uninstall the application to get rid of the data. It is then wise that the application provides some UI
elements that will help users remove any undesired pieces of data. Here's the markup for the Delete
Task button:
<div style="float:left">
<button id="buttonDeleteTask">Delete Task</button>
</div>
You place the button close to the other buttons (Add Task and Share), but the style attribute that is
used aligns the element to the left edge of the container. You also need to register a handler for the
click event by adding the following line to TodoList.init :
document.getElementById("buttonDeleteTask")
.addEventListener("click", TodoList.deleteTaskClick);
Next, you move to the implementation of TodoList.deleteTaskClick . The implementation of the
method is split into two parts—first, you ask for confirmation and second, you proceed with the
deletion of the file behind the currently opened task. The following code sets up a message box with
a couple of buttons. The button that confirms the operation ends up invoking the TodoList.deleteTask
method that you'll be writing in a moment. The button that denies the operation just exits from the
current operation.
TodoList.deleteTaskClick = function () {
var message = "Are you sure you want to delete the task?";
var msg = new Windows.UI.Popups.MessageDialog(message);