MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

• WinJS.UI.Pages is a higher-level API intended for general use and is employed by the
templates. Think of this as a generic wrapper around the fragment loader that lets you easily
define a “page control”—simply an arbitrary unit of HTML, CSS, and JS—that you can easily pull
into the context of another page as you do other controls. 23 They are, in fact, implemented like
other controls in WinJS (as we’ll see in Chapter 4), so you can declare them in markup, instantiate
them with WinJS.UI.process[All], use as many of them within a single host page as you like,
and even nest them. See Scenario 1 of the HTML Page controls sample for examples.
These APIs provide only the means to load and unload individual pages—they pull HTML in from
other files (along with referenced CSS and JS) and attach the contents to an element in the DOM. That’s
it. To actually implement a page-to-page navigation structure, we need two additional pieces:
something that manages a navigation stack and something that hooks navigation events to the
page-loading mechanism of WinJS.UI.Pages.
For the first piece, you can turn to WinJS.Navigation, which through about 150 lines of CS101-level
code supplies a basic navigation stack. This is all it does. The stack itself is just a list of URIs on top of
which WinJS.Navigation exposes state, location, history, canGoBack, and canGoForward properties. The
stack is manipulated through the forward, back, and navigate methods, and the WinJS.Navigation
object raises a few events—beforenavigate, navigating, and navigated—to anyone who wants to listen
(through addEventListener). 24
For the second piece, you can create your own linkage between WinJS.Navigation and
WinJS.UI.Pages however you like. In fact, in the early stages of app development of Windows 8, even
prior to the first public developer preview releases, people ended up writing just about the same
boilerplate code over and over. In response, the team at Microsoft responsible for the templates
magnanimously decided to supply a standard implementation that also adds some keyboard handling
(for forward/back) and some convenience wrappers for layout matters. Hooray!
This piece is called the PageControlNavigator. Because it’s just a piece of template-supplied code
and not part of WinJS, it’s entirely under your control, so you can tweak, hack, or lobotomize it however
you want. 25 In any case, because it’s likely that you’ll often use the PageControlNavigator in your own
apps, let’s look at how it all works in the context of the Navigation App template.
Note Additional samples that demonstrate basic page controls and navigation, along with handling
session state, can be found in the following SDK samples: App activate and suspend using WinJS (using
the session state object in a page control), App activated, resume and suspend (described earlier; shows
using the suspending deferral and restarting after termination), and Navigation and navigation history.
23 If you are at all familiar with user controls in XAML, this is the same idea.
24 The beforenavigate event can be used to cancel the navigation, if necessary. Either call args.preventDefault (args
being the event object), return true, or call args.setPromise where the promise returns true.
25 The Quickstart: using single-page navigation topic also shows a clever way to hijack HTML hyperlinks and hook them into
WinJS.Navigation.navigate. This can be a useful tool, especially if you’re importing code from a web app.
122