Sep

16

Setting up a Flex development enviroment in GNU/Linux

Written by Michael Mattax

If your just starting out in Flex development and don’t know where to start, then this post is for you. I am going to instruct you on how to set up a proper development environment in Linux and get you compiling your first Flex application!

I should first mention that I do not use Adobe’s Flex Builder, and this post is not going to cover Flex Builder. I believe strongly in IDE and build independence; instead, this post will cover installing Java, ant, and the Flex SDK in a Linux environment. We will then use these technologies to build our first Flex application.

Note: These instructions are for a typical Debian based GNU/Linux distribution. I am using Debian Etch, this should also work with Ubuntu…

Step 1: Install a Java JDK

The Flex compiler and debugger are actually Java applications; most Linux environments come with some form of JRE, but we will want a Sun JDK for ant. If you’d like to see your install options you can try:

apt-cache search java | grep sun

I get the following packages:

sun-java5-jdk - Sun Java(TM) Development Kit (JDK) 5.0
sun-java6-jdk - Sun Java(TM) Development Kit (JDK) 6

I am going to go ahead and install the java6 JDK and ant, which is the build tool we will be using:

sudo apt-get install sun-java6-jdk ant

Once everything is installed, run ant by typing “ant” at the command line, if Java complains that it cannot locate “tools.jar” then you will need to set Java to the newly installed JDK, do this by the following command:

sudo update-alternatives --config java

Step 2: Install the Flex SDK

Download the SDK from Adobe, this can be found here: http://www.adobe.com/products/flex/flexdownloads/#sdk. Once downloaded, extract the zip file to your desired location; I simply put it in my home folder:

unzip flex_sdk_3.zip -d ~/

We then need to export Flex’s bin path to our shell. To do this for bash we will need to do the following:

sudo vi ~/.bashrc

Add the following line into .bashrc using the path where you unzipped the Flex sdk, for me, I added the line:

export PATH=/home/michael/flex_sdk_3/bin:${PATH}

Save the file. You should now be able to execute the mxmlc, the Flex compiler, and fdb, the Flex debugger from the command line.

Step 3. Creating our first Flex application.

Copy the following code into a file named helloworld.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="300" height="200"
    horizontalAlign="center" verticalAlign="middle"
    viewSourceURL="src/HandlingEventsEventHandler/index.html"
>
<mx:Panel title="My first Flex application" horizontalAlign="center" >
    <mx:Label fontSize="18" text="Hello, World." />
</mx:Panel>
</mx:Application>

At this point you can already compile your application via mxmlc, simply open up a shell, cd to the directory where you saved helloworld.mxml, and execute the following command:

mxmlc --strict=true helloworld.mxml

After compilation, you should see helloworld.swf, congratulations on your first Flex application! If you would like to use ant for building your Flex application then go on to the next step, otherwise enjoy your new Flex development enviroment.

Step 4. Setting up ant to support the mxmlc compiler.

First we will need to determine where ant lives on our machine, do this by executing the following command:

whereis ant

ant is located at /usr/share/ant/ on my machine, probably yours too. We will now copy the flexTasks.jar file from our flex sdk folder to ant’s lib folder. This jar file contains the ant task definitions for compiling flex applications. To copy it to ant’s lib folder execute:

sudo cp ~/flex_sdk_3/ant/lib/flexTasks.jar /usr/share/ant/lib/

Now create a new file build.xml with the following content, substituting your setup values for the FLEX_HOME and APP_ROOT properties:

<?xml version="1.0" ?>
<project name="helloworld" default="build" >
    <property name="FLEX_HOME" value="home/michael/flex_sdk_3/" />
    <property name="APP_ROOT" value="/home/michael/dev/" />
    <taskdef
        resource="flexTasks.tasks"
        classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />
    <target name="build">
        <mxmlc file="${APP_ROOT}/helloworld.mxml">
            <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
            <source-path path-element="${FLEX_HOME}/frameworks"/>
        </mxmlc>
    </target>
</project>

You can now open up a shell, cd to the build.xml file and execute:

ant

When you run ant, you should get something similar to this output:

Buildfile: build.xml
build:
    [mxmlc] Loading configuration file /home/michael/flex_sdk_3/frameworks/flex-config.xml
    [mxmlc] /home/michael/Desktop/helloworld.swf (150035 bytes)
BUILD SUCCESSFUL
Total time: 3 seconds

Well thats it! If you have any problems with your install, leave me a comment and I’d be happy to do some troubleshooting for you. Your well on your way to Flex development, all you need to do is pick an editor. For me, it’s emacs with actionscript-3 support. I am currently using actionscript-mode.el.

Who needs FlexBuilder? not me…Until next time, happy hacking.

2 Responses to “Setting up a Flex development enviroment in GNU/Linux”

  1. Dutch Rapley Says:

    While I don’t use the standalone Flex Builder, I do use the Flex Builder plugin for eclipse. I can think of three good reasons whey it’s worth the $249 it costs for the standard edition.

    1. Easily view the source for any class.

    In Flex Builder, you can perform Ctrl+Left Mouse Click on any ActionScript class (or mxml component) to view its source code. Not only does this allow you to see how each class *really* works, but they also chock full of comments explaining them.

    2. Easily launch flex documentation.

    Place the cursor (not mouse pointer) on any ActionScript class (or mxml component) and click Shift+F2 and launch the documentation.

    3. Code auto completion

    Not only does this come in handy for the built in mxml ActionScript classes, but is especially handy when you start working with third party libraries like the Google Maps Flash SDK.

  2. Websites tagged "mxmlc" on Postsaver Says:

    [...] - Setting up a Flex development enviroment in GNU/Linux saved by Ratcatcher2008-10-17 - Introduction to Flex Resource Bundles saved by fenglu2008-10-08 - [...]

Leave a Reply