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

Flyouts are denoted by a div element whose data-win-control attribute is set to WinJS.
UI.Flyout . This is the only limitation to creating a flyout, and I am free to add any content inside
the div element that I need to support my interaction with the user. In this example, I have used
some standard HTML form controls to gather details of the new item from the user.

■ If you are used to developing web apps, you will be accustomed to building data-
gathering interactions around the HTML form element. In a Metro app, the form element is that
important because the majority of interactions are handled entirely within the client. That said,
you can still use the form element with Ajax requests if you want to submit data to a server.

Tip

Having defined the flyout, I can now associate it with my AppBar, which I do by adding
configuration properties to the button element in the appbar.html file, as shown in Listing 3-6.

Listing 3-6. Associating a Flyout with an AppBar Button
…
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global', label: 'New Item', icon: 'add',
type:'flyout', flyout: 'addItemFlyout'}">
</button>
…

To specify the flyout associated with the button , I set the type property to flyout and the
flyout property to the id of the flyout element. When the user clicks the button , my flyout is
automatically displayed, as shown in Figure 3-2 .

Figure 3-2. Associating a flyout with an AppBar button

■ A type value of toggle creates an AppBar button that the user can switch on or off. A
value of button is equivalent to not setting a type property at all, and AppBar buttons work just
like regular HTML buttons (as demonstrated earlier in this chapter).

Tip