Flex, the miserly tutorial

I am loving Flex ! At Javapolis 2007, I have witnessed about three talks about this great product. The Flex-compiler itself is free, but since I don't want to purchase the FlexBuilder IDE (250$), let's see what we can do for free (of course with a little more effort).

1. Install Eclipse 3.3, Tomcat 6.0 and Java SDK 6
   
2. Create a web project in Eclipse and added the integrated Tomcat Server
   
3. Unzip the Flex 3 beta-zip in C:\Program Files\Flex 3
4. Associate th*.mxml files with the xml editor in Eclipse.
   
5. Downloaded the xsd (Flex 2 unfortunately) and copied it in my workspace. Then added it to Eclipse.
6. Create a flex folder in your fresh web project.
7. Create a simple HelloWorld.mxml
   
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF">
   
   <mx:Button label="Hello World" />
   
   </mx:Application>
   
   Notice the code assist thanks to the xsd imported in Eclipse.
   
8. Use FlexTasks to compile the .mxml to an swf:
   
   <?xml version="1.0"?>
   <project name="flex-compiler" basedir="." default="build">
   <property file="build.properties" />
   
   <taskdef resource="flexTasks.tasks" classpath="${flex.ant}/flexTasks.jar" />
   
   <property name="FLEX_HOME" value="${flex.home}" />
   <property name="APP_ROOT" value="${flex.src}" />
   <property name="DEPLOY_DIR" value="${flex.bin}" />
   
   <target name="build" depends="compile, wrapper"/>
   
   <target name="compile">
   <mxmlc file="${APP_ROOT}/HelloWorld.mxml" output="${DEPLOY_DIR}/Main.swf" keep-generated-actionscript="false">
   <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml" />
   <source-path path-element="${FLEX_HOME}/frameworks" />
   </mxmlc>
   </target>
   
   <target name="wrapper">
   <html-wrapper title="Hello World" width="100%" height="100%" bgcolor="red" application="app" swf="Main" version-major="9" version-minor="0" version-revision="0" history="true" template="express-installation" output="${DEPLOY_DIR}" />
   </target>
   
   </project>
   
   I used the following build.properties
   
   # Ant properties for using the flexTasks
   
   flex.ant=C:/Program Files/Flex 3/ant/lib
   flex.home=C:/Program Files/Flex 3
   flex.src=C:/Program Files/eclipse/flex_workspace/FlexSpringIntegration/flex
   flex.deploy=C:/Program Files/eclipse/flex_workspace/FlexSpringIntegration/WebContent/swf
   


9. Run the Ant task and see the swf and html where the swf is embedded in. Congratulations you created your first static Flex application

Next time, I will explain how to integrate these Flex applications with Java using BlazeDS (formerly known as Flex Data Services) to make the application a bit more dynamic.