Skip to main content

Building a Flex project with Ant

Here is a quick sample on how to build a simple Flex
"hello world" project with Ant.

The "hello world" project contains a src folder with one Flex application file and an Ant build.xml file:

./project_home/
./src/
app.mxml
build.xml

The app.mxml is the main module of the project. It simply has a label with a "Hello World!" text:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="Hello World!"/>
</mx:Application>
Here is the build.xml source:
<?xml version="1.0"?>
<project name="fx_practice7" default="all">

<!-- Init the build process -->
<target name="init" unless="initialized">
<!-- Name of project and version -->
<property name="FLEX_HOME" location="/Users/mykola/java/flex"/>

<property name="proj.name" value="${ant.project.name}" />
<property name="proj.shortname" value="${ant.project.name}" />
<property name="version.major" value="0" />
<property name="version.minor" value="9" />
<property name="version.revision" value="0" />
<property name="APP_TITLE" value="Sample Application" />
<property name="APP_WIDTH" value="800" />
<property name="APP_HEIGHT" value="600" />

<!-- Global properties for this build -->
<property name="build.dir" location="${basedir}/build" />
<property name="flex_src" location="${basedir}/src" />

<path id="project.classpath">
<pathelement path="${java.class.path}" />
</path>

<taskdef resource="flexTasks.tasks"
classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />

<echoproperties/>

<property name="initialized" value="true" />

<mkdir dir="${build.dir}" />
</target>

<!-- Default target: clean and build the application -->
<target name="all" depends="init">
<antcall target="clean" />
<antcall target="build" />
</target>

<!-- Compile Flex files -->
<target name="compile.flex" depends="init">
<property name="module"
value="${ant.project.name}"
description="The name of the application module." />

<mxmlc file="${flex_src}/${module}.mxml"
keep-generated-actionscript="true"
output="${build.dir}/${ant.project.name}/${module}.swf"
actionscript-file-encoding="UTF-8"
incremental="true"
context-root="${ant.project.name}"
debug="true">
<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml" />
<source-path path-element="${FLEX_HOME}/frameworks" />
<compiler.source-path path-element="${flex_src}" />
</mxmlc>

<html-wrapper title="${APP_TITLE}"
file="index.html"
application="app"
swf="${module}"
width="${APP_WIDTH}"
height="${APP_HEIGHT}"
version-major="${version.major}"
version-minor="${version.minor}"
version-revision="${version.revision}"
history="true"
template="express-installation"
output="${build.dir}/${ant.project.name}/" />

</target>

<!-- Build the application -->
<target name="build" depends="init">
<antcall target="compile.flex" />
</target>

<!-- Clean build files -->
<target name="clean" depends="init">
<delete dir="${basedir}/generated" />
<delete dir="${build.dir}" />
</target>

<target name="usage" description="Usage documentation">
<echo>
all - clean and build the project
</echo>
</target>
</project>
NOTE: Please update FLEX_HOME and other properties in the build.xml as required for your environment.

To do the build, simply run ant in the project folder. The build output will be stored in the project/build/ folder. To see the result, open index.html in a browser. The index.html is located in the project/build/project_home/ folder.

Comments

Anonymous said…
Thanks for post, it has useful information. My question is, what do I do if I have Javascript classes in my index.html file? Using FlexBuilder you can edit the index.html.template and add my Javscript methods here, which I can then call from my Flex app. How would I go about doing the same thing using ant?

Regards,
Simon
Anonymous said…
Just a small correction to my previous post. It should of course have said, "what if I have javascript methods in the index.html" not javascript classes

Regards,
Simon
Mykola said…
I guess there are 2 options - either change the template in the SDK folder or change the generated index.html. The second is probably a better option. The Flex livedocs chapter called "Using the html-wrapper task" says: "You can customize the output of the wrapper and its supporting files after it is generated by Ant." That task can be automated with ant as well.
Anonymous said…
hey

Really nice tips!

will try to keep it in my mind

thanks!

Popular posts from this blog

cucumber-jvm and Android Studio

During this Winter holidays, I've been exploring a Behavior Driven Development and experimented with a couple of testing frameworks: Calabash and cucumber-jvm . In this post, I would like to describe setting up cucumber-jvm for Android Studio projects. I've extended cucumber-jvm examples with a version for Android Studio. Here is a copy in my github branch: https://github.com/mdzyuba/cucumber-jvm/tree/add_android_studio_example/examples/android/android-studio/Cukeulator . In addition to the example code, here is some details on how it was created. Dependencies The cucumber-jvm requires several libraries to be added to a project:  https://github.com/cucumber/cucumber-jvm/tree/master/android I've found it's easier to add those dependencies with the Android Studio project setup dialog because it takes care of the jar versions for you. File > Project Structure > Modules > app > Dependencies > + > Library dependency   > type "cuc

Using FlexUnit for Stress Testing

I saw quite a few questions in the forums on how to stress test a Flex application. I thought about it and came up with an idea that I want to share here. I think FlexUnit can be used for stress testing. It is not that difficult. I simply add multiple test runners for each client application and run all of them asynchronously. Here is the example of the FlexUnit runner: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" xmlns:flexunit="flexunit.flexui.*" creationComplete="onCreationComplete()"> <mx:Script> <![CDATA[ import flexunit.framework.TestSuite; import test.TemperatureConverterTest; import test.ArrayUtilTest; import mx.collections.ArrayCollection; import flexunit.flexui.TestRunnerBase; [Bindable] public var testClients:ArrayCollection; public var NUMBER_OF_TESTS:int = 100; private function onCreationComple