Building JavaScript / HTML based Applications using Adobe Air for FREE

Jun 10, 2009  • Javascript

As a web developer I use JavaScript, HTML and CSS a lot. I do however build desktop applications too, but can’t use those same tools/languages to build them. So, for quite some time now I’ve wanted to be able to build Desktop Applications using the same JavaScript, HTML and CSS that I use to build Web Applications. Now with the help of Adobe AIR it can finally be done with ease, and even have multi-platform support.

In this post I’m going to discuss the basics of creating a JavaScript/HTML based Desktop Application using Adobe AIR, and point you to some of the online resources that have helped me to get started.

Also, just in case you didn’t know, you can create/build JavaScript / HTML based Adobe AIR applications for FREE. The runtime and sdk are both free.

Getting Started with Adobe AIR

First you’ll need to get the following two things installed:

Here’s a couple excellent resources I found to getting started with Adobe AIR and JavaScript:

You can follow those two guides linked to above to get you started using Adobe AIR to build JavaScript / HTML based Desktop Applications.

Setting Up the Adobe AIR SDK on Windows

I had a couple small setup issues with getting the Adobe AIR SDK setup on my Windows development box.

The Adobe AIR SDK download is just a Zip Archive containing the files necessary for the SDK; it contains no setup EXE. To get it setup, you’ll need to follow the below steps:

  • Extract the SDK to some folder of your choosing. For Example: *C:\AdobeAIRSDK*
  • Add the *“C:\AdobeAIRSDK\bin” *folder to the System Path so you can execute it easily from within the Command Line.

Also, to use the Adobe Developer Tool (adt) you’ll need Java installed, and you’ll need to make sure that the path to where Java is installed is also included within the System Path as described above.

To edit the “System Path” in Windows just follow these steps:

  • Open the System Properties dialog box and click the Advanced tab. You can find this in the System settings within the Control Panel.
  • Click the Environment Variables button.
  • Select the PATH entry and then click the Edit button. Add the desired path to the end of the current variable value, separating it from previous values with a semicolon. For Example *“;C:\AdobeAIRSDK\bin”*
  • Click OK to Save.

Tips to Make Building and Testing Easier

Here are some simple tips to make building and testing your applications easier.

Create .BAT files to Build and Test

One thing that you’’ll want to do to make it a little easier to Build (using adt) and Test (using adl) your HTML-based Adobe AIR applications is create some simple “build.bat” and “test.bat” DOS Batch files so you don’t have to type in the command-line parameters every time you want to build or test your application.

build.bat example:

adt –package –storetype pkcs12 –keystore certificate MyApp.air application.xml .

test.bat example:

adl application.xml

This way you can just simply double-click on the specific .BAT file within Windows Explorer to either Build or Test your application.

Also, in the above build.bat example, my Certificate file is simply named “certificate”, and it’s a self-signed certificate.

Place Application Files within a Sub-Folder

If you rename your “.air” file that was built using the above mentioned .BAT file to be a “.ZIP” file and then open it, you’ll notice that the .BAT files and your Certificate were included within the Build. This is because the above mentioned call to “adt” tells it to include all files and folders within the build. To prevent the .BAT files and Certificate from being included, you’ll need to place them within a separate folder.

The easiest way to do this is to place all you Application files within a Sub-Folder within the main folder that your .BAT files and Certificate are located. For example you could name it “App_Files”. Then make the following changes to the .BAT files to point it to the new file/folder locations appropriately:

build.bat example:

cd App_Files adt –package –storetype pkcs12 –keystore ../certificate ../MyApp.air application.xml .

test.bat example

cd App_Files adl application.xml

Also, one thing to note about the above modified “build.bat” file is that it will place the Built “.air” file/application within the Main folder where the .BAT files and Certificate are located.

Creating a Self-Signed Certificate

One thing that you’ll notice above is that I’m using a Certificate file names “certificate”. This is a self-signed certificate that I generated using the “adt” tool. To generate a self-signed certificate, you can execute “adt” using the following command-line parameters:

adt –certificate –cn SelfSigned 1024-RSA certificate.pfx samplePassword

Conclusion

The above is pretty much the extent of my knowledge of building Adobe AIR applications using JavaScript / HTML at the time of this writing. I decided to take a few minutes to figure out the basics, so I thought I’d share some of the tidbits I found out.

Since, I’ve wanted to build desktop applications using JavaScript, HTML and CSS for some time now I find it relieving that it can be done with Adobe AIR and for Free.