MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Tip To prevent the app bar from appearing, you can do one of two things. First, to prevent the appbar
from appearing at all (for any gesture), set the app bar’s element’s winControl.disabled property to
true. Second, if you want to prevent it for, say, a right-click on a particular element (such as a canvas),
listen to the contextmenu (right click) event for that element and call eventArgs.preventDefault()
within your handler.
For apps written in HTML and JavaScript, the app bar control is implemented as a WinJS control:
WinJS.UI.AppBar. As with all other WinJS controls, you declare an app bar in HTML and instantiate it
with a call to WinJS.UI.process or WinJS.UI.processAll. For a first example, we don’t need to look any
farther than some of the Visual Studio/Blend project templates like the Grid App project, where a
placeholder app bar is included in default.html (initially commented out):
The super-exciting result of this markup, using the ui-dark.css stylesheet, is as follows:
Because the app bar is declared in default.html, which is the container for all other page controls, this
same app bar will apply to all the pages in the app. With this approach you can declare all your
commands within a single app bar and assign different classes to the commands that allow you to easily
show and hide command sets as appropriate for each page. This also centralizes those commands that
appear on multiple pages, and you can wire up event handlers for them in your app’s primary activation
code (such as that in default.js).
Alternately, you can declare an app bar within the markup for individual page controls. Since an app
bar will still be in the DOM, the Windows gestures will invoke it on each particular page. In the Grid App
project, for example, you can move the markup above from default.html into groupedItems.html,
groupDetail.html, and itemDetail.html with whatever modifications you like for each page. This might
be especially useful if your app’s pages don’t share many commands in common.
In these cases, each page’s ready method should take care of wiring up the commands on its
particular app bar. Note also that you can add handlers within a page’s ready method even for a central
app bar; it’s just a matter of calling addEventListener on the appropriate child element within that app
bar.
Let’s look now at how all this works through the HTML AppBar control sample. (This chapter’s
companion content also has a modified version.) We’ll start with the basics and the standard
command-oriented configuration for app bars, look at how to display menus for some of those
commands, and then see how to create custom layouts as is used for a top navigation bar.
277