Application Controls - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 49

Cautio ■ The pages feature is pretty raw, and it looks like they were a late addition to the
Windows 8 Consumer Preview, replacing a similar feature that was incredibly difficult to use. This
is an area that I suspect will change again before the final Windows 8 release.

To d e m To n s t ra t e t h e p a g e s f e a t u re, I a m g To i n g t To i m p l e m e n t t h e t To p - r i g h t re g i To n To f t h e l lay- -
out, allowing the user to edit the contents of the currently selected item and display a useful
message when no selection has been made.
I need do to three things to use a page. The first is to define the HTML, the second is to write
the JavaScript that will be executed when the HTML is loaded, and the third thing is to load and
display the HTML as part of the application.

Defining the HTML
For the first step, I have created a file called noSelection.html in the html folder of the project.
The contents of this file are shown in Listing 3-9. This is the markup that will be displayed to the
user when no grocery list item has been selected.

Listing 3-9. The noSelection.html File
<div id="noselectionContainer" class="win-type-x-large">
<p>There are<span id="numberCount"></span>items on your list</p>
<p>Select to edit</p>
</div>

This is the complete content of the HTML file; it contains just the elements I want to insert
into the document, which is the same approach when I used the HTMLControl feature previ-
ously. I'll show you how to use complete HTML documents shortly, but I wanted to emphasize
that the pages feature will quite happily operate on fragments of markup, which is how I tend to
break up my applications.

Creating the JavaScript Callback
The second step is to define the code that will be executed when the HTML is loaded. Remember,
this is the main benefit of using the pages feature; I can rely on the code I specify being executed
every time I display the fragment, allowing me to configure the elements to match the present state
of the app. Listing 3-10 shows the contents of the pages.js file, which I created in the js folder.

Listing 3-10. Defining the Code to Be Executed When a Page Fragment Is Loaded
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.UI.Pages.define("/html/noselection.html", {