Building your first HTML/Adobe AIR Application - Using Aptana

In my last blog entry, I covered some of the basics for getting started with HTML-based Adobe AIR applications. The intent was to give you a starting place for beginning to develop AIR applications. In today’s entry I’m going to talk a bit more about Aptana and how you can use it to create HTML based AIR applications. After this I’ll start getting into the demos I created for cfUnited and talking about the various features they demonstrate. To begin, head over to Aptana.com and download the IDE. It is 100% free. I’d recommend the Stand Alone version if you’ve never used the Eclipse platform before. Shoot, I’m pretty used to Eclipse and I still prefer the standalone. This will weigh in at around 95 megs so grab a cup of coffee.

After installing and running Aptana, the Welcome screen should appear. Notice the giant Plugins icon?

Click it and the very first one you will see (at least at the time of this blog entry) is the Adobe AIR 2.0 Beta. I believe the Beta tag is just for the plugin, not AIR 2 which is now final.

This will start the plugin installation process. For some odd reason, the UI will not actually select the plugin you asked it to install. In the screen shot below you can see that it isn’t checked. Yeah, um, ok. So check that.

Now, for the most part, you can just hit Ok, Accept, etc, for the rest of the process, but don’t screw up like I did and not click the checkbox on the certificate page at the end.

When it finishes, go ahead and let the application restart. You’re now ready to create an AIR project. Go to the file menu, project, and create a new web project. The first option will be Adobe AIR.

There are a lot of options here, and they are all important later on, but for now, you can get by with just entering a name. Internet Law dictates that your first project must be called HelloWorld. As before, you can accept all the defaults and just let the project creation finish.

You will end up with a new project and a few default files. Your main file should be named HelloWorld.html. This is a simple HTML file. You can leave it as is or quickly add a H1 tag if you want.

So how do you test the application? Two ways. The main way will be to run the application. Just hit the lovely, maybe not so obvious green arrow button:

You will then end up with a running AIR application! Of course, it probably doesn’t display anything if you didn’t edit the HTML. Even if you did, it won’t do anything fancy. That’s coming up later.

Finally - let’s talk packaging AIR applications. This is how you create the .air files users can download and run (if they have the runtime installed). For the most part, this too is a simple ‘click and go’ process. The only exception being that you need to create a certificate to go along with your AIR project. This is typically something you pay for, but AIR allows you to create self-signed certificates. They are definitely marked differently then commercial certs, but are fine for playing with AIR.

Packing an AIR application begins by clicking the .air icon (two to the right of the green icon). The very first time you do this you will see that you have no certificates.

Click the “Configure Certificates” link to bring up:

Click Add and enter information for your self-signed cert. Here is an example:

Which finally brings you back to the package form. Select the certificate you just created and enter the password. After that - just take the defaults and you’re good to go.

So… this was probably 100% obvious to most folks. But I wanted to go into more detail then what I was able to after CFUNITED. In the next entry I’ll talk more about what the AIR platform means for HTML applications and start showing off the samples. I want to be clear - I didn’t describe a heck of a lot. Aptana has other features for AIR development as well. But hopefully at this point you know enough to make your own project and start slinging code!

One final PS. In that nice little plugin icon at the Welcome Screen, you can also add Ajax support. I’d strongly recommend doing that to add jQuery support. You don’t need to. You can copy jQuery into any project. However doing this within Aptana means you can create a new project that has jQuery installed already.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments