Adobe AIR Tutorial for HTML / JavaScript Developers

February 25, 2008
web

I spent a some time this weekend preparing for the Adobe AIR & Flex 3 Launch Event at my ColdFusion user group. One thing I wanted to show people was how to build a simple Adobe AIR Desktop Application using HTML & JavaScript.

I found the AIR Platform to be both powerful, and very easy to develop with. You really just have to spend a few minutes to see how easy it is!

I mean no disrespect to Flash, and Flex but the single most appealing capability of Adobe AIR is that you can build desktop applications in JavaScript and HTML. Two languages that nearly everyone reading this blog has undoubtedly used, and is probably quite good at already.

Adobe AIR also has an embedded database SQLite, which is an SQL92 & ACID compliant database engine with support for storing databases of up to 1TB. You can use this embedded database in your AIR Apps, and send SQL queries to it using JavaScript!

The learning curve for building an Air Application if you already know JavaScript and HTML is quite small. Run through this quick tutorial and you will be unstoppable!

Step 1 - Install Adobe AIR & the Adobe AIR SDK

If you haven't done so already, head over to Adobe to download and install the Adobe AIR Runtime, and the Adobe AIR SDK.

When you install the Adobe AIR SDK, you will want to add it's bin/ directory to your environment path.

Step 2 - Create Some Directories

Next we need to create some directories for our code, create the following directories:

/appname/
/appname/source/
/appname/source/icons/
/appname/build/

Step 3 - Create an Application Descriptor

Your application descriptor is an XML file that sets some properties for your application.

Let's call this file application.xml and place it in /appname/source/

<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.appname </id>
  <version>1.0 </version>
  <filename>AppName </filename>
  <initialWindow>
    <content>index.html </content>
    <visible>true </visible>
    <width>600</width>
    <height>600</height>
  </initialWindow>
  <icon>
    <image16x16>icons/appname-16.png</image16x16>
    <image32x32>icons/appname-32.png</image32x32>
    <image48x48>icons/appname-48.png</image48x48>
    <image128x128>icons/appname-128.png</image128x128>
  </icon>
</application>

It should be pretty obvious what to put for all the values, the icon values will be used as your application icon, you can omit these if you don't really want to create the PNG's, but it's kind of cool to see your own icons.

There are a lot more optional tags you can add, check out the templates/descriptor-template.xml file in the Air SDK.

Step 4 - Create your Application

The next step can be as detailed as you like, but really all you need to do is create an index.html file.

<html>
<head>
  <title>My Window Title</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

If you want to add CSS, JavaScript, or images, you can create subfolders in your /appname/source/ folder for those assets, and use them just like you would in a normal web application.

Step 5 - Test your Application

You are probably getting pretty anxious to test your new Adobe AIR application, to do that it's pretty simple.

Open up a command prompt, or shell and navigate to /appname/source/ then run the following command:

adl application.xml

If all goes well your application should launch. There is a good chance however that you ignored my suggestion to add the airsdk/bin directory to your system environment path, in which case you got something like adl not found. If that is the case then simply append the full path to your SDK bin to the command, for example:

c:\air\bin\adl application.xml

Step 6 - Package Your Application

Once you have tested your application, or are ready to show your friends, or just want see how your icon looks in the Dock you are ready to packing your Air Application.

This step will be a bit cumbersome the first time because all Adobe Air application code must be digitally signed. Code signing, is a bit like using SSL, you get a certificate from a trusted source, and then people will know who wrote the application. This is important because the Adobe AIR platform allows you to access local files, and do all sorts of things that could really screw things up.

Chances are you really just want to show your new application to a few people, and not the entire world. If that's the case then you can easily create a self signed certificate. It is important that the Certificate is not placed in your source directory, so let's place it in the root of our application: /appname/

adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.pfx password

Now once we have a code signing certificate we can create an Air application Package. Change directories back into source and run:

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

You should now have an AppName.air file that you can send to your friends, or simply run it on your own computer.

References



Related Entries

18 people found this page useful, what do you think?

Trackbacks

Comments

Straight and to the point. Thank you much, this was just was I was looking for.
You're Welcome Rob.
Step 7. realize AIR is not being release for linux, regardless of adobe promises to support cross platform computing.
@WrongWay What leads you to think AIR won't be released on linux? They are currently accepting beta tests for AIR on linux, email: helptesterairlinux@adobe.com See http://www.beedigital.net/blog/?p=1863 for more info.
hi pete, outstanding example! thanks much. i had a little bit of a snag when trying to replicate it, as the ADT tool was saying the paths to the PNGs was "unsupported format". however, i got it to run eventually by commenting out the ICON node in application.xml and running the command-line tools. baby steps. i'll figure it out. :-)
Great tutorial - just what is needed! Simplicity above all, unfortunately adobe sites are not that simple most of the times. I have followed all the steps, my application launches successfully. I have also issued a temp certificate as per your instructions, but when I try to package I get a message "could not load keystore file (password may be incorrect)". I guess the password is the one that is set in the certificate generation step, right? Still this doesn't work ... any advice? thanks!
hi i want to know how to config and use ajax in eclipse environment
Thanks for the tutorial. I've just successfully created a simple application under Ubuntu and it seems that Adobe does a good job moving towards Linux. I hope they'll keep it up.
Hi, Do you have any example to use database with html, in air.?
I have followed all the steps, my application launches successfully. I have also issued a temp certificate as per your instructions, but when I try to package I get a message "could not load keystore file (password may be incorrect)". I guess the password is the one that is set in the certificate generation step, right? Still this doesn't work ... me too !!
I have followed all the steps, my application launches successfully. I have also issued a temp certificate as per your instructions, but when I try to package I get a message "could not load keystore file (password may be incorrect)". I guess the password is the one that is set in the certificate generation step, right? Still this doesn't work ... I also have this...
Just a quick comment. In case you encounter the error message "application descriptor not found", make sure your current working directory is that of the application when you issue the adl (c:\...path\adl) command.
Hi, me again. When compiling to exec, I noticed Ubuntu didn't like trailing spaces after some values in between the XML tags. Also... If you get a time stamp error, just add -tsa none after the name of the certificate and... check out a free ebook called AIR for Javascript Developers
Hi thanks for the tutorial its awesome . It helped me a lot in my work , i am still at the beginner level. Can you please point me to a direction where i can learn more about the adt command line options also for the the application xml ? thanks in advance . isnain
Hi Isnain, Check it out at http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7fd7.html :-)
could not load keystore file (password may be incorrect)" is caused by typing "adt ?certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword", where samplePassword is you need to type pkcs12
Thanks. it a nice step by step example. at the final step while creating .air file i m getting error "Could not generate timestamp: Connection timed out: connect" . Plz help me out.
"could not load keystore file (password may be incorrect)" Run the package command and just type the password that at the time, certificate was created.Press Enter and this will work
ptional, not displayed on site, gravatar enable
I've got a problem when i do the command "adt" i have the error : "Java is not reconize as an internal command..."
What's the matter ?
The adl command works well. Thanks for your help.
The problem I ran into is: at least one file is required when I tried to package my application from running the above packaging code. Any suggestions?
Disregard my last comment... I was leaving out the . [dot] after the application.xml
Thanks. it a nice step by step example. at the final step while creating .air file i m getting error "Could not generate timestamp: Connection timed out: connect" . Plz help me out.

Me too :(
Hi

Excellent guide, this was so great for getting started. What I'm looking to do is create an AIR app that can make mysql calls to a remote server. Can someone point me in the right direction! Thank you!
Hi,

Thanks for you work. I tried the adl -package but I got this error message... could not load keystore file (password may be incorrect).
Hi,
thanks for the training really appreciate it, can i deploy my coldfusion code that connects to the database with air.
Excellent tutorial. I copied icons from another example otherwise you should comment out those lines. Also I had to type password as the password to get it to work.
Excellent tutorial. I copied icons from another example otherwise you should comment out those lines. Also I had to type password as the password to get it to work.
For all the people getting the error

"Could not generate timestamp: Connection timed out: connect"

-> you need a working/active internet connection on your computer

so, be sure you have one ;)
Excellent, gonna try tonight...
Hi,

This is the good article on javascript
Hello,

Given tutorial on Adobe AIR Tutorial for HTML / JavaScript Developers is good.

Deep from Website Development Company : http://www.e-profitbooster.com

Our services :
• Website Designing
• Web Development
• PHP Development
• ASP.NET Development
• E-Commerce Website
• Website Re-designing and Maintenance
• Banner Designing
• E-Learning
• Domain Services and Maintenance
Hi,
I did everything step by step like your good example, but when I tryed to pack application I got an error:
File C:\Users\piRatas\Desktop\Air\source\application.xml is not a valid AIRI or AIR file
@pi-Ratas Dude u forgot the dot (current dir) at the end of the command :

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml <b>.</b> <-
To whom concerning: "could not load keystore file (password may be incorrect)",

Check your path to target and destination project or certification file does not contain SPACE.
To whom concerning: "could not load keystore file (password may be incorrect)",

Check your path to target and destination project or certification file does not contain SPACE.
The selfsigned command on Mac works for me but it fails on Linux with "key store error". Does anyone know the reason?

/home/coulera/AdobeAir/bin/adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.px "masnun"
key store error
Quick and to the point, thanks for the post! But, I do keep on having a problem. When I enter the adt command to package it, the cmd responds with a "password:_" line, and I'm just not able to type anything. Anyone know what's wrong?
I'm confused where do i run that adt thingy?
protoboy : at your command prompt

(on Windows, go to RUN and type CMD)
I'm still confused and I can't run any command in command prompt. not even CD command!!! :(
Awesome Post. I add this Post to my bookmarks.
Make sure the command is not being executed in a folder that has restricted access privileges to avoid the "could not load keystore file". Just try the command somewhere else.
What I thought was a password error was actually the fact that I was missing additional files namely my index.html in addition to the xml file...
I ran into some compilation errors at first after running adt. The culprit was XML white spaces and paths to the icons, and lastly, looking in the source dir instead of the build for the .air ;)
i don't understand this tutorial please any one can show me with video tutorial
hi there - re your " santon post" sunday morning email me and we will definatley get back to you these ones arnt wood
thanks mate
james dentims
hi they are built using brackets pm me
craigy
How to add and run the video file *.mp4 in the html and get the output for adobe air
hi think they blocked me or something , give them a call there very helpfull
bearty
This helped a lot thank you
you ok paul i got it from a mate so this is the contact
filing address , there very helpfull ,just say Howard hemtom give you there number
i got message when i execute the command adl application.xml

application descriptor not found .

even i m in my application folder
Use the following if you get a "Could not generate timestamp: handshake alert: unrecognized name" error:

adt -package -tsa none -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .
yous ok susie sorry mate i`v took so long here is the web address and details , there very helpfull ,tell them fetons
recommended you

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?