This article is written on top of the great work that Sébastien Arbogast has done. He has written 3 articles that showed you how to wire up Flex, BlazeDS, Spring, Hibernate and MySQL with Maven as build process. I have included his articles below as your reference.

1. The Flex, Spring, and BlazeDS full stack – Part 1: Creating a Flex module
2. The Flex, Spring and BlazeDS full stack – Part 2: Writing the to-do list server
3. The Flex, Spring and BlazeDS full stack – Part 3: Putting the application together

I have found Sebastien's work as a good foundation for my own project. To contribute back to the community, I will write a series of articles to show you how can customize and extend the todolist sample.

What is in the Part 1 of the series...

1. Enhancements on the Maven build process
   • Leverage RSL to factor our the framework swc, so the size of the application swf will be reduced. Apart from that, I also take advantage of Flash Player Cache that is available after version 9 update 3 to cache the framework libraries.
   • Clean up the Flex and BlazeDS dependencies in POM as the latest version of the sdk is available and the BlazeDS dependencies are officially available.
   • Include some common reports for maven site generation
   • Embed Jetty web server in the build process for quick deployment and testing
2. Document how to get the sample up on Eclipse for development
   
3. Use Mate as Flex framework
   • Restructure ToDoList sample to leverage Mate framework
   • Factor out Mate as RSL and integrate it with Maven build process via Flex-mojo plugin.

What are in the coming articles...

1. In part 2 of this series, I will show you how to use flex-mojo to build a modular Flex application.
2. In part 3 of this series, I will show you how to test your flex app via FlexUnit (Unit test) and FlexMonkey (Functional test)
3. In part 4 or this series, I will work on server side. I am planning to add monitoring, caching and security to the server side.

Review "ToDoList" sample

Before I start my journey, let me highlight what Sebastien has done first:

1. Sebastien's sample demonstrates how to use Maven as a build process. There are 3 parts or subprojects in his sample. They are:
   
   • todolist-config (configuration files shared by other subprojects)
   • todolist-ria (Flex frontend)
   • todolist-web (Server side that supports the Frontend)
2. All these subprojects are considered as modules of the main project (root POM). Finally, they are combined together into war artifact and ready to deploy to Tomcat or other J2EE webapp server.
3. Flex frontend and backend communicate through a binary RPC protocol - AMF. AMF is considered to be the simplest and fastest remoting approach available in Flex. Recently, Adobe has released BlazeDS as an open source implementation of AMF spec. In this sample, BlazeDS is used. To use BlazeDS, there are few things you need to do:
   
   • Externalize your POJO service via BlazeDS. This sample shows you how to integrate BlazeDS with Spring
   • Make BlazeDS endpoints availabe to the Net via Servlet.
   • Have frontend and backend shared the same BlazeDS configuration files.
4. In this sample, you can also find out how to use flex-mojo maven plugin to compile the Flex frontend code into swf. Apart from flex-mojo plugin, there are other two good plugins worth to mention:
   
   • maven-assembly-plugin - can be used to bundle all the files under a directory into a zip file. It is used by todolist-config to bundle all the configuration files (service-config.xml and remoting-config.xml) into a zip during the package phase.
   • maven-dependency-plugin - can be used to unpack the zip file and move to the place you want. It is used by todolist-web to unpack the config zip during the generate-resources phase.

Enhancements on maven POM

I have modified the sample's maven pom as follows:

• Link to new repository "Sonatype Forge" in the root POM. So, I can use the new version of flex-mojo and simplify the todolist-ria adobe framework dependencies. Apart from that, I also take away the private repository from Sebastein because BlazeDS libraries are available in official maven repository (Note: The BlazeDS libraries available in official maven repo are in version 3.0 instead of 3.0.0.544. So, you need to modify the webapp pom correspondingly).

    <repositories>
        <repository>
            <id>flex-mojos-repository</id>
            <url>http://svn.sonatype.org/flexmojos/repository/</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

    <pluginRepositories>
        <pluginRepository>
            <id>flex-mojos-repository</id>
            <url>http://svn.sonatype.org/flexmojos/repository/</url>
            <releases>
                <enabled>true</enabled>
            </releases>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>

• Because I link to Sonatype repository, I can have my todolist-ria depends on one flex-framework pom dependency instead of all the swc dependencies. Note that the pom dependency is a way to factor out all the adobe swc dependencies that makes your pom easier to maintain.

        <dependency>
            <groupId>com.adobe.flex.framework</groupId>
            <artifactId>flex-framework</artifactId>
            <version>3.1.0.2710</version>
            <type>pom</type>
        </dependency>

• I include mysql driver as dependency in my webapp pom. I think it is cleaner to bundle it in war. I have also added jetty plugin in the POM so you have a web server embedded in the build process. With this, you can run this sample application right after you check it out from svn (assume you have maven 2 installed). To start jetty, you can issue the following maven command under your webapp project.

project_root> mvn clean install
project_root/jp-web> mvn jetty:run-war

• I have included some reports that will be shown after site generation. You may not be able to do mvn site-deploy because it is linked to my web hosting site. However, you can modify it for your own sake.

Get the sample up on Eclipse

To develop on Eclipse, you can follow the steps below:

1. Create Eclipse project file via running the command below at the project root. This will create 2 eclipse projects. One for todolist-ria and one for the webapp. You noticed that I use the -Declipse.downloadSource=true to include the source files of my dependencies in my eclipse project. Therefore, I can get to the source code if needed.

mvn -Declipse.downloadSource=true eclipse:eclipse

1. Import the projects into Eclipse
2. Add new variable M2_REPO and set it equals to [home]/.m2/repository
3. If you have installed Flex Builder plugin to your Eclipse, you can Add Flex Project Nature to the todolist-ria project.
   • Select Application Server Type: J2EE
   • Put check on "Use remote object access service" with LiveCycle Data Service selected.
   • Set up the path. I have my tomcat installed under C:\tools with default 8080 as port. You should make the changes if you installed it differently.
   • 
   • Remove the generated main.mxml under the src folder.
   • Set index.mxml under src folder as default Flex application file to run.
   • Use Default Flex SDK in Flex Compiler Configuration instead of Server Flex SDK
   • Right click and select Recreate HTML Template if you see error.
   • After all these, you have configured your Flex application pointing to the webapp server and sharing the BlazeDS configuration files. You can verify in Flex Compiler Configuration's Additional Compiler Parameters. See whether you see this: -services "C:\tools\tomcat-6.0.16\webapps\jp\WEB-INF\flex\services-config.xml" -locale en_US
   • Move the war to your tomcat's webapp folder and start it under remote debugging setting. If you are using window, set DEBUG_OPTS=-Xdebug -Xrunjdwp:transport=dt_socket,server=y,address=8787,suspend=n under your bin/catalina.bat.
   • Start your webapp via bin/startup.bat
   • Put breakpoint under TodoServiceImpl save method and start remote debugger on localhost:8787
   • Right click the index.mxml and Run As Flex Application.
   • Add a new entry and save it on the flex app. You should see your remote debugger halt at the breakpoint for you to debug.
   • Now you can change your flex code and test it out without leaving your Eclipse. However, if you modify the service in webapp, you need to run "mvn clean install" and deploy the war to the tomcat before your flex code can call your server-side code via AMF.

Use Mate as Framework

If you are not familiar with Mate, click the image below that moves you to a nice presentation.

What did I do to restructure the todolist sample to make it Mate app?

Download

I have made my work available at: www.solutionhacker.com/wp-content/uploads/todolist-jp-modified.zip

Reference

Below are the references I used for the article:

1. Flex mojo compiler user guide
2. Flex mojo dependency scope rules
3. Flex 3 feature introduction: Flex 3 RSL
4. Improving Flex application performance using Flash Player Cache
5. FNA archetype projects 

Recently, I found out that Adobe has released BlazeDS (subset of LiveCycleDS) that has 4 main advantages:

1. AS3 to Java object communication (no XML passes back and forth is needed!)
2. Boost up performance b/c AMF is a binary protocol
3. Built-in proxy support that gets around the cross domain security issue from Flex in ease.
4. Allow push messaging

I have followed the guideline and set it up. Now my Flex application can call my Java object method without passing xml back and forth. It is awesome! During the setup process, you may experience your flex cannot find the destination set up in the server.

The trick here is to add a services argument to the mxmlc call, something of the form below should do the trick! 

-services “[local path to your java project]/WEB-INF/flex/services-config.xml”

Now you may start enjoying how AS3 talks to your Java Object. However, if  we bypass the Servlet layer in the code, how can we carry session across remote method calls? Great that I have found out how to handle it via this article. In short, you can access Session from your Java object via:

FlexContext.getFlexSession()

Here is the quote I got from the BlazeDS developer guide.

The FlexContext class is useful for getting access to the session and the HTTP pieces of the session, such as the HTTP servlet request and response. This lets you access HTTP data when you use a Flex application in the context of a larger web application where other classes, such as JSPs or Struts actions, might have stored information.

The FlexSession class provides access to an ID and also provides setAttribute and getAttribute functionality. This is useful for storing data on the server that doesn't have to go back to the client. However, FlexSession is not cluster-aware; if a client connects to a different server in the cluster, the client receives a new FlexSession. Nothing stored in the FlexSession attributes is persisted for clustering purposes. The FlexSessionListener class is useful for monitoring who is connected. You add a listener by using the static method to track new connections being made. You receive a reference to the session that was added. Each session can then report when it is destroyed to those same listeners. You use this for monitoring connections that close, and also to clean up resources.

When I looked into the source of FlexContext, I noticed that it leverages ThreadLocal to store context info like request, response and session.

    private static ThreadLocal sessions = new ThreadLocal();  
    /**
     * The FlexSession for the current request.  Available for users.
     */
    public static FlexSession getFlexSession()
    {
        return (FlexSession)sessions.get();
    }

Reference

Below are some of the useful references I have read so far:

1. Jim Boone's Blog

1. Write Once Deploy Everywhere - Flex generates SWF that runs on top of Flash Player VM and behaves consistently across different browsers, even mobile phones later. With this, all the browser compatibility issues are basically offloaded by Adobe.
2. Solid programming model with rich widgets and libraries.
3. AMF makes Flex object to Java POJO communication possible. No need to use verbose XML - Check out BlazeDS.
4. Flex IDE is a plugin in Eclipse that gives stepwise debugging, UI design console, code completion and more. Working with Actionscript is like Java.
5. Flex SDK is open source and free.
6. Great support on video streaming
7. Integrate with HTML, Javascript and CSS, so it is not invasive adoption.
8. Support offline application via AIR - Adobe has been working on the Adobe Integrated Runtime (AIR) that allows for using existing web application development skills to build and deploy desktop applications. AIR is still in early development, but promises to allow developers to use their newly learned Flex skills to build desktop applications. No need to learn Swing, Applet...etc.
9. Provide several RPC methods like HTTPService, WebService, AMF and JSON. AMF is 10x faster than SOAP. James Ward developed his Census Flex application to provide performance benchmarks for the different RPC methods in the mainstream RIA technologies. (Download)
10. You can keep the state in the Flex app and have your server completely stateless.
11. More to come! :)