HTML and CSS Reference
In-Depth Information
// Define the Task object
var Task = WinJS.Class.define(function () {
var that = {};
that.description = "This is my new task";
that.dueDate = TodoList.firstOfNextMonth();
that.priority = TodoList.Priority.Normal;
that.status = "Not Started";
that.percCompleted = 0;
that.minPriority = TodoList.Priority.VeryLow;
that.maxPriority = TodoList.Priority.VeryHigh;
return that;
Now you have a global object named TodoList that contains all of the JavaScript functions and
objects being used by the application. In addition, you have a Task object with a few properties, such
as description, due date, priority, status, and percentage of work completed. The next step is editing
the user interface so that you can collect data for populating a new Task object. At the same time, you
might want to use an existing instance of the Task object to initialize the input fields.
Collecting text and dates
In the top-most div , you place a multiline text editor and a date picker. The multiline text editor
requires the textarea HTML element. For the date picker, you have two options. You can use the
HTML input element or you can use a Windows 8 date picker component. Using the Windows 8 date
picker makes things far easier for the user. Here's the markup you need to insert in the first div of class
form-section :
<div class="form-section">
<div class="block-element">
<textarea id="taskSubject" required
data-win-bind="innerText: description"></textarea>
<div class="block-element">
<h3>DUE DATE</h3>
<div class="block-element" id="taskDueDate"
data-win-control="WinJS.UI.DatePicker" />
Let's ignore for a moment the data-win-bind attribute and the whole theme of data binding. Let's
pay attention instead to the data-win-control attribute used on the div tag with an ID of taskDueDate .
The data-win-control transforms a plain div element into a Windows 8 date picker component. So
you see a plain div element in the markup, but you actually get a much more sophisticated tree of
elements at run time.
Search WWH ::

Custom Search