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

Table 3-1. Chapter Summary

Problem Solution Listing

Dene a div element with a data-win-control
attribute of WinJS.UI.AppBar .

Denote an AppBar. 1, 3, 4

Use the HTMLControl feature. Import a fragment of static

content.

2

Dene a div element with a data-win-control
attribute of WinJS.UI.Flyout .

Denote a yout. 5

Congure the button element so that the type
property is flyout and the flyout property is set
to the id of the flyout div element.

Associate a flyout with an
AppBar button.

6

Manage a yout. Use the DOM API to manage the controls in

the flyout and the members of the flyout div
element's winControl property to manage the
flyout functionality.

7, 8

Create fragments of HTML and use the WinJS.
UI.Pages.define method to register a callback
function that will be executed when the content
is loaded. Use the WinJS.UI.Pages.render
method to load the content.

Load content into a Metro
app.

9 through 12

Create an HTML document and use script and
link elements to reference the JavaScript and
CSS files. Use the WinJS.UI.Pages.define and
WinJS.UI.Pages.render methods to register a
callback function and load the document.

Load HTML, JavaScript,
and CSS into a Metro app
together.

13 through 15

Use an iframe and ensure that the Internet
(Client) permission is declared in the app's
manifest.

Display content that is
external to a Metro app.

16 through 18

To demonstrate this feature, I have created an html folder in the Solution Explorer and created
an appbar.html file using the HTML Page item in the Add New Item dialog. The contents of
appbar.html , which contains the definition of my AppBar, are shown in Listing 3-1.

■ Ensure that you are not running the debugger when you create the html folder. If you
are, Visual Studio will create a folder called NewFolder but won't let you change the name until
the debugger has stopped.

Tip