HTML and CSS Reference
In-Depth Information
Choosing a file to save data
You start the exercise by making a copy of the TodoList project from Chapter 6, “The user interface of
Windows Store applications,” in a new folder of your choice. Before you go any further with contracts,
it is advisable that you make some little changes to the existing code to improve the application.
preliminary changes to the TodoList application
First thing, you define an HTML layout for the summary fly out displayed to the user before attempting to
save. Open the default.html file and replace the content of the DIV element with the ID of lyoutSummary .
Here's the new content:
<div data-win-control="WinJS.UI.Flyout" id="flyoutSummary">
<div class="tableLabel">DESCRIPTION:</div>
<div class="tableValue"><span data-win-bind="innerText: description" /></div>
<div style="clear:both" />
<div class="tableLabel">DUE DATE:</div>
<div class="tableValue">
<span data-win-bind="innerText: dueDate TodoList.dateForDisplay"></div>
<div style="clear:both" />
<div class="tableLabel">PRIORITY:</div>
<div class="tableValue"><span data-win-bind="innerText: priority" /></div>
<div style="clear:both" />
<div class="tableLabel">STATUS:</div>
<div class="tableValue"><span data-win-bind="innerText: status" /></div>
<div style="clear:both" />
<div class="tableLabel">COMPLETED:</div>
<div class="tableValue"><span data-win-bind="innerText: percCompleted" /></div>
<div style="clear:both" />
<br /><hr />
<button onclick="TodoList.pickFileAndSaveTask()">It's OK. Please save!</button>
</div>
As you can see, the markup now contains a button for the user to click to trigger the save process.
The markup being used also contains a couple of new CSS styles that must be added to the todolist.
css files you have in the project.
.tableLabel {
float: left;
width: 100px;
text-align: right;
font-weight: 600;
}
.tableValue {
float: left;
font-weight: 400;
margin-left: 10px;
}
Search WWH ::




Custom Search