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

chapter

3

Application
Controls

For the most part, the user interface controls that you use in a Metro app are the same as the
ones you use when creating a regular HTML web app. If you want to gather data from the user,
then you can use elements such as select , input , and textarea . If you want to allow the user
to commence an action, then you can use button elements, and so on. The appearance of these
elements in your app is controlled by a combination of the CSS in your project and the capabili-
ties of Internet Explorer 10.
In addition to these basic controls, the WinJS API defines some that are specific to Metro.
In this chapter, I show you how to use the most important of these controls, focusing on those
that are essential to implementing the Metro app experience, both for the user and for the
developer.
I begin by showing you the AppBar and Flyout controls. The AppBar is a core feature of all
Metro apps and is the mechanism by which users perform interactions that are not directly pos-
sible using the data and controls in the main application layout. Flyouts are a way of providing
consistent pop-ups to users and are closely associated with AppBars.
Not all WinJS controls are for the benefit of the user. In this chapter, I show you how to
use the HTMLControl to import fragments of HTML into your application. The HTMLControl
is useful only for static HTML content, so I also show you how to use the Pages feature to load
HTML and its associated JavaScript and CSS. These techniques allow for the effective partition-
ing of application content and functionality, which makes for an easier development experi-
ence and simpler testing and maintenance. For completeness, I finish this chapter showing you
how to import external content into your Metro app, which can be useful if you have invested
in an existing content infrastructure and want to incorporate it into your application. Table 3-1
provides the summary for this chapter.

Adding an AppBar
he AppBar appears at the bottom of the screen when the user makes an upward swiping ges-
ture or right-clicks with the mouse. The emphasis in the Metro UI seems to be to have as few
controls as is possible on the main layout and rely on the AppBar as the mechanism for any
interaction that is not about the immediately available functionality.
I could define the HTML for AppBars directly in default.html , but as I mentioned at the
start of this chapter, WinJS supports dynamically loading and inserting fragments of HTML.