adobe_air_realinWell yeah its been long since I wrote about anything over here. Certainly after the success of  “How to send tweet on twitter using PHP ?” I am gonna explain you how to create a simple “Hello World” application in Adobe Air to give you a quick start 🙂

Yeah I know you are excited, this is the beauty of AIR 😛

So first of all the pre-requisites :

1) Download the Adobe Air SDK

2) A simple edit, or even notepad would do as long as you do not like the fancy language specific colors.

First of all lets create the Application descriptor file (XML file), which will give all the information about the files to the framework. You can also copy paste the content from below and then later on can change with your filenames or as per your ease.

< ?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5.1">
  <id>com.company.AppName</id>
  <version>1.0</version>
  <filename>realin</filename>
  <initialwindow>
    <content>realin.html</content>
    <visible>true</visible>
    <width>400</width>
    <height>200</height>
  </initialwindow>
</application>

This is a descriptor file in XML which gives the info about your application as explain above. Save it with the name “appname-app.xml” in my case i used “realin-app.xml”. Please make sure that you put the correct version number of your framework in the line no. 2 i.e. after air/application/?.?.? . I have download the latest version i.e. 1.5.1 and have put it there. The id is more like a namespace and is used to differentiate the different applications or the certificate generation process. I have put in the dummy one for now. version is as simple as your applications version number. filename is the name of the executable file which will be referred by all other resources when your application is running in the OS. initialWindow area specifies the very meaningful tags which can be easily changed and understood. That should be enough for now for the descriptor file.

Now lets move on to the content part of our first Adobe Air Application 🙂 Create a HTML file in the same directory and keep the filename as give in the tag. So for this example i am gonna give the filename as realin.html

<html>
  <head>
    <title>Hello World</title>
    <script type="text/javascript" src="AIRAliases.js"></script>
    <script type="text/javascript">
      function appLoad()
      {
        air.trace("Hello World");
        //we can also define ajax function here
 
      }
    </script>
  </head>
  <body onLoad="appLoad()">
    <h1>Welcome to very first Adobe Air App at www.realin.co.in</h1>
  </body>
</html>

So this HTML file is very simple to understand. Make sure you include AIRAliases.js in the head tag of the HTML and yeah be sure than you copy this file before hand in the same directory, the file is present at AIR\frameworks\libs\air in the framework. For now i am explaining this code little short but later on will explain stuff with examples and little more explanatory manner.
air.trace() is more like system.out.println(); in Java, it echoes the stuff to the console, so you getting what i mean ? This is your handly tool for debugging your applications. Rest the object air can be used in quite a lot ways but for now use it with method trace() to display stuff in the console. 🙂

So now we have 3 files in our folder realin-app.xml , realin.html and AIRAliases.js. When you download the SDK, it should add the the path for adl.exe which stays in /bin/adl.exe . If not already then please define the path in the windows and open up the command prompt. Now browse to the folder where you have the above three files and type following command :

adl realin-app.xml

If everything is correct, then you should be able to see a Adobe Air Application window with the text “Welcome to very first Adobe Air App at www.realin.co.in“. If not then please read the tutorial carefully :P, it isn’t that tough

Leave your comments and Questions

Cheers!!
Sachin Khosla

Share this post: