Building your first HTML/Adobe AIR Application

This post is more than 2 years old.

This week I gave my first ever presentation on building HTML-based AIR applications. You can find the slides and code from that presentation here. I thought it would be nice to spend a bit of time talking about this topic on the blog in a slower, more verbose manner than I had time for at CFUNITED. This will also allow us to go in different directions, try new things, etc. I'm looking to you guys for feedback on what is covered and to provide direction on where to go next. I thought it would be great to simply start off with some basic links and resources to get you started. So enough preamble - lets get started.

1) What is AIR?
AIR (technically Adobe AIR) is a runtime for applications built with Flex or HTML. Basically, it's the promise of Java's "Write Once/Run Everywhere" using web technologies. Is it perfectly "Write Once/Run Everywhere"? Heck no. But it's pretty darn well close and a great product. Obviously I'm biased but I think it is a great thing for ColdFusion developers to pick up to help compliment their existing skills.

At the end of the day - it is a way to use HTML/JavaScript or Flash/Flex to build cross platform applications. (And I should warn you now - I don't work for Adobe marketing. I'm sure there are longer, better descriptions. This is the way I understand and explain it to others.)

2) What do you need to get started?
At minimum all you need is the AIR SDK. You can grab that here. You can grab the runtime too if you want but the SDK will have everything.

3) Ok, but what do I really need?
The SDK will give you the command line tools necessary to run and package up AIR applications, but honestly, you want to use a visual tool/editor to build this stuff. I strongly recommend downloading and installing Aptana Studio 2. CFBuilder uses Aptana bits in it, and you can do AIR work within CFBuilder, but I prefer the separate tool. It's just how I operate. Aptana is 100% free. It works on both Windows and the Mac. It also comes with a butt load (techincal term) of highly focused, simple AIR demos. You can right click on these samples, import as a project, and run them immediately. It makes playing with various features (file access, database access, etc) much easier.

You can use Dreamweaver too. There is an AIR plugin. I can't comment on it as I haven't used it.

4) Where are the docs?
There is a whole section at Adobe just for HTML-based AIR development: For Ajax developers. This section contains docs, demos, and articles all focused on this type of AIR development. It was extremely helpful to me when I was preparing for my presentation.

5) Is there a particular type of JavaScript you have to use?
Yes, you have to use jQuery when working with Adobe AIR.

Ok... I'm kidding. No - seriously - there is no requirement that any particular type of JavaScript is supported over any other. Most folks tend to use either Ext or jQuery.

6) Are there any actual apps out there?
Yes, check out the Samples page at Adobe. I'm not so sure it is fair to call each of these full "apps" (in my mind, I'm thinking of apps as in real products, supported and constantly developed, etc) but they do give you some examples. I'd love to see more apps listed here, and if folks know of any that they want to call attention too (commercial or not!) please leave a comment.

So what's next? In the next entry I'll walk through the steps needed to create an AIR project using Aptana. (So your homework is to download and install Aptana before then!)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Jen posted on 8/2/2010 at 9:47 PM

Do you need the SDK if you download Aptana?

Comment 2 by Raymond Camden posted on 8/2/2010 at 9:48 PM

Good question - I think so. Let me test w/a vanilla install of Aptana later today.

Comment 3 by ppshein posted on 8/3/2010 at 9:32 AM

I think, it doesn't need Adobe Air SDK if want to compile in Aptana. But, I need to install Adobe Air runtime.

Comment 4 by Raymond Camden posted on 8/3/2010 at 4:16 PM

Well, if it has the SDK, it should have the runtime. I didn't get a chance to reinstall yesterday, but I will today.

Comment 5 by Raymond Camden posted on 8/3/2010 at 9:50 PM

Ok, I removed the AIR runtime and did some testing. With Aptana, I was able to run my AIR projects. I was able to package the AIR app. I was NOT able to run the .air file though as I had no system level AIR runtime. So in theory, you don't need the runtime to do most of your work. You can click Run all day long in Aptana, but at some point you really should install it. Just because.

Comment 6 by Raymond Camden posted on 8/3/2010 at 11:32 PM

See related entries above. I posted the follow up.

Comment 7 by Jason Dean posted on 8/4/2010 at 1:12 AM

One interesting (and nice) thing about Aptana is that you can point it at any SDK as well. So if I want to I can tell Aptana to run my application in AIR 1.0, 1.5, or 2.0 for compatibility testing.

I recently used this feature because I had users reporting errors after upgrading to 2.0. We had not upgraded, and things work fine. After trying both versions I saw that they were right.

So to answer the original question, Aptana comes with an SDK, which includes the runtime, so you don't need to download one separately, but you may want to keep separate copies of the SDK archived for testing, because when Aptana upgrades the default one it will always put you at the most recent version.

Comment 8 by Raymond Camden posted on 8/4/2010 at 1:19 AM

You say it includes the runtime - you sure? I'm still not able to run .air files on the test machine I used. I could debug/run em just fine from Aptana, but not actually run the .air file.

Comment 9 by Jason Dean posted on 8/4/2010 at 1:41 AM

Right, you can run them because it includes the runtime in the SDK.

It doe not install the runtime on the machine, it uses them right out of the SDK which is how I am able to run with different versions based on my setup.

Even if I do go and install the runtime on my machine for usign .air application, I can still run/debug my apps from Aptana using a different runtime, which is the one in the SDK that I have selected.

Does that make sense? It feels hard to explain.

Comment 10 by Raymond Camden posted on 8/4/2010 at 1:44 AM

No it makes sense - I guess we should clarify "run". :) There is the run you do via Aptana, and then the run of the AIR file, which Aptana by itself won't let you do since it is really an OS level thing.

Truth be told- any self-respecting AIR developer should just have the darn runtime already. ;) They can skip the SDK though if they want to keep things simple.

Comment 11 by Jason Dean posted on 8/4/2010 at 3:17 AM

Well, they can't really skip the SDK if they are a developer. They need the SDK to debug/package. But Aptana comes with the SDK, so they don't need to get it separately. I suspect that is what you mean.

Comment 12 by Raymond Camden posted on 8/4/2010 at 4:07 AM

Aye, better said. Thanks!

Comment 13 by niks posted on 2/16/2011 at 1:37 PM

Hi ,
is there any way to use HTML/JavaScript and Flash to build an AIR application and publish it from flash?

Comment 14 by Raymond Camden posted on 2/17/2011 at 2:51 AM

@niks: If you mean to 'create an AIR app' - not really. To build an AIR app you need to run Adobe's command line programs to create a build. AIR can run native programs. So you _could_ possibly do it.

What's easier is using an AIR app to spit out AIR code - which is what AIRLaunchpad does.