23.01.2018 Views

MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Sidebar: Helping Out IntelliSense<br />

In Windows Store apps you might encounter certain markup structures within code comments,<br />

often starting with a triple slash, ///. These are used by Visual Studio and Blend to provide rich<br />

IntelliSense within the code editors. You’ll see, for example, /// comments,<br />

which create a relationship between your current script file and other scripts to resolve externally<br />

defined functions and variables. This is explained on the JavaScript IntelliSense page in the<br />

documentation. For your own code, especially with namespaces and classes that you will use from<br />

other parts of your app, use these comment structures to describe your interfaces to IntelliSense.<br />

For details, see Extending JavaScript IntelliSense, and look around the WinJS JavaScript files for<br />

many examples.<br />

The Navigation Process and Navigation Styles<br />

Having seen how page controls, WinJS.UI.Pages, WinJS.Navigation, and the PageControlNavigator all<br />

relate, it’s straightforward to see how to navigate between multiple pages within the context of a single<br />

<strong>HTML</strong> page (e.g., default.html). With the PageControlNavigator instantiated and a page control defined<br />

via WinJS.UI.Pages, simply call WinJS.Navigation.navigate with the relative URI of that page control<br />

(its identifier). This loads that page and adds it to the DOM inside the element to which the<br />

PageControlNavigator is attached, unloading any previous page. This makes that page visible, thereby<br />

“navigating” to it so far as the user is concerned. You can also use the other methods of WinJS.-<br />

Navigation to move forward and back in the nav stack, with its canGoBack and canGoForward properties<br />

allowing you to enable/disable navigation controls. Just remember that all the while, you’ll still be in the<br />

overall context of your host page where you created the PageControlNavigator control.<br />

As an example, create a new project using the Grid App template and look at these particular areas:<br />

• pages/groupedItems/groupedItems is the home or “hub” page. It contains a ListView control<br />

(see Chapter 5) with a bunch of default items.<br />

• Tapping a group header in the list navigates to section page (pages/groupDetail). This is done<br />

in pages/groupedItems/groupedItems.html, where an inline onclick handler event navigates to<br />

pages/groupDetail/groupDetail.html with an argument identifying the specific group to display.<br />

That argument comes into the ready function of pages/groupDetail/groupDetail.js.<br />

• Tapping an item on the hub page goes to detail page (pages/itemDetail). The itemInvoked<br />

handler for the items, the _itemInvoked function in pages/groupedItems/groupedItem.js, calls<br />

WinJS.Navigation.navigate("/pages/itemDetail/itemDetail.html") with an argument<br />

identifying the specific item to display. As with groups, that argument comes into the ready<br />

function of pages/itemDetail/itemDetail.js.<br />

• Tapping an item in the section page also goes to the details page through the same<br />

mechanism—see the _itemInvoked function in pages/groupDetail/groupDetail.js.<br />

129

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!