Build: More Details On Building Windows 8 Metro Apps

At the Microsoft Build conference yesterday afternoon, the company presented three “Big Picture” sessions, all designed to give developers an overview of the creation of new “Metro-style” applications for Windows 8. These sessions progressed from a basic overview of design principles to fairly detailed examples of building actual applications using Visual Studio Express and Expression Blend products. I haven’t been a professional programmer in many years, but it was certainly a big change from the way that most Windows developers have worked in the past.

Microsoft’s Jensen Harris went over the basic design decisions the company made. He explained the concepts that underlie the way the company wants developers to create applications, so they work consistently with other applications, and on a variety of systems.

The main concepts were: using a Metro-style design; creating “fast and fluid” applications; snapping and scaling applications; using contracts for making applications work together; investing in a great “tile”; creating “active” applications, specifically Live Tile; connecting to the cloud; and embracing the basic Windows. On Metro design, Microsoft picked a touch-centric design over the more common keyboard-and-mouse-centric design because it’s more intuitive. The company urges developers to do the same.

Harris converted an older-style application into one for the new Metro UI by removing extra space, moving the commands, improving the text display, and aligning things to a grid.

“A Metro-style app is not just a Win32 app that you recompile,” Harris said. In general, most Metro applications will be smaller in scope than the monolithic applications that dominate the desktop today.

“Fast and fluid” is Microsoft’s catchphrase for how they want Windows 8 and its applications to work. It focuses on raw performance of the touch interface, “fluid animation,” and a common language for touch, very different than using the finger as a replacement for a mouse. Harris demoed the difference between using the mouse like a finger (with lot of scrolling) and using a touch-based interface (where you select with one finger, then use another to scroll much faster). He hit on other user interface features such as “semantic zoom.” (This feature is not in the build of Windows 8 that was distributed to attendees.) 

Harris told the developers not to “bifurcate” the touch and mouse interfaces, but instead to design for touch first. If you use standard control and interactions, he said, the mouse and keyboard combination will still work well.

For instance, with touch, you swipe up with a finger to bring up a menu; you can also bring up the menu by right-clicking with a mouse.

“A screen without touch will seem antiquated in a few years,“ Harris said. (Personally, I’m not sure it makes sense for desktops, particularly with larger screens, but we’ll see.)

Applications need to run on a wide variety of machines, ranging from tablets with screens less than ten inches to desktops with monitors that are 27 inches and larger. Higher-definition screens, including 10-inch screens with 1920 by 1080 resolution are coming.

Harris suggested that developers provide their assets (icons and similar items) in 3 sizes (100%, 140% and 180%) so they can be ready for the new higher-definition screens. Applications should be designed for 1024 by 768 and widescreen 1366 by 768 views, an optional portrait view, and a “snap view” for when it is snapped to the side with multiples on screen.

The company is focusing on landscape first because the vast majority of people have desktop and laptops that have landscape screens, however it supports portrait, as well.

Harris then talked about system “contracts,” which he defined as the glue that binds applications together. The most fundamental of these contracts are Share, Search and Picker.

Every application should be a source for sharing, but only those that publish, store, or transform the data should be sharing targets.

For Search, all applications that implement search can use the same interface to find things in different contexts, such as in mail, Internet search, and social network applications. Only applications that really need search should implement it. 

Finally, Pickers lets applications connect with local and network content, but also with other applications that connect with various online sites.

The next section dealt with Live Tiles. Icons are “antiquated” since they are static, Harris said. Instead, he suggested that developers create “tiles” for the Start screen that do more things. That might mean changing text or information (such as mail notifications) or even that you don’t need to open the app altogether (as may happen with a Weather application). Tiles should be more than icons; they should be extensions of the application. There are standard templates for tiles and developers need to create both small and large tiles. Users can create secondary tiles by “pinning” content from an app.

“Alive with activity,” is a concept which means bringing what’s great about the web to Windows through things like Live Tiles. Users tend to put such tiles on the first page of the Start screen. Within the Start screen, there aren’t folders, but there are groups.

Additionally, notifications can briefly bring up a pop-up screen with a notification (although users can turn that off).  No “junk drawer” for notifications exists, Harris said, urging developers to put that kind of information in a Live Tile instead. Again, there are templates for notifications, though most apps should be silent.

There are three ways to update tiles and notifications, including local and scheduled methods, but most people will instead use the new Windows Push Notification Service.

Application experience should “transcend the process” so that when you come back to an application, it should be as if you never left, Harris said. When you finish a level of a game, you should never have to beat that level again, on any device. Likewise, when you set up your preferences, they should follow you on multiple devices.  All this is made possible through Live Login, and every application automatically gets a small amount of cloud storage for storing these settings.

Applications will suspend after about five seconds, which means applications need to be saving their states automatically. This also lets the state migrate to new machines.

Finally, Harris urged the audience to adopt “the Metro design principles,” as developers need to have “pride in craftsmanship,” and embrace “fast and fluid” user interfaces. He told the audience that Windows was the most important ecosystem, and the new UI had “the biggest potential to change people’s lives.”

Platform for Metro Style Apps

In the next session, distinguished engineer Ales Holecek, demonstrated the underlying platform for building Metro applications, including the new Windows Runtime (WinRT) APIs and the new App Execution Environment.

You can create applications with unmanaged languages such as C and C++ or with managed languages such as Visual Basic and C# (with both using XAML). You can also use web tools such as HTML 5 and JavaScript.

For Win32 and .NET, Holecek said people’s investments would be preserved, as these applications will run under Windows 8. He withheld details beyond that. For instance, it is unclear to me if or how older applications can use the sharing, searching, and picking features available in the Metro UI applications.

Holecek built an application in C++ using XAML, an XML-based language used for presenting things on screen in Microsoft’s development frameworks. He showed a very simple “Hello World” application and how it worked with existing portable C++ libraries.  It looked pretty straightforward.

But the Metro Software Developers Kit lacks some capabilities of the desktop application. For instance, there is no concept of overlapping windows, so you can’t use message loops. There is no GDI support, since the company is committed to DirectX, which is hardware-accelerated and thus much faster.

The Metro-style application APIs include all sorts of things: fundamentals, specific media ones (visual effects and “PlayTo” for multiple devices), devices, communications, and the user interface.

Holecek used these APIs along with C#, taking the same XAML code used in the C++ example. He displayed a simple file picker and said there are many more asynchronous APIs to prevent applications from “hanging.” The file picker was written with only five lines of code, and it was immediately hooked up with the Skydrive service, as that is already part of the system.  Connecting up a webcam to the application took just two lines of code.

The App Execution Environment relies on the APIs and includes a broker to make sure they are running safely. A manifest is used to keep track of special permissions (such as using the camera). It can also suspend applications when they don’t need to be running. Such applications remain resident in memory but don’t use any resources; the scheduler ignores them.

Holecek built an application in HTML 5 and JavaScript that takes output from the webcam and connects it with an HTML 5 video stream. He used a CSS design layout that called APIs designed to align content to grids. This uses the same HTML engine as Internet Explorer, Microsoft is working with the W3C on new standards for layout and other features.

XAML and HTML 5 are on equal footing in creating the presentation layer for Metro applications, and the basic controls work across all the language. The “Contracts” feature enables the application to share with other applications (such as a Twitter code). The whole application took under 200 lines of JavaScript plus half a page of HTML 5 design code.

Lastly, Holecek affixed a C++ project that added visual effects to the captured Webcam images.  A more complex application that combined JavaScript and HTML with a C++ project and the standard metro UI controls resulted.  

While the applications store is not yet available to distribute the application, a declarative method for packaging the application was shown. All Metro applications must be digitally signed, Holecek said.

Tools For Building Metro Apps

In the final and most technical session of the afternoon, Microsoft’s Kieran Mockford and Chris Sells focused mainly on developing an application within Visual Studio Express.

VS Express aims to create more managed designs for applications, with things like grid controls and snap views, said Mockford.

Applications that use the templates will resize appropriately for running full-screen, aside an application that is “snapped” to the side of the screen, or the Snap application. The Expression Blend designer can now be included within Visual Studio.

Mockford and Sells built an application that uses Bing to gather data on “retro” computers, by entering C++, the new templates, Gridview controls, and adding asynchronous API calls.

Then they created an application in HTML 5 and JavaScript, displaying templates for JavaScript and integration with the Search contract. They brought the whole application into Expression Blend and used the grid templates to improve the layout, brought in web content, added animations, and changed the font display. All this was done in the service of creating a tile-based application for showing Channel 9 content.

In this demo, the duo developed across multiple machines with remote debugging, including debugging on one machine with the affected part of the application shown on another. In addition, they debugged across multiple machines using a simulator that shows how the application runs at different sizes and resolutions. The application scaled appropriately in portrait mode and worked with mouse and keyboard or touch simulation.   

Using the GPU to accelerate, Mockford and Sells demoed Direct3D. More to come on this in later sessions.