My First AIR App

I have been looking forward to trying the Adobe AIR platform for desktop GUI development for a long time. Recently I started learning more on JavaScript, jQuery and CSS. So I decided to try out the AIR SDK for javascript engineers. I must agree that AIR is simply great. The platform is strong and powerful while the development curve is very low :)

I read just one article and it helped understand the basics. Later I had some issues regarding the packaging system but managed to hack through :D

First, I downloaded the Adobe AIR runtime and Adobe AIR SDK for Linux since I am on Ubuntu 9.04. I installed the runtime environment for testing the final product. The SDK has built in tools for testing and debugging the apps. I extracted the SDK into my home folder and then added the “bin” directory of the SDK to the system path by editing the “/etc/environment” file.

I then created a directory for the air application named “myair”. Inside that directory, I created an application descriptor named “myair.xml”. Here’s the source code for the file:

<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.masnun-air</id>
  <version>1.0</version>
  <filename>maSnun-AIR</filename>
  <initialWindow>
    <content>index.html</content>
    <visible>true</visible>
    <width>300</width>
    <height>600</height>
  </initialWindow>
  <icon>
    <image16x16>icons/AIRApp_16.png</image16x16>
    <image32x32>icons/AIRApp_32.png</image32x32>
    <image48x48>icons/AIRApp_48.png</image48x48>
    <image128x128>icons/AIRApp_128.png</image128x128>
  </icon>
</application>

This descriptor file holds all the basic information regarding the application. I created three more directories under the application directory:

– icons: for the icons described in the descriptor
– js: for the javascript files (mainly jQuery)
– build: for building the final product (packaging)

Then I went on building the initial and only view of the application. It’s nothing but a very simple html file. Here’s the source of the “index.html” file:

<!--
Author: maSnun
URL: http://masnun.com
Email: masnun@gmail.com
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>maSnun's AIR Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/JavaScript"
        src="js/jquery-1.3.2.min.js"></script>
        <script type="text/JavaScript">
            $(document).ready(function() { masnun(); });
 
            function masnun() {
 
                i = 0;
                $("p").prepend("&#187;")
                total = $("p").length - 1;
                $("#hide").click(function (e) {
                    if(i > total) {
                        alert("No more paragraphs to hide!");
                        e.preventDefault();
                    } else {
                        e.preventDefault();
                        $("p:eq("+i+")").hide("slow");
                        i = i + 1;
                    }
                });
 
 
                $("#show").click(function (e) {
                    e.preventDefault();
                    $("p").show("slow");
                    i = 0;
                });
 
 
                $("p").hover(function () {
                    $(this).addClass("hover");
                }, function () {
                    $(this).removeClass("hover");
                });
 
                $("p").click(function() {
                    alert("You clicked a menu item :D");
                });
 
 
            }
        </script>
        <style type="text/css">
            body { font-size:18px; background:black; color:white;  border: dashed 3px fuchsia;
            margin:5pt;}
            p { color:red; margin:5px; cursor:pointer; }
            p.hover { background: blue; color: white; }
        </style>
    </head>
    <body >
        <div style="margin: 10pt; color:lime;">
        <font size="2"> Welcome to the demo AIR app! Clicking the "Hide" option
        hides the menu items one by one. Clicking the "Reset" option brings
        all the hidden items back. Clicking a menu item shows a dialog box :D</font>
            </div>
        <div align="center"  >
            <a href="" id="hide" style="color:orange;">Hide</a> || <a href="" id="show" style="color:orange;">Reset</a>  <br/><br/>
        </div>
        <div align="left" style="color:white;">
            <p> Menu Item 1</p>
            <p> Menu Item 2</p>
            <p> Menu Item 3</p>
            <p> Menu Item 4</p>
            <p> Menu Item 5</p>
            <p> Menu Item 6</p>
            <p> Menu Item 7</p>
            <p> Menu Item 8</p>
            <p> Menu Item 9</p>
        </div>
 
        <div style="margin: 10pt; color:yellow;">
        <font size="2"> <b>Created by:</b> maSnun</font>
            </div>
 
    </body>
</html>

If you are familiar with HTML, CSS and jQuery, the code will be self explanatory for you.

Thats completes the development cycle. I tested the application by typing the following commands on my terminal:

cd myair
adl myair.xml

And it worked! :D

Now for packaging, I first created a selfsigned certificate:

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

Then packaged the application using the following command:

adt -package -storetype pkcs12 -keystore cert.pfx build/maSnun-AIR.air myair.xml index.html icons/*.png js/*.*

It packaged the application and created an air archive for me. I tested it and it installed, worked and uninstalled fine on my machine.

Download the App: http://masnun.googlecode.com/files/maSnun-AIR.air

Have fun! :D

This entry was posted in Blog Post and tagged , , . Bookmark the permalink.

2 Responses to My First AIR App

  1. SDSL says:

    great, but how you secure your code if you want to develop application for public/enterprise use ?

  2. maSnun says:

    I would say using JS is still not a very good idea for developing AIR apps. Better choose flex :) Still, you can try your best to hide business logic using code obfuscation and other available techniques which will not ensure 100% secrecy but would make things hard for the reverse engineers :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">