<gunua:Flex>

xmlns:gunua=”flex.gunua.com”

Using Ant to compile Flex Projects

In this post I am going to explain to you that how you can use Ant to compile your flex projects using the Flex Builder 3.

To know about how to enable the support for Ant in Flex Builder please click here

Step 1 - Create a new Flex project

Ok, so first we will create a new flex project and then will create a really simple mxml application. Here is what I created

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Label text="Hello World!"/>
</mx:Application>

So now my entire project is having only one mxml application, which is located under the src folder.

Step 2 - Keep the FlexTasks.jar file inside your project directory

The FlexTasks.jar file can be found at the following location on your machine:
[Flex Builder Install directory]\sdks\3.0.0\ant\lib

Copy the jar file (flexTasks.jar) from there and place it under the libs folder inside your flex project.

Step 3 - Create build.xml file

Under the root folder of your project, create new file using the File -> New… -> File menu.
name this file as ‘build.xml’

Step 4 - Define the project in the build.xml

Add the following inside your empty build.xml file:

<?xml version="1.0" encoding="utf-8"?>
<project name="My App Builder" basedir=".">
</project>

This defines the name of the project and sets the base directory as the root directory of the project

Step 5 - Add the taskdef tag

Inside the project tag, add the following tag:

<taskdef resource="flexTasks.tasks" classpath="${basedir}/libs/flexTasks.jar"/>

This node defines that where is the flexTasks.jar located.
Note that we are using a classpath which is relative to the base directory which we defined in the previous step. In my project I have placed this jar under the libs folder. If you wish to keep your flexTasks.jar file elsewhere, you must give the appropriate path here.

Step 6 - Adding the properties

In this example we are going to define only three main properties, namely, FLEX_HOME, APP_ROOT, and DEPLOY_DIR, in which we are going to define the paths containing the Flex frameworks directory, the directory which our application is residing, and, directory where the output will be placed, respectively. Here is how these properties tag look:

<property name="FLEX_HOME" value="C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0"/>
<property name="APP_ROOT" value="src"/>
<property name="DEPLOY_DIR" value="D:\output"/>

Note: Modify the value of the FLEX_HOME accordingly if your installation path of Flex builder 3 is different.

At this point of time, your build.xml should look like the following:

<project name="My App Builder" basedir=".">
    <taskdef resource="flexTasks.tasks" classpath="${basedir}/libs/flexTasks.jar"/>
    <property name="FLEX_HOME" value="C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0"/>
    <property name="APP_ROOT" value="src"/>
    <property name="DEPLOY_DIR" value="D:\output"/>
</project>

Step 7 - Adding the target

Now we will add the target node as following, below the properties:

<target name="main">
</target>

This target name can be anything that you prefer. It is just a name that we are assigning to a target that can be executed using Ant.

Now, within this target, we will add the necessary properties for compiling using the mxmlc node, which looks like following:

<mxmlc file="${APP_ROOT}/Main.mxml"
            output="${DEPLOY_DIR}/Main.swf">
        <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
        <source-path path-element="${FLEX_HOME}/frameworks"/>
</mxmlc>

In these nodes we are specifying the following four things:

1. The name and location of the application file, using the file attribute of mxmlc node
2. The name and location of the output swf file, using the output attribute of the mxmlc node
3. The file name and location of the flex-config,xml file
4. The source path to flex frameworks directory using the path-element attribute and source-path node

Note that we are using the properties that we defined in step 6

And that’s it. This script can now compile the application. This how my final build.xml looks:

<project name="My App Builder" basedir=".">
    <taskdef resource="flexTasks.tasks" classpath="${basedir}/libs/flexTasks.jar"/>
    <property name="FLEX_HOME" value="C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0"/>
    <property name="APP_ROOT" value="src"/>
    <property name="DEPLOY_DIR" value="D:\output"/>
    <target name="main">
        <mxmlc file="${APP_ROOT}/Main.mxml"
            output="${DEPLOY_DIR}/Main.swf">
        <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
        <source-path path-element="${FLEX_HOME}/frameworks"/>
        </mxmlc>
    </target>
</project>

Step 8 - Run As Ant Build

Save the build.xml file.

Right click on the build.xml file and from the context menu point to ‘Run As’ and select ‘Ant Build’

And you should see the messages from Ant Build in the console window. After it says that build is successful, you can open the output directory and launch the swf file.

Further Reading – Generating the html wrapper using Ant

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Powered by Wordpress | Using WP Premium theme by WP Remix with little modification