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

listed to be picked for further editing. In default.html , you add the following markup right below the H1
element.
<div id="list-of-tasks">
<button id="buttonNewTask">New</button>
<div id="task-listview"
data-win-options ="{layout: {type: WinJS.UI.Listayout}}"
data-win-control="WinJS.UI.ListView">
</div>
</div>
<div id="task-listitem" data-win-control="WinJS.Binding.Template">
<div class="listitem"><span data-win-bind="innerText: description"></span></div>
</div>
You also locate the last DIV in the page with a form-section class and remove the BUTTON
elements with the New and Open title. To be precise, the New button has been moved into the newly
added DIV .
In addition, you might want to wrap the visual controls used to create the task in a new DIV
element named editor-container , as shown below:
<div id="task-editor" class="form-container">
<div id="editor-container">
<div id="buttonCancel-container"><button id="buttonCancel">Cancel</button></div>
<!-- The existing task editor goes here -->
</div>
</div>
The reason for this additional container is that it will let you hide and show the editor while
maintaining the outermost container with its graphical settings. On top of the additional DIV, you also
place another DIV that contains a Cancel button.
To complete the reworking of the user interface, you also add a bit to the default.css file to give
new elements some non-default graphical aspects.
#list-of-tasks {
float: left;
width: 300px;
height: 480px;
color: #eee;
padding: 5px;
background-color: #1593dc;
margin-top: 20px;
margin-left: 20px;
}
#list-of-tasks button {