Archive | February, 2007

Using Eclipse and Ant for Flex team development

Note: this article was originally published to the Wharton Computing Development Center.

Eclipse Ant Screenshot

Recently the Learning Lab has been discussing ways to do team development as we transition to Flex 2 and the Eclipse IDE. We’re starting a project now that will involve four developers, so we’ll need to keep our own working copies of the project. Not an earth-shattering idea, but it’s new for us–we usually share a single code base during development.

Ted, who has the most Eclipse experience in the group, suggested that Ant, a java-based build tool, could be used to make the team development process smoother. Because Ant ships with Eclipse and because Adobe recently released custom Flex Ant tasks, in theory it should be possible to create an Ant script that will mimic the default Flex build process and also perform extra tasks such as moving files around.

In practice, however, it’s not easy to create such a script if you’re new to Flex 2, Eclipse, and Ant because the documentation is scattered between all three products (as well as some blogs). So I munged the available information into a single “how to.” The steps below show how to implement a very basic Ant build script that will copy Flex code from the “master” code base to your working area, compile it, and create the swf html wrappers.

1. If you’re using the stand-alone version of Flex Builder, follow these directions to set up the Ant environment: http://www.peterelst.com/blog/2006/09/03/flex-builder-2-ant-support/. Skip this step if you’re using the plug-in version of Flex Builder.

2. Download the Flex Ant tasks from Adobe Labs and follow the installation instructions: http://labs.adobe.com/wiki/index.php/Flex_Ant_Tasks
Note: The instructions say to copy the flexTasks.jar file to “Ant’s lib directory.” I put my files in the locations below, which seems to work fine:

  • Stand-alone: C:Program FilesAdobeFlex Builder 2plugins
  • Eclipse plug-in: C:Program FilesEclipsepluginsorg.apache.ant_1.6.5lib

3. Open your Eclipse Flex project and add a build file to it. An Ant build file is an XML document that contains a series of tasks called “targets.” A sample build file template is attached.

4. Modify the build file template to work with your current project. The only things you should need to change are the properties (i.e., variables) at the top of the file:

  • FLEX_HOME: points to the location of your Flex SDK. By default this location is C:Program FilesAdobeFlex Builder 2Flex SDK 2 for the standalone version of Flex Builder and C:Program FilesAdobeFlex Builder 2 Plug-inFlex SDK 2 for the plug-in.
  • DEPLOY_DIR: the folder that will contain your Flex executables (i.e., the swf and its corresponding html wrappers)
  • MAIN_APP_ROOT: the location of the project’s “master” code base
  • WORKING_APP_ROOT: the location of your working folder

5. Open the Eclipse Ant window: Window–>Other Views (select Ant from the Show View window).

6. Once the Ant window is open in your Eclipse workspace, add your build file (see screenshot below):
a. In the upper-right hand corner of the Ant window, click the Add Buildfiles button (i.e., the button with the picture of an ant).
b. From the Buildfile Selection window, choose your build file and click OK.
c. You should now see your build file displayed in the Ant window. You can expand the individual tasks (i.e., targets).
d. You should be able to execute the individual tasks in the script by double-clicking them. Output will appear on the console.

This is as far as I’ve gotten. I’ve been using the built-in Flex compiler when working in my sandbox and the Ant script to get the latest code updates from the main project folder. It seems like a lot of work just to copy files around, but once the initial setup is complete it’s a handy way to avoid manually pushing updates from SourceSafe and potentially overwriting changes. No doubt there’s much cooler things you can do with Ant–if anyone has any tricks, please share!

Other resources:

  • Official Ant Manual, which includes a complete list of available Ant tasks: http://ant.apache.org/manual/index.html
  • Defining the Flex Ant Tasks within your Eclipse environments means that you won’t have to put the taskdef resource=flexTasks.tasks line at the beginning of the build scripts–Eclipse will just know how to find the tasks: http://www.flex2ant.org/
  • To set up Ant configurations and run the build tasks in a specified order, search for “Ant support” in the Eclipse documentation: http://help.eclipse.org/help32/index.jsp
Comments are closed