Setting up Metro on a Mac

After a few relaxing days of catching up with my in-laws and eating way too much good food it was time to get my hands dirty with Metro. I only brought my MacPro laptop to Omaha. So how does one install Microsoft’s Windows 8 Developer Preview on a Mac? This is how I did it:

I downloaded the Windows 8 Developer Preview ISO file (which is not available anymore, instead just use Windows 8 Consumer Preview).

I created an empty vmware image and installed Windows 8 from the ISO file through vmware’s CD drive emulator.

I took a snapshot called “Windows 8 Developer Preview”

This may surprise you, but I would have done the same on my Windows machine at work. I highly recommend sandboxing new operating system versions that are under development with virtualization software like VMware or VirtualBox. This method just saves you many troubles. Take many snapshots and just roll-back if things get too messy (as things tend to during software development).

Launching Metro

Then I launched Windows 8 in my sanitized vmware sandbox and made myself familiar with my new environment. Metro reminded me of Windows 7 for phones. It was all very “touchy.” I have to admit, at first I didn’t like the Tile metaphor. Tiles remind me of bathrooms and hospitals. They break into shards when they hit the ground and they are cold unless you have heated floors. I know, UI design is more difficult than one thinks it is, but I wondered, why didn’t they choose something organic like Leaves instead? Perhaps even Pillows?

Developer Tools

As far as I can remember Windows 8 Developer Preview from September 2011 came with Visual Studio 11 Express pre-installed. In case you run the latest Windows 8 Consumer Preview you need to install the Developer Tools and SDK with Visual Studio 11 Express Beta in a separate step. VS 11 looks pretty much like the previous versions except for a few new options like creating Metro Style JavaScript App projects. This all looked pretty encouraging. I was eager to write my first Metro Style App, Hello World.

Hello, Metro

Of course, I had no idea how to write a simple Hello World Metro Style app. So I downloaded the Windows 8 Sample Pack and looked for a Hello World sample. There was one example called “DirectWrite hello world sample.” But that didn’t look simple at all. I believe I ended up picking the “App tiles and badges sample” and built it. When I hit the debug button VS linked the app, deployed it to Metro and launched it without problems. That was easy.

Just for fun I decided to create a blank Metro Style JavaScript App Project and sniff around a little bit. VS 11 created a bunch of files, one of them was named default.html, which included default.js . That had to be the entry point! Sure enough, when I opened default.js I saw that WinJS.Application.start() brings the app to life, which would eventually trigger the call to WinJS.Application.onactivated – a function that I could, for my convenience, override:

I noticed two namespaces: Windows.* and WinJS.* . Apparently, the Windows.* namespace corresponds to Windows Runtime, which “is designed for use with JavaScript, C#, Visual Basic, and C++”. The WinJS.* namespace on the other hand refers to “the Windows Library for JavaScript is a set of JavaScript and CSS files that make it easier to create Metro style apps using JavaScript”.

I was feeling ready to try running a simple cross-compiled app. Why not SpriteExample?

SpriteExample for Metro

One of the first ActionScript apps (if not the first one) I ever cross-compiled to JavaScript was SpriteExample.as . I simply imported my cross-compiled SpriteExample.js into the empty “Hello, Metro” project and made a small change:

The only step left was adding a script tag to default.html, which loads SpriteExample.js:

<script src="/js/SpriteExample.js"></script>

Frankly, I was shocked when I saw SpriteExample running in Metro without problems.

This all was way too easy. Could it be that it was in fact super easy to develop Metro Style apps using ActionScript and my cross-compiler? I had to try a more complicated project. I was convinced, at one point reality would stop me from doing what I was doing. So I chose Pew Pew as my next project…