Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Hello World in Adobe Air

DZone's Guide to

Hello World in Adobe Air

·
Free Resource

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
helloworld

Terminal & Adobe Air in Action

This is what we're aiming for

Hey Presto! Your app opens up in Adobe Air - and hopefully, works! :)

Topics:

Published at DZone with permission of Steve Reynolds. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}