Java Chatter and Random Nagging

Wednesday, December 26, 2007

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.

3 Comments:

At 8:39 pm, Anonymous Anonymous said...

Thanks for the tutorial!

 
At 5:06 am, Anonymous www.software100s.blogspot.com said...

Nice review.

 
At 8:50 am, Blogger moriyapink said...

I recently learn about Flex and its use in Java.i face many difficulty to fund this software and its installation.your this blog explain me very clearly what mistake i does when i install it.i am so happy to read your blog.nice to share it with us. Parental Control Software

 

Post a Comment

<< Home