Hello World in Adobe Air
Recommended Links
Build Beautiful Apps: Download Flex Builder 3 Trial
Download the Open-source Flex 3 SDK
Free online Flex Training
Download the Tour de Flex application and explore Flex
The Flash Platform At A Glance PDF
This section sponsored by:
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.
This is what we're aiming for
HTML
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:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<b>Hello World</b>
</body>
</html>
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…
The XML
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.
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>test.html.HelloWorld</id>
<version>0.1</version>
<filename>HelloWorld</filename>
<initialWindow>
<content>HelloWorld.html</content>
<visible>true</visible>
<width>400</width>
<height>200</height>
</initialWindow>
</application>
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:
cd /Applications/MAMP/htdocs/HelloWorld
Once in there, you run a simple command:
adl app.xml
Terminal & Adobe Air in Action
Hey Presto! Your app opens up in Adobe Air - and hopefully, works! 
- Login or register to post comments
- 1563 reads
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
lucas hal replied on Sat, 2009/06/06 - 6:16am