January 4, 2012 telerik win8

Metro style JS Apps in VS11 & Blend

DISCLAIMER: This post is targeted at the //build/ version of the Windows Developer Preview (aka Windows 8). Things are likely to change with future releases. On your head be it.

In the previous post in this series, we discussed how to build a deploy a Metro style app built with JavaScript completely from the command line. That’s a useful exercise to prove that there’s no real magic, but I don’t expect most people to do things that way. I expect most people to use Visual Studio.

Visual Studio 11

Microsoft Visual Studio 11 Express for Windows Developer Preview (aka VS11) is the premiere tool for developing applications for Windows and has been for quite a while. It provides project management for keeping your application’s source files together, integrated build, deployment and launching support, HTML, CSS, JavaScript, graphics and Metro style app manifest editing, debugging and a whole lot more. Visual Studio 11 Express comes for free and includes everything you need to build, package and deploy your Metro style apps.

Out of the box, VS11 provides several project templates to get you started:

The most basic template is the Blank Application project template. Running it produces a project file (.wwaproj) along with nearly the same set of files we used to create the first sample project from the command line. The Blank project template also creates some additional files, which we’ll discuss presently.

The format and the contents of the package.appxmanifest file is the same as the appxmanifest.xml file we’ve already seen, but the .appxmanifest extension allows the file to have a custom editor in VS11:

If you open the provided default.html, you’ll see it’s a nearly empty vessel, waiting to accept your creativity. The provided default.js (under the js folder) is similarly nearly empty, with just some skeleton code that we’ll discuss later.

To debug your application, choose Debug | Start Debugging, which gives you the kinds of debugging tools an experienced Visual Studio user is used to:

Debugger: Set breakpoints, step and watch JavaScript data and behavior.
JavaScript Console Window: Interact with JavaScript objects at a command line.
DOM Explorer Window: Dig through the HTML Document Object Model and see styles by element.
Call Stack: See the current JavaScript call stack.

In addition to debugging your application on the local machine (which is the default), you have two other options: remote machine and the simulator. You can change these options by choosing Project | Properties and selecting the debugger to launch:

The idea of remote machine debugging is that you can develop on a high-powered developer machine but debug on a more modest consumer-grade machine, like a tablet. This is handy to make sure your application works well on the type of machines you’re targeting.

The simulator option, on the other hand, is meant to let you run another little machine on the machine you’re already running. The simulator is a remote access session that’s configured to allow you to simulate various resolutions, landscape and portrait rotations and touch, even if you’re not using a touch-capable device:

And as that if that weren’t enough, Visual Studio is not the only tool you’ve got in the drawer. If you’d like a WYSIWYG design experience for the visual portion of your application, you’ve got Blend.

Expression Blend 5

Previous version of Blend focused on the XAML developer. Microsoft Expression Blend 5 Developer Preview (aka Blend), however, adds HTML support for building Metro style JS apps specifically. Blend comes with the following features for designing and building Metro/JS apps:

Integration with Visual Studio: You can load the same projects in both VS and Blend. In fact, you can load the project you’re currently working on in VS by right-clicking on a project in the Solution Explorer and choose Open in Expression Blend.
Project Templates: Blend and Visual Studio have the same set of project templates.
WYSIWYG Design: Each page of your application is laid out as you’d see it when the app is running because Blend is actually running your application to display it accurately as you edit.
Interactive Design: You can throw a switch in Blend to actually run your application interactively as you navigate page-to-page, then when you get to a page you’d like to design, you can flip the switch again and edit your application. Talk about a quick edit-test cycle!
Tool Pallet: The full set of controls and options are available from a tool pallet and property editor.
Layout Simulator: In the same way that VS provides a device simulator, Blend allows your application to be run and edited in one of several sizes and rotations.

Here’s Blend in action on the “Hello” sample:

Those of you familiar with Blend will notice many similarities between the XAML version and the HTML version.

Where Are We?

At this point, you have all you need to know to get started building Metro/JS apps using HTML5, CSS3, JavaScript, SVG, etc. (assuming you know HTML5, CSS3, JavaScript, SVG and et cetera). Next time, I’ll introduce the library built to bridge the two worlds of the WinRT and the web platform — WinJS.