Application Controls - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 45

The last step is to call the setupButtons function from within performInitialSetup in the
default.js file, as shown in Listing 3-4. Notice that, once again, I make the call to my function
within the then callback provided by the Promise object so that I can be sure that my HTML
fragment has been loaded and processed before I start performing operations on the elements
it contains.
Listing 3-4. Calling the setupButtons Function
…
function performInitialSetup(e) {
WinJS.UI.processAll().then(function () {
UI.List.displayListItems();
UI.List.setupListEvents();
UI.AppBar.setupButtons();
});
}
…
And, with these additions, I have a basic AppBar in place. If you select an item in the gro-
cery list, the Done button will be enabled, allowing you to reveal the AppBar and mark the item
as completed, removing it from the list. I am not going to implement functionality for all of the
AppBar buttons, but in the following section I'll wire up the Add button so that I can demon-
strate how to create and use a Flyout.
Adding Flyouts
Flyouts are pop-up windows that you can use to provide information to, or gather data from, the
user. Flyouts are often used in conjunction with AppBar buttons, and in this section I show you
how to use a flyout to complete the Add Item AppBar button. To begin, I have created a new file
in the html folder called addItemFlyout.html , the contents of which are shown in Listing 3-5.
Listing 3-5. Defining a Flyout
<div class="flyout" id="addItemFlyout" data-win-control="WinJS.UI.Flyout">
<div>
<label for="item">Item:</label>
<input id="item" placeholder="e.g. Apples">
</div>
<div>
<label for="quantity">Quantity:</label>
<input id="quantity" placeholder="e.g. 4"/>
</div>
<div>
<label for="stores">Store:</label>
<select id="stores"></select>
</div>
<div class="rightAlign">
<button id="addItemButton">Add</button>
</div>
</div>