Getting Started - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 8

The World of MeTro Apis

You have access to several different APIs when writing Metro apps. There is the Windows
API, which is shared across all Metro apps, regardless of the language used to write
them. There is the WinJS API, which is just for JavaScript Metro apps and which acts as
a bridge between the capabilities of HTML/JavaScript and Windows. Finally, you have the
standard Document Object Model API, which you can use to navigate the HTML markup
in your application, register event handlers, and so on. JavaScript is a first-class citizen
in the Metro world, and your web app development knowledge will be very useful as you
start your development projects.

For the most part, the WinJS API is where you will spend most of your development time,
and this is my focus for the first part of this topic. The Windows API comes into its own
when you want to integrate your app into the wider Windows 8 platform, which I describe
in Chapters 4 and 5 .

he ui-dark.css file contains the styles that Windows 8 uses for Metro applications, tai-
lored for use with a dark color scheme (meaning white text on a dark background). There is a
corresponding file called ui-light.css that you can use if you want to have dark text on a light
background instead. The CSS files provide styles for all of the common HTML elements so that
they fit into the Metro visual theme and are consistent with Metro apps written in other lan-
guages, such as C#/XAML. You can customize these styles by overriding them in your applica-
tion, but for the most part, it is important to retain consistency with other Metro apps.

■ It is worth opening and reading these files. One of the nice things about developing Metro
apps with web technologies is that you can read the source code for the WinJS library and the CSS
files. You can't edit the files, but you can see what is going on and, most usefully, set breakpoints in
the WinJS code when using the debugger (which I demonstrate later in this chapter).

Tip

All three of these references are added to the default.html file automatically when Visual
Studio creates the project. Visual Studio also adds references to the default.css and default.js
files. By convention, these contain the JavaScript and CSS associated with default.html , but you
can rename or replace these files as you see fit. I will stick with the defaults to keep things simple.
My additions to default.html are shown in bold in the listing. I have added a div element
whose id is contentGrid . This will be the container for most of the content in my example app,
and it contains three other div elements: leftContainer , topRightContainer , and bottom-
RightContainer . I'll add content to these elements as we proceed through the topic.
Class names that begin with win-type are defined in ui-dark.css and are used to set the
size of text in a Metro application. There are a series of styles that relate to gradations in text
size from largest to smallest: win-type-xx-large , win-type-x-large , win-type-large , win-
type-medium , win-type-small , and win-type-x-small . There are two other win-type styles:
win-type-ellipsis uses an ellipsis ( … ) when text doesn't fit into its parent element, and win-
type-interactive makes an element resemble a link. In default.html , I have used the win-
type-xx-large style to create placeholder headers in the layout.