Turorial HelloWorld AIR application in Linux. Create a package from scratch

Posted: September 27, 2009 | Author: cateof | Filed under: DIY, Προγραμματισμος, Linux, WedDev | Tags: adobe air, adobe flex, SDK | 9 Comments »

I am running a Fedora 11 Linux in my laptop. These days I decided to spend some time reading about Adobe AIR/FLEX application frameworks. I don’t want to extend this article writing theory and arguments, however it is my feeling that these applications will be prefered in the near future from desktop users. I am reading a book from Wrox, Adobe AIR Create Modify and Reuse (2008) and the first milestone for the developer is to create a “blank” application that prints the canonical programming string to stdout, ie “Hello World”.

Based on the walk-through of this book I will try to describe the steps in order to run your first application in less that half an hour, including the download time of the prerequisites.

1. First you need Adobe AIR run time. AIR stands for Adobe Integrated Runtime. Adobe AIR is a cross-platform runtime that runs desktop applications compiled under the AIR framework. Go to google.com and search for “Adobe AIR Linux”. The results will send you to the Adobe.com site for AIR. Download the appropriate file. Once you are down you must have a file called AdobeAIRInstaller.bin in your downloads directory. Make this executable and from the command line enter ./AdobeAIRInstaller.bin. A GUI application will be launched and will guide you for the AIR installation. You must be root in order to install. If care about disk quota you can delete the AdobeAIRInstaller.bin after this step.
2. You now need to proceed to the installation of FLEX SDK. Adobe AIR is the runtime environment of your application and FLEX SDK contains the tools you need to compile, debug and deploy your HelloWorld application. Once again use google.com or search via adobe.com for FLEX 3 SDK. I downloaded flex_sdk_3.4.0.9271.zip and extracted the contents under /home/lefteris/flex. The download takes some time.
3. Add the bin directory of FLEX SDK to your PATH. This is easy. Open ~/.bash_profile and append the new bin to your PATH variable. Like this PATH=$PATH:$HOME/bin:/home/lefteris/flex/bin. Save this file and use the source command in order to update your system without logging out. source ~/.bash_profile. Now you can use the binaries under flex/bin without using the absolute path at your prompt.

Now you need to type some code. Basically you need two files.

• a main file – this can be either an MXML (.mxml) or ActionScript (.as) file
• An application descriptor file using the XML markup

I created a directory HelloWorld in my workspace. The two files that we need for our minimal application are below.

[lefteris@localhost helloworld]$ cat HelloWorld.mxml
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
windowComplete=”completeHandler();”>
<mx:Script>
<![CDATA[
// window has completed initial layout and is made visible.
private function completeHandler():void
{
}
]]>
</mx:Script>
<mx:Label text=”Hello World” />
</mx:WindowedApplication>
[lefteris@localhost helloworld]$ cat HelloWorld-app.xml
<?xml version=”1.0″ encoding=”UTF-8″?>
<application xmlns=”http://ns.adobe.com/air/application/1.0″>
<id>com.aircmr.HelloWorld</id>
<version>0.1</version>
<filename>HelloWorld</filename>
<name>Hello World</name>
<description>An AIR app to say Hello</description>
<initialWindow>
<content>HelloWorld.swf</content>
<title>Hello World</title>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
</initialWindow>
<installFolder>AIRCMR/HelloWorld</installFolder>
<programMenuFolder>AIRCMR</programMenuFolder>
</application>

So our dir contains HelloWorld.mxml and HelloWorld-app.xml. We are almost there. Ready to compile. cd to your dir and enter the following command

amxmlc -load-config “/home/lefteris/flex/frameworks/air-config.xml” -output HelloWorld.swf HelloWorld.mxml

This will compile your code and create the HelloWorld.swf. Perfect, now let’s run our first app. To launch and preview the application, run the AIR Debug Launcher (ADL) tool found in the /bin folder of your installation directory. A single argument of the application descriptor file is needed to run the ADL. If you look at the descriptor file (HelloWorld-app.xml), you’ll notice that the content value of the initialWindow element is set to the SWF you previously compiled. Type

adl HelloWorld.xml.

Unfortunatelly this did not work for me the first time I run it. I got the error “cannot execute binary file”. I searched a little bit and I realized that I needed to overlay the AIR SDK on top of the FLEX SDK in order to invoke the correct adl. The book described the procedure for MAC and Windows but not for Linux (that is the reason I am typing right now).  So I browsed adobe’s blogs that indicates that we need AIR SDK for Linux. Again search for Adobe AIR SDK for Linux and you will conclude to have a new file under your Downloads directory called air_1.5_sdk.tbz2.  Create a new directory for Adobe AIR SDK, mine is ~/airsdk move your tbz2 file here and trigger the command “tar jxvf ~/air_1.5_sdk.tbz2″.  Now you need the next hack in order to make your stuff moving:

• cd bin
• mv adl adl_lin
• mv adt adt_lin

Don’t ask, do it. Remember that you came here, searching for direction creating a HelloWorld app, right?

Add the new bin directory to your PATH again. My path contains PATH=$PATH:$HOME/bin:/home/lefteris/flex/bin:/home/lefteris/airsdk/bin. So we are almost done:

[lefteris@localhost helloworld]$ ls
HelloWorld-app.xml  HelloWorld.mxml  HelloWorld.swf
[lefteris@localhost helloworld]$ adl_lin HelloWorld-app.xml
error while loading initial content
[lefteris@localhost helloworld]$

What went wrong? What is “error while loading initial content” message mean. This is a known bug/issue to Adobe and is already resolved. You need to make the last change before you launch your application. Open your HelloWorld-app.xml file and change the line <application xmlns=”http://ns.adobe.com/air/application/1.0″> to <application xmlns=”http://ns.adobe.com/air/application/1.5“>.

Now run adl_lin HelloWorld-app.xml again and this is it. We are done.

Our application is up and running. It just prints a message to the screen however it is an application. Close it by pressing ‘x’ at the top right corner.

Do you want to go a little bit further? In a few steps your project can be turned from a binary file to a complete package. Take 5 more minutes and you will not regret it. Let’s package our application. Go to your prompt and create a certificate in order to sign your applications. This will inform your client about your identity.

adt -certificate -cn HelloWorld 1024-RSA certificate.pfx password

You just created a certificate.pfx file in the current directory. Now let’s package.

adt -package -storetype pkcs12 -keystore certificate.pfx HelloWorld.air HelloWorld-app.xml HelloWorld.swf

Once prompted enter the password. Your directory now contains

a file called HelloWorld.air. Let’s try to install it. Double click the .air icon to launch the installer. Just a note here. I faced some problems at the beginning with the permissions and I ran the installer like this

[lefteris@localhost 1.0]$ pwd
/opt/Adobe AIR/Versions/1.0
[lefteris@localhost 1.0]$ ls
Adobe AIR Application Installer  Adobe AIR Application Installer.swf  airappinstaller  libCore.so  Resources
[lefteris@localhost 1.0]$ sudo Adobe\ AIR\ Application\ Installer /home/lefteris/714/air/helloworld/HelloWorld.air

as a sudoer things are always easier. Anyway either by double click or with the above sudo command you will see the following

Click the install button

select the directory you want to store the files of the application and press the “Continue” button.

Agree with the terms and conditions. You are done. Your application is installed in the system. Go to the your Menu and launch it

In case you need to uninstall it use the Adobe Uninstaller from your Menu

You see that Hello World is there. You may receive this error message if you try to uninstall this package:

meaning that you need to be root to uninstall. (try to do it using sudo).

Conclusion: We started this small project from scratch. We gathered all the prerequisites in order to create an *.air package, ie AIR/FLEX sdks AIR runtime, we wrote two simple scripts and we finally created a signed package.

I hope you liked this small tutorial. Please send me feedback.

Regards,

Lefteris

---