I was inspired to write this post by several recent conversations. I was in a debate about whether with the Flex/Flash platform you could easily repurpose content to the desktop using Adobe AIR (and vice-versa), but that you couldn’t easily do that with PhoneGap applications. (My stance was that yes, you could repurpose content.)
I wanted to make sure that people were aware that you can repurpose your content, and here’s an example of how.
A while back, I wrote a sample PhoneGap application that allows you to browse information from the 2010 US Census. You can read more about this application and download the source code here. This application supports lots of platforms… iOS, Android, BlackBerry, and web (everything except IE because I was targetting WebKit browsers).
While this application is a mobile app wrapped in the PhoneGap container, I actually didn’t use any PhoneGap-specific libraries, so it was very easy to repurpose as a desktop application. I created an AIR version of this application, which you can download at:
You can build complete AIR applications using HTML and JavaScript, even with full access to AIR APIs (network, file access, etc.). You can read more about building AIR apps with HTML and JavaScript at: http://help.adobe.com/en_US/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html
I had to use my Android 2.x branch of the US Census Browser code because the WebKit instance inside of AIR doesn’t support SVG. I also changed the container scrolling to use normal CSS “overflow: auto” instead of using iScroll for touch-based scrolling. There were a few other one-off CSS changes to tweak the layout in the AIR web container, but otherwise the code is identical.
You just need to create an AIR application XML file and point it to your HTML content, and then package it using ADT.
Here’s my AIR application XML:
[xml]<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/3.1">
<id>com.tricedesigns.USCensusBrowser</id>
<versionNumber>1.0</versionNumber>
<filename>USCensusBrowser</filename>
<name>US Census Browser</name>
<initialWindow>
<content>www/index.html</content>
<visible>true</visible>
<width>1024</width>
<height>768</height>
<minSize>800 600</minSize>
</initialWindow>
<icon>
<image16x16>icons/icon16.png</image16x16>
<image32x32>icons/icon32.png</image32x32>
<image48x48>icons/icon48.png</image48x48>
<image128x128>icons/icon128.png</image128x128>
</icon>
</application>
[/xml]
Notice that the “content” node just points to my “index.html” file.
Here’s the command to package it:
[bash]adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air HelloWorld-app.xml *[/bash]
You can read more about this process in the Adobe AIR documentation.
If you were using PhoneGap APIs, you would have to migrate your code to take advantage of AIR APIs, but all other HTML/CSS/JS could be reused with minimal changes.
Even though I used AIR for this example, AIR isn’t the only game in town for HTML-based desktop applications… There’s an open source project called MacGap, you can use HTA for Windows, and it’s not hard to write a HTML/Web View wrapper for any platform. It’s even been reported that you are going to be able to write apps for Windows 8 purely using HTML & JS, and you would be able to repurpose your code for this as well.
You can check out the AIR version of the US Census Browser at:
Enjoy!