A couple of days ago I created my first Adobe Air HTML/Ajax app. Getting from a standard web app to Adobe Air is quite simple it turns out, and in this short article I’ll show you how to do it.
Create some HTML in a place where you can access it on your local web server. I say this so that you can run it properly for future development. I’m running MAMP on OS X, so I’m creating a folder called “HelloWorld” in my /MAMP/Htdocs folder. Within your newly created “HelloWorld” folder, create a new .html file called HelloWorld.html and place the following code into it:
Great, done. Check this out in your browser of choice, but best to go with Safari or Chrome as they both use the webkit rendering engine (as does Adobe Air on all platforms). Obviously checking this simple script is unnecessary really, but once you get into your development it’ll be far easier and quicker to check in one of these two browsers than run your app within Air for quick looks at small changes.
Anyway, I digress…
All Adobe Air apps also have an XML file which details the meta data of your application, like app name, version of Adobe Air it works with etc etc. Create a file called app.xml within your “HelloWorld” folder.
In the code above I’ve given the app a unique identifier, version number, and also specified the folder name as part of the <filename> parameter.
I also tell Air that the first window it shows should call the HelloWorld.html file, and it should be 400×200px in size. There is more to this XML file that you can add, like app icons etc - full details can be found here.
Running your app
Now that the setup is complete, you need to download the Adobe Air SDK. The SDK contains amongst man other things, a small executable within the /bin folder called “adl”. “adl” is short for Air Debug Launcher - when called it’ll boot up your application within Adobe Air. Best thing to do here is place the SDK contents somewhere easily accessible - such as the Applications folder on Mac OS X, or the C:\ on Windows. add the /bin folder to the path variables so that you can call “adl” from the terminal or cmd. For instructions on how to do this go here for OS X and here for Windows. Beware you may need to reboot after changing this to force it to work. In my case, I had to restart Terminal at least.
Once setup, you need to navigate to your “HelloWorld” folder in Terminal or cmd. I did the following:
Once in there, you run a simple command:
Hey Presto! Your app opens up in Adobe Air - and hopefully, works!