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.
Visual Studio 11
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:
- DOM Explorer Window: Dig through the HTML Document Object Model and see styles by element.
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?
Portions Copyright © 2011 Microsoft Corporation. Reproduced with permission from Microsoft Corporation. All rights reserved.