The user interface of Windows Store applications - Build Windows 8 Apps with HTML5 and JavaScript

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 :

<h3>DESCRIPTION</h3>

<textarea id="taskSubject" required

data-win-bind="innerText: description"></textarea>

</div>

<div class="block-element" id="taskDueDate"

data-win-control="WinJS.UI.DatePicker" />

</div>

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

Home