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
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("»")
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.xmlAnd it worked!
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!
great, but how you secure your code if you want to develop application for public/enterprise use ?
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