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 +
"<p>";
// 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;
flyoutSummary.show(anchor);
}
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