kam

one of those blogs

Recently, browsing InfoQ I stumbled upon a very visual and interesting presentation by Christophe Coenraets “Rich Internet Applications with Flex and AIR“.

This presentation took place during QCon London 2008, where Christophe Coenraets, a Senior Technical Evangelist at Adobe, presented Flex and AIR, two technologies from Adobe used to create, deploy and run Rich Internet Applications.

I have not had any experience with Flex in the past, and, naturally, right after the presentation, I decided to give it a try – to develop, compile, and run an ultra simple Flex application. After some research, I found that there are two choices that are out there for Flex developers:

Adobe® Flex® Builder™ – software is a highly productive Eclipse™ based development tool enabling intelligent coding, interactive step-through debugging, and visual design of the user interface layout, appearance, and behavior of rich Internet applications (RIAs).

OR

Adobe® Flex™ 3 Software Development Kit (SDK) – includes the Flex framework (component class library) and Flex compiler, enabling you to freely develop and deploy Flex applications using an IDE of your choice.

While Adobe® Flex® Builder™ is an appealing option, it is not free. It starts from $300, and goes up to $700 for a professional edition. Whereas Flex SDK is open source and free – which is “a bit” cheaper than $300. The biggest difference between the two is that with just SDK, I will have to use my own IDE / text editor to write Flex applications, which is totally fine by me.

Step 1. Download Flex SDK.

Go to download Flex SDK, and check the box with “I have read the Adobe Flex SDK License, and by downloading the software listed below I agree to the terms of the agreement.”, you should see the “Download the Flex SDK for all Platforms” link to a Flex SDK zip file. Download it.

Unzip it to any directory that you like (in my case it is /opt/flex-sdk)

unzip flex_sdk_3.3.0.4589.zip

Step 2. Create an alias to compile MXML, ActionScript, etc. Flex applications.

Make sure java 6 is installed:

sudo apt-get install sun-java6-jdk

I need to have JAVA_HOME pointed to java 5 (JAVA_HOME=/usr/lib/jvm/java-1.5.0-sun), so I’ll hardcode the path to java 6 into flex compiler alias:

in ~/.bashrc:

# flex SDK home
export FLEX_SDK_HOME=/opt/flex-sdk
alias mxmlc='/usr/lib/jvm/java-6-sun/bin/java -jar "$FLEX_SDK_HOME/lib/mxmlc.jar" +flexlib="$FLEX_SDK_HOME/frameworks" "$@"'

re-login to the terminal (open a new terminal session). Now you can execute:

mxmlc youFlexApp.mxml

to compile an MXML file into an executable “youFlexApp.swf”

Step 3. Write a simple MXML application and compile it with Flex SDK.

Create a simple MXML file “flexTest.mxml”, that would create a button:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
        <mx:Button label="I am a simple flexy button" x="10" y="10" />
</mx:Application>

Compile it:

$ mxmlc flexTest.mxml
Loading configuration file /opt/flex-sdk/frameworks/flex-config.xml
/path/to/flexTest.swf (172884 bytes)

Now you should see a new SWF once the compiler is done:

$ ls -l
total 180
-rw-r--r-- 1 user group    217 2009-03-29 02:38 flexTest.mxml
-rw-r--r-- 1 user group 172884 2009-03-29 02:40 flexTest.swf

Step 4. Run compiled Flex application.

Open it with Firefox (make sure you have Adobe Flash Player plugin installed. If not, install it):

$ firefox flexTest.swf &

Now you should see that flexy button:

It is quite simple, really. Good Luck Flexing!