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

var store=WinJS.Utilities.query("#addItemFlyout #stores")[0].value;
ViewModel.UserData.addItem(item, quantity, store);
document.getElementById("addItemFlyout").winControl.hide();
document.getElementById("appBar").winControl.hide();
});
}
});
// … other namespace definitions omitted for brevity
})();
I have created a UI.Flyouts object that denes the setupAddItemFlyout function. This
function populates the select control from the view model, and when the Add button is clicked,
it reads the values from the input and select elements and uses them to create a item in the
grocery list.
When I am done with the flyout, I locate the div element and use the winControl property
to get the WinJS members that are specific to flyouts. The hide method dismisses the flyout and
returns the user to the main layout. I perform the same task on the AppBar element, which would
otherwise be left visible when the flyout is closed. See the WinJS API documentation for details of
the other methods available through the winControl property of AppBar and flyout elements.
Of course, defining this code isn't enough; I have to call the function from the default.js
file, as shown in Listing 3-8.
Listing 3-8. Calling the Code to Set Up the Flyout Controls
…
function performInitialSetup(e) {
WinJS.UI.processAll().then(function () {
UI.List.displayListItems();
UI.List.setupListEvents();
UI.AppBar.setupButtons();
UI.Flyouts.setupAddItemFlyout();
});
}
…
Using Pages
Earlier in the chapter, I used HTMLControl to import fragments into my main HTML document.
The main limitation in using HTMLControl is that you can't arrange to be notified when your
content is loaded. This is fine for content when you are using fragments just to reuse regions of
markup, but the HTMLControl isn't much help if you want to load content fragments dynami-
cally in response to user input.
HTMLControl is a simple declarative wrapper around a more complex WinJS feature called
pages . Pages must be set up and managed in JavaScript, but they provide a richer set of func-
tions and, crucially, support callbacks that can be used to integrate content at any point in the
application's life cycle.