Going Commando: Compiling Flex 4 projects in Linux using Free SDK Tools

This post demonstrates how to setup a Linux (Ubuntu 9+) system to compile Flex 4
projects using Adobe’s Flex 4 SDK.

My assumption is you already know a little something about Flex 4.  That, or you’re
in the process of learning it now.  These instructions focus on the steps necessary to
configure Linux for command line compiling.  However, I don’t explain either Linux
shell commands, MXML code, or the Flex SDK compiler behaviors.  Hopefully you
can find those explainations elsewhere, and this tutorial will walk you through the
missing pieces.

By the way, you will need Flash Player 10 properly installed in order to launch the final
compiled SWF file..

We’ll break the challenge into seven tasks:

1. Download and prepare the Flex 4 SDK
2. Setup a folder structure for your workspace and a project
3. Add a simple MXML application file
4. Add environment variables to the Linux shell
5. Setup the flex project config file
6. Create a reusable compiler script for the project using Bash
7. Compile and test the project

1: Download the Flex 4 SDK:

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

I used “Flex 4.1 Update”, Adobe Flex SDK (169 MB).

When the file finishes downloading, copy it (Right-click > Copy) to your home folder
(Places > Home Folder).

Extract the archive in your home folder (Right-click > Extract Here).

Rename the extracted directory:  flex41

2: Setup the workspace / project folder structure:

Starting in your Home Folder directory, create your workspace first..
Right-click > Create Folder: “flex41wk” (no quotes)

Then browse into the workspace and create your project folder..
Right-click > Create Folder:  “hello” (no quotes)

Within the project folder, create two more folders–“src” and “bin“.

3: Add an MXML file:

Browse into your “src” folder:  Right-click > Create Document > Empty file
Name the file “hello.mxml” (no quotes, make sure to include the extension).
Double-click “hello.mxml” to open it and add the following code..

<?xml version="1.0" encoding="utf-8"?>
<s:Application
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">

 <s:HGroup horizontalCenter="0" verticalCenter="0">
 <s:TextInput id="typeTI"/>
 <s:Button id="postButton"
 label="Say Hi!"
 click="{postTI.text=typeTI.text; typeTI.text=''}"/>
 <s:TextInput id="postTI"/>
 </s:HGroup>

</s:Application>

4: Add Environment Variables:

Think of environment variables as values you burn into the shell of the operating system,
which are convenient for reuse elsewhere when executing other command line functions.
We’ll add two:

Applications > Accessories > Terminal

When the terminal opens, type:

gedit ~/.bashrc

This opens a file for editing.  Disregard everything you see in this file, but scroll to the bottom
of the file so we can add two new entries; of course,replace “__your_profile__” with your
profile folder name:

#full path to flex4 sdk bin added to PATH variable
PATH=$PATH://home/__your_profile__/flex41/bin
export PATH

#full path to flex4 sdk frameworks
flexlib=$flexlib:/home/__your_profile__/flex41/frameworks
export flexlib

When you’re done, save the changes and close the file.  In your terminal window,call the
following to refresh your environment and include the new variables:

source ~/.bashrc

You should now be able to type “echo $flexlib” to confirm that your environment shell
is updated.

5: Tweak the Flex 4 project config file:

The Flex 4 compiler parses an XML config file to glean information about the installation
path of your Flex 4 SDK as well as the path to your project’s “src” directory.  Because a
template of the Flex 4 config file is included with the SDK, we can copy it to the
workspace’s project folder, then modify it.

First, copy the config file from the SDK to your project folder like so;  notice we’re taking
advantage of the $flexlib variable to shorten the command, we’ll use this variable again
shortly:

cp $flexlib/flex-config.xml /home/__your_profile__/flex41wk/hello/flex-config.xml

You should be able to confim the config file template is moved to your project
directory by browsing to the directory through your home folder.  Now we need to edit
the config file so it will recognize the SDK location relative to the local file system. For this,
we’ll also use the $flexlib environment varible.

I provided my flex-config.xml file for download, and you can get it here:

http://www.learningflex4.com/blogassets/flex-config.xml

The recommendation is to use the download for comparison.  Specifically,
note this XML node near the top of the file; you’ll need to change my profile
name to yours:

<source-path>
<path-element>/home/__your_profile__/flex41wk/hello/src/</path-element>
</source-path>

Also, there are many file system paths in this document.  If you downloaded the config file I
provided, look for the instances of ${flexlib} to appear everywhere the compiler will check
the local file system.  Be sure to prepend your resource paths with this key variable.

Once you’re finished editing, make sure to save the file; then close it.

6: Creating a reusable compiler script in Bash

Now we’ll make a reusable bash script to call the compiler (mxmlc) with fixed settings, specific
to this project.  For this, we’ll make a new file and edit it.

Browse to Places > Home Folder > flex41 wk> hello

Right-click > Create Document > empty file

When the new file appears, name it “compile” (LEAVE THE EXTENSION BLANK, no quotes).

Double-click on the file to open it.  In the text editor, add the following lines:

#!/bin/bash
mxmlc -load-config flex-config.xml ./src/hello.mxml -output ./bin/hello.swf

Save it when you’re finished.  The Bash script handles the task of launching the compiler, passing
it a reference to the flex-config.xml file, identifying the “scr” directory, and specifying the output,
“bin/hello.swf”.

Finally, we need to change the permissions of our “compile” script so that it’s executable.  You’ll
need to move to the proper directory first.  So in your terminal window, run the following lines
back-to-back:

cd ~/flex41wk/hello
chmod 755 compile

7: Compile and test..

Now you should be ready to compile and test.  Compile the one- Button app with the following line
in your terminal:

./compile

Assuming you don’t receive any errors, browse to your compiled SWF file:

Places > Home Folder > flex41wk > hello > bin

In this directory, Right-click on “hello.swf” and select “Open with Firefox”.

That should do it.  Enjoy.  – Elijah