TechnologyJul 17, 2009

Compiling Flex without Flex Builder

Bradford Taylor

Flex builder is a great tool that I highly recommend. Using it provides great features such as design preview and debugging. You can get a free 30 day evaluation of it at Adobe’s website.

There are times, however, that you might find yourself in need of compiling a Flex application and you don’t have access to the Flex Builder (for example if your trial expired but you need that last build). It is very easy to use Ant to build your Flex Application.

Besides Ant you need the Flex SDK. If you have installed the Flex Builder then the SDK was installed in C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0 for windows, unless you changed the default installation directory. If you download the SDK separately then the default installation directory is C:\Program Files\Adobe\flex_sdk_3.

Adobe provides the Ant build tasks in the SDK. They are located in ant/lib/flexTasks.jar from the SDK installation directory.  You can use the Flex tasks with the following xml in your Ant build script:

<property name="FLEX_HOME" value="C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\"/> <taskdef resource="flexTasks.tasks" classpath="${FLEX_HOME}\ant\lib\flexTasks.jar "/>

This provides several Flex specific tags such as mxmlc, compc and html-wrapper.  You can find detailed documentation in the Flex 3 Livedocs.  Below you’ll find an example of an Ant build script that compiles a Flex application. <?xml version="1.0" encoding="utf-8"?> <project name="TestFlexNonBuilder" basedir="."> <property name="FLEX_HOME" value="C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\"/> <taskdef resource="flexTasks.tasks" classpath="${FLEX_HOME}\ant\lib\flexTasks.jar "/> <property name="APP_ROOT" value="src"/> <property name="OUTPUT_DIR" value="WebContent" /> <property name="APP_NAME" value="TestFlexNonBuilder" /> <target name="init"> <delete dir="${OUTPUT_DIR}" /> <mkdir dir="${OUTPUT_DIR}" /> </target> <target name="wrapper"> <html-wrapper title="Test Flex App without Builder" file="index .html" height="300" width="400" bgcolor="red" application="app" swf="${APP_NAME}" version-major="9" version-minor="0" version-revision="0" history="true" template="express-installation" output="${OUTPUT_DIR}"/> </target> <target name="main" depends="init,wrapper"> <mxmlc file="${APP_ROOT}/${APP_NAME}.mxml" output="${OUTPUT_DIR}/${APP_NAME}.swf" keep-generated-actionscript="true"> <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/> <source-path path-element="${FLEX_HOME}/frameworks"/> <compiler.library-path dir="${FLEX_HOME}/frameworks" append="true"> <include name="libs" /> <include name="../bundles/{locale}" /> </compiler.library-path> </mxmlc> </target> <target name="clean"> <delete dir="${APP_ROOT}/generated"/> <delete> <fileset dir="${OUTPUT_DIR}" includes="${APP_NAME}.swf"/> </delete> </target> </project>

You can find more valuable information like this including how to connect your Flex applications to Spring in the book that I did a technical review for called Pro Flex on Spring, published by APress.