MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

The Navigation App Template, PageControl Structure, and
PageControlNavigator
Taking one step beyond the Blank App template, the Navigation App template demonstrates the basic
use of page controls. (The more complex templates build navigation out further.) If you create a new
project with this template in Visual Studio or Blend, here’s what you’ll get:
• default.html Contains a single container div with a PageControlNavigator control pointing to
pages/home/home.html as the app’s home page.
• js/default.js Contains basic activation and state checkpoint code for the app.
• css/default.css Contains global styles.
• pages/home Contains a page control for the “home page” contents, composed of
home.html, home.js, and home.css. Every page control typically has its own markup, script,
and style files.
• js/navigator.js Contains the implementation of the PageControlNavigator class.
To build upon this structure, add additional pages by using a page control template. I recommend
first creating a new folder for the page under pages, like home in the default project structure. Then
right-click that folder, select Add > New Item, and select Page Control. This will create suitably named
.html, .js. and .css files in that folder.
Now let’s look at the body of default.html (omitting the standard header and a commented-out
AppBar control):
All we have here is a single container div named contenthost (it can be whatever you want), in which
we declare the Application.PageControlNavigator control. With this we specify a single option to
identify the first page control it should load (/pages/home/home.html). The PageControlNavigator will
be instantiated within our activated handler’s call to WinJS.UI.processAll.
Within home.html we have the basic markup for a page control. This is what the Navigation App
template provides as a home page by default, and it’s pretty much what you get whenever you add a
new PageControl from the item template:
123