Pew Pew Chronicles: Hello, Metro!

This is part two of a series of blog posts about a crazy journey that eventually led to Pew Pew becoming one of the first apps in Microsoft’s App Store. On a long flight from Seattle to Omaha I learned about Metro and got hooked. I decided to dive into Metro at around 12/20/2011.

 

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:

  1. I downloaded the Windows 8 Developer Preview ISO file (which is not available anymore, instead just use Windows 8 Consumer Preview).
  2. I created an empty vmware image and installed Windows 8 from the ISO file through vmware’s CD drive emulator.
  3. 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:

// default.js
(function () {
  "use strict";
   var app = WinJS.Application;
   app.onactivated = function (eventObject) {
     if (eventObject.detail.kind ===
         Windows.ApplicationModel.Activation.ActivationKind.launch) {
       if (eventObject.detail.previousExecutionState !==
           Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
         // TODO: This application has been newly launched. // Initialize your application here.
       } else {
         // TODO: This application has been reactivated from suspension.
         // Restore application state here.
       }
       WinJS.UI.processAll();
     }
   };

   app.oncheckpoint = function (eventObject) {
     // TODO: This application is about to be suspended. Save any state
     // that needs to persist across suspensions here. You might use the
     // WinJS.Application.sessionState object, which is automatically
     // saved and restored across suspension. If you need to complete an
     // asynchronous operation before your application is suspended, call
     // eventObject.setPromise().
   };
   app.start();
 })();

 

In order to test my theory that onactivated() would be eventually called towards the end of the launch sequence I added a trace statement to WinJS.Application.onactivated:

   app.onactivated = function (eventObject) {
     if (eventObject.detail.kind ===
         Windows.ApplicationModel.Activation.ActivationKind.launch) {
       WinJS.UI.processAll();
       console.info( "Hello, Metro" );
     }
   };

There it was in my debug console: Hello, Metro.

 

Documentation

For an hour or so I just browsed through the samples until implementation patterns seemed to emerge then I decided to get serious about studying the Windows Runtime API. Fortunately Microsoft’s online API reference for Windows Runtime and Windows Library for JavaScript documentation for Metro was (and still is) excellent.

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:

// Original SpriteExample.js
 (function(__global) {
 ...
 })(window);
// Modified SpriteExample.js
function loadSpriteExample(__global) {
...
};

This change allowed me to defer the load sequence of my SpriteExample. I wanted to load SpriteExample at the end of app.onactivated, where I had put my trace statement:

  app.onactivated = function (eventObject) {
     if (eventObject.detail.kind ===
         Windows.ApplicationModel.Activation.ActivationKind.launch) {
       WinJS.UI.processAll();
       loadSpriteExample(window);
     }
   };

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…