MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

For all other details on this function, refer to the WinJS.xhr documentation and its links to
associated tutorials.
Page Controls and Navigation
Now we come to an aspect of Windows Store apps that very much separates them from typical web
applications. In web applications, page-to-page navigation uses hyperlinks or setting
document.location from JavaScript. This is all well and good; oftentimes there’s little or no state to pass
between pages, and even when there is, there are well-established mechanisms for doing so, such as
HTML5 sessionStorage and localStorage (which work just fine in Store apps).
This type of navigation presents a few problems for Store apps, however. For one, navigating to a
wholly new page means a wholly new script context—all the JavaScript variables from your previous
page will be lost. Sure, you can pass state between those pages, but managing this across an entire app
likely hurts performance and can quickly become your least favorite programming activity. It’s better
and easier, in other words, for client apps to maintain a consistent in-memory state across pages.
Also, the nature of the HTML/CSS rendering engine is such that a blank screen appears when
switching pages with a hyperlink. Users of web applications are accustomed to waiting a bit for a
browser to acquire a new page (I’ve found many things to do with an extra 15 seconds!), but this isn’t an
appropriate user experience for a fast and fluid Windows Store app. Furthermore, such a transition
doesn’t allow animation of various elements on and off the screen, which can help provide a sense of
continuity between pages if that fits with your design.
So, although you can use direct links, Store apps typically implement “pages” by dynamically
replacing sections of the DOM within the context of a single page like default.html, akin to how
AJAX-based apps work. By doing so, the script context is always preserved and individual elements or
groups of elements can be transitioned however you like. In some cases, it even makes sense to simply
show and hide pages so that you can switch back and forth quickly. Let’s look at the strategies and tools
for accomplishing these goals.
WinJS Tools for Pages and Page Navigation
Windows itself, and the app host, provide no mechanism for dealing with pages—from the system’s
perspective, this is merely an implementation detail for apps to worry about. Fortunately, the engineers
who created WinJS and the templates in Visual Studio and Blend worried about this a lot! As a result,
they’ve provided some marvelous tools for managing bits and pieces of HTML+CSS+JS in the context of
a single container page:
• WinJS.UI.Fragments contains a low-level “fragment-loading” API, the use of which is necessary
only when you want close control over the process (such as which parts of the HTML fragment
get which parent). We won’t cover it in this book; see the documentation and the Loading HTML
fragments sample.
121