Wednesday, March 24, 2010

A Flex Ant Build: Optimized Modules, Libraries, Runtime CSS, HTML Wrapper, Runtime Images

A common need in a system involving Flex is for the ability to build the Flex portion using Ant. While there are some online examples, there is not one that I have been able to find that does and describes all of the things I typically need to do in Flex . The things which I typically need to do are the following:
  • Build optimized modules without having to declare a separate compile target for every module
  • Include one or more SWC libraries
  • Compile the CSS into a SWF to be loaded at runtime
  • Create a custom HTML wrapper, that is also responsible for setting the application endpoint
  • Including images to be loaded at runtime
  • Uses a properties file to define all the elements
This build also assumes the following:
  • There is one source directory called "src"
  • Runtime images are somewhere under the source directory
  • CSS is somewhere under the source directory
  • All modules are in a single directory, that contains nothing but the modules
  • You have the Flex ant task JAR in libs
  • You have the Ant Contrib JAR in libs
  • You have a separate index.template.html for the build that contains ${} variables for the endpoint
For example the following is my example project directory structure:
The build works by executing these targets as part of its default target:
  • clean - deletes the deployment directory
  • compile - compiles the main application into its SWF
  • compile-modules - uses a "for" loop on all the MXML files in the modules directory and calls the "compile-module" target on them
  • compile-module - compiles a module into a SWF file, optimized for the main application
  • compile-css - compiles the CSS into a SWF
  • compile-wrapper - builds the HTML wrapper for the application, and includes the endpoint using FlashVars
  • copy-images - Copies runtime images from source into deployment
  • clean-up - deletes any generated files
Here are the build files:


huyanh said...

I can't believe that there is no comment for an useful post like this.

You are right: hard to find a post on Internet mentioning things like you did here
Thanks alot

NamNguyen said...

Thanks so much :)