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

To bring my flyout HTML fragment into the application, I have to update default.html
and make use of HTMLControl again:
…
<!-- import HTML fragments -->
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri: '/html/appbar.html'}"></div>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri: '/html/addItemFlyout.html'}"></div>
<!-- end of HTML fragments -->
…

■ To style the flyout, I added a new CSS file to the project called flyouts.css and added a link
element to default.html to import the styles it contains into the Metro app. The styles are very simple,
and you can see them by downloading the source code that accompanies this topic from Apress.com.

Tip

Managing the Controls in a Flyout
I have shown the fully implemented flyout in Figure 3-2 , but getting to this point requires some
additional code. I need to populate the select element with details of the stores in the view model
and handle the click event for the Add button so that the new item is added to the list. Listing 3-7
shows the changes to the UI namespace in the ui.js file to handle both of these areas.

Listing 3-7. Adding Support for the Flyout Controls to the UI Namespace
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.Namespace.define("UI.Flyouts", {
setupAddItemFlyout: function () {
var selectElement=WinJS.Utilities.query('select#stores')[0];
WinJS.Utilities.empty(selectElement);
var list=ViewModel.UserData.getStores();
list.forEach(function (item) {
var newOption=document.createElement("option");
newOption.text=item;
selectElement.add(newOption);
});
document.getElementById("addItemButton").addEventListener("click",
function () {
var item =
WinJS.Utilities.query("#addItemFlyout #item")[0].value;
var quantity =
WinJS.Utilities.query("#addItemFlyout #quantity")[0].value;