HTML and CSS Reference
In-Depth Information
task.percCompleted = taskPercCompleted.value;
return task;
When an INPUT element is used, you read its current content—whether text or numbers—using
the value property. If you have drop-down list, then you need to retrieve the selectedIndex property
of the list first and then map the index to the collection of list items—this collection is referred to
as options . Finally, if you used a WinJS component (such as, the date picker), then you first need to
retrieve its instance via the winControl property.
At this point you have retrieved the Task object given by the data the user has entered and this
object can be validated. If validation is successful, then you can proceed and display a summary of the
data (or just save it somewhere). To top off this exercise, you now use a FlyOut component to display
the task information in some formatted way.
In default.html, you add the following markup just before the footer. The markup defines a FlyOut
component but just leaves it empty.
<div data-win-control="WinJS.UI.Flyout" id="flyoutSummary"></div>
In todolist.js, you now add a final piece of code—the TodoList.displaySummary function. This
function will retrieve the reference to the FlyOut component, fill it up with task data, and show it to
the user.
TodoList.displaySummary = function (task) {
var description = "<p><span>DESCRIPTION</span>: " + task.description + "<p>";
var dueDate = "<p><span>DUE DATE</span>: " + task.dueDate + "<p>";
var priority = "<p><span>PRIORITY</span>: " + task.priority + "<p>";
var status = "<p><span>STATUS</span>: " + task.status + "<p>";
var percCompleted = "<p><span>% COMPLETED</span>: " + task.percCompleted +
// Build the entire content string and attach it to the flyout
var summary = description + dueDate + priority + status + percCompleted;
document.getElementById("flyoutSummary").innerHTML = summary;
// Display the flyout
var anchor = document.getElementById("buttonAddTask");
var flyoutSummary = document.getElementById("flyoutSummary").winControl;;
The preceding code first prepares a bunch of individual strings that correspond to the various
properties of the task object you want to summarize. Next, you create a comprehensive string from all
the individual strings, and programmatically attach this new comprehensive string to the body of the
Search WWH ::

Custom Search