Adobe AIR Tutorial for HTML / JavaScript Developers
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
Tweet
Related Entries
- Geolocation API for Adobe AIR? - October 8, 2008
- Howto Remove Skype Plugin Markup with jQuery - May 3, 2010
- jQuery UI Sortable Tutorial - January 7, 2010
- Ajax Same Origin Policy No More with Firefox 3.5 - June 30, 2009
- Ext CFC - December 12, 2007
Trackbacks
- 101 Adobe AIR Resources to Add to Your Toolbelt of Awesomeness Jason Bartholme's Blog
Comments
What's the matter ?
The adl command works well. Thanks for your help.
Me too :(
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!
Thanks for you work. I tried the adl -package but I got this error message... could not load keystore file (password may be incorrect).
thanks for the training really appreciate it, can i deploy my coldfusion code that connects to the database with air.
"Could not generate timestamp: Connection timed out: connect"
-> you need a working/active internet connection on your computer
so, be sure you have one ;)
This is the good article on javascript
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
•
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
adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml <b>.</b> <-
Check your path to target and destination project or certification file does not contain SPACE.
Check your path to target and destination project or certification file does not contain SPACE.
/home/coulera/AdobeAir/bin/adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.px "masnun"
key store error
(on Windows, go to RUN and type CMD)
thanks mate
james dentims
craigy
bearty
filing address , there very helpfull ,just say Howard hemtom give you there number
application descriptor not found .
even i m in my application folder
adt -package -tsa none -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .
recommended you
Post a Comment
Recent Entries
- ColdFusion returning empty response with server-error: true
- Careful applying CF11u16, CF2016u8, CF2018u2
- Sessions don't work in Chrome but do in IE
- csrfVerifyToken does not invalidate the token
- The cf_sql_ is optional in cfqueryparam
- Cookie Expires / Max-Age 1969-12-31T23:59:59.000Z
- Burst Throttling on AWS API Gateway Explained
- How to Resolve Java HTTPS Exceptions