Hello world in Flex sample project

Lately I’ve been playing a lot with Adobe Flex so I thought it would be a good idea to show you how to setup the Flex SDK on your Linux box and get you going with this cool technology. In case you haven’t heard, Flex is a framework to write Rich Internet Applications (RIAs). Using XML and Actionscript 3.0, you can write rich internet applications which use webservices to communicate with a backend. The programs are compiled using the Flex compiler into an SWF file. Read on to setup Flex under linux…

Programming in Flex is very simple and you only need the Flex SDK, Java and Ant to get started. The good news: it runs great in Linux and it’s free to use. Adobe has recently open sourced it but I’ve only seen a little part of the code. If you would like to program from an IDE you can buy an Eclipse plugin to develop in Flex. There is a new version for Linux which I haven’t tried yet.

Ok, enough said. Lets get started. First you need to have download and installed the latest Java SDK and Ant. Go to http://java.sun.com and http://ant.apache.org/ and get the latest versions. Once you have those installed (you probably already have them) download the Flex SDK. You can get the latest Flex 3 here. The final download is the tar ball I’ve created for the project which you should uncompress it into a directory. Click here to download the file. You should see the following files:

 FlexHelloWorld/
 |-- bin
 |-- build.xml
 |-- css
 |   `-- hello_world.css
 |-- env.sh
 |-- hello_world.mxml
 `-- includes
     `-- hello_world.as

The first thing you’ll need is to do is setup you env.sh file. This will setup your environment to work. Edit the file and replace the JAVA_HOME and ANT_HOME variables to point to where you have installed them. I usually install Java and Ant in /opt and make links like so:

[miquel@baggins Flex]$ ls -l /opt/
total 148
lrwxrwxrwx  1 root   root       9 2007-08-16 02:27 ant -> ant-1.5.4
lrwxrwxrwx  1 root   root      42 2007-08-16 02:27 ant-1.5.4
lrwxrwxrwx  1 root   root      11 2007-06-03 13:39 java -> jdk1.6.0_01
drwxr-xr-x 10 miquel miquel  4096 2007-03-14 07:57 jdk1.6.0_01

Once you have edited env.sh you should run it like so:

[miquel@baggins Flex]$ . env.sh

This will add your javac compiler and ant commands to your path. The next step is to edit your ant build.xml file. Here you need to change the bold text on the tag which says:

  <!-- location of MXML compiler -->
  <property name="flex.mxmlc" location="/home/miquel/Develop/Flex/flex/bin/mxmlc" />

to point to your mxmlc compiler where you have installed the Flex SDK. In my case I installed it in /home/miquel/Develop/Flex/flex

To build the SWF file you need to compile your .as and .mxml files: this is where ant comes in. To compile your project just type ant at the command prompt:

[miquel@baggins FlexHelloWorld]$ ant
Buildfile: build.xml

init:
   [delete] Deleting directory /home/miquel/Develop/Flex/FlexHelloWorld/bin
    [mkdir] Created dir: /home/miquel/Develop/Flex/FlexHelloWorld/bin

compile:
     [exec] Loading configuration file /home/miquel/Develop/Flex/flex/frameworks/flex-config.xml
     [exec] Warning: Source path entry, '/home/miquel/Develop/Flex/FlexHelloWorld/includes', is a ...

     [exec] bin/hello_world.swf (140072 bytes)

BUILD SUCCESSFUL
Total time: 36 seconds

That’s it! You have compiled your first Flex project. To view the flex app open your browser and simply point to your SWF file which is stored in the bin/ directory. You can make modifications to the two files where the source code lives: hello_world.mxml which has the GUI and includes/hello_world.as which has the Actionscript code where you should write the event handlers.

This sample project is the starting point for more complicated projects. If you build any serious Flex application you will definitively have a more complicated directory structure but this is a nice starting point for your flex development. To read more about flex visit flex.org, Adobe Devnet and the official flex site.