This post is written without any special knowledge about the upcoming release of Windows 8. I’m relying on the already publicly known details that Windows 8 will support tablet devices to the full and enable developers to utilize their web skills building rich applications.
A very good friend of mine, Ingo Rammer, did a talk at NDC 2011 on HTML 5. One of the best tip I got from his talk, was to start using Adobe AIR as the shell for your HTML 5 applications. As you might not be aware of, Adobe AIR includes the WebKit browser engine which more or less supports some of the HTML 5 features.
That means you can build a rich desktop application in HTML 5 which have access to local resources, such as the file system. Another neat feature is the cross-platform support between Windows and Mac. Unfortunately Adobe has quit their support for Linux.
Get the Adobe AIR SDK
First thing first, get the Adobe AIR SDK. After downloading and unpacking, you should add the path to the bin folder to your paths environment variable. this makes it quicker to build your application.
Building your first application
Create a new folder for your application on your computer, preferably you should use a source control, such as Mercurial. This makes it easier to recover from human errors.
To start off, I suggest using the HTML 5 boilerplate. I suggest going through the custom build and remove all the backwards compatibility features, as you are only going to be building for the WebKit browser.
In this folder, you can add your stylesheets, graphics, html, javascript and other resources you will be using in your application.
I suggest creating a file named Launch.bat which can be used during development and testing to launch your application.
Content of Launch.bat: adl.exe “MyIncredibleApp-app.xml”
Then you need to create your MyIncredibleApp-app.xml file, which is the manifest definition for your application. All this really needs, is the default HTML page it should render when starting up. Here is an example from one of my own applications:
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/2.7">
<id>FlickrDownloadr</id>
<versionNumber>0.1</versionNumber>
<filename>Flickr Downloadr</filename>
<initialWindow>
<content>Flickr Downloadr.html</content>
<visible>true</visible>
<width>800</width>
<height>600</height>
</initialWindow>
<copyright>Copyright (c) 2006-2011 Sondre Bjellås.</copyright>
<icon>
<image16x16>icons/Flickr-Downloadr-16x16.png</image16x16>
<image32x32>icons/Flickr-Downloadr-32x32.png</image32x32>
<image48x48>icons/Flickr-Downloadr-48x48.png</image48x48>
<image128x128>icons/Flickr-Downloadr-128x128.png</image128x128>
</icon>
</application>
The next very important step, is to copy the Adobe AIR JavaScript files into your folder. Depending on your installation path, you should find the AIRAliases.js and AIRIntrospector.js files located here: AdobeAIRSDK\frameworks\libs\air. Copy these two files into your project and make sure you reference the AIRAliases.js in your web page. The AIRIntrospector you won’t be needing unless you are doing advanced debugging.
<script src=”AIRAliases.js”></script>
Make a wrapper around the JavaScript API
Going forward, with advances in browsers such as Internet Explorer, Chrome, FireFox and Opera – you might see that some actually already today – will support access to local resources. That means you can build web applications that doesn’t required Adobe AIR as a delivery mechanism.
For this reason, I suggest writing your own wrapper around the JavaScript API included with Adobe AIR. That means you won’t be directly dependent on Adobe AIR and it will make the transition to support other platforms and browser much smoother.
Here is an example on how to show a folder dialog using the Adobe AIR JavaScript SDK:
var file = new air.File();
file.addEventListener(air.Event.SELECT, dirSelected);
file.browseForDirectory("Select a directory where you want to save photos.");
Launching your rich desktop web application
Next step is to complete your HTML page, I would suggest downloading libraries such as jQuery UI to add animations and other great features. While this post does not explain how to go from a development environment to releasing your app, I suggest referring to the Adobe AIR SDK documentation for additional features.
This is a starting point on how to get started and possibly preparing for a possible future of building great Windows 8 web applications.
Here is a screenshot of one of my own web based rich desktop applications:
