Requirements

Prerequisite knowledge
Prior experience working with Flex Builder to create applications is useful, but not required. Some knowledge of working with BlazeDS is also helpful.
 
User level
Intermediate
Required products
Flash Builder 3 (Download trial)
BlazeDS (Download trial)
Sample files
todolist1.zip (8 KB)

 
Additional Requirements

 
Spring
In this three-part article series, I'll cover the step-by-step process to create an application with a Flex/BlazeDS/Spring/Hibernate/MySQL architecture, built with Maven. The application is a standard to-do list that allows you to add, delete, and edit tasks from a list.
 
I'd like to acknowledge my friend Velo from Brazil who developed flex-mojos, a Maven plug-in that allows communication with Maven to build Flex projects. Without Velo's help, this project would not be possible.
 
Before we move on to the real thing, just a few words of caution:
 
  1. The application that we are going to build in this tutorial is by no means a real-life application. It can certainly be improved and adapted but those improvements are left as an exercise because they are not related to what we really focus on here: communication between the Flex front-end and the Spring back-end.
  2. One of the main pieces of this project is the flex-mojos from Velo. There are other Flex building Maven plug-ins available, but at the time of this writing, none of them offer the configuration options needed to build this project. If you are interested in seeing official Maven support built into Flex, you can cast your vote.

 
Project scope

The objective of this article series is to build a to-do list application that provides functionality to create, modify, delete, and display task items in a Flex UI. Figure 1 shows the global architecture we will implement:
 
Figure 1. The technology stack of the sample to do list project
Figure 1. The technology stack of the sample to do list project

The most challenging part of the project is setting up the Maven build. This project could have been built with Ant, but I don't particularly enjoy writing Ant scripts. As for using an IDE to build projects, depending on a particular development environment is usually not a good idea because any serious project needs some degree of testing and continuous integration. Even though Maven is not perfect, I still see it as the best solution.
 
As for JBoss, it's not a requirement at all—it just happens to be what I'm using. If you prefer, you could use a simple Tomcat setup instead.
 
To see the finished version of this sample project, view the demo.
 
 
Creating a root Maven project
The first thing we have to address when creating a Flex/BlazeDS project with Maven is to determine the right location for configuration files. Both the Flex compiler and BlazeDS server-side libraries require XML configuration files that describe AMF channels, destinations, adapters and so on. These files are usually named remoting-config.xml and services-config.xml. In order to prevent duplicating those configuration files, it might be tempting to put everything into one single war-packaged Maven module. But after some consideration this brings up other issues: this monolithic project setup is not really compliant with Maven standards and mixing Flex and Java compilers in the same module is not optimal. For these reasons, I decided to split the client-side and the server-side into two modules with a root pom-packaged module. And to avoid duplicating configuration file, we'll create a third shared module.
 
With that out of the way, let's get started. If you haven't already, be sure to download the sample files. The instructions provided assume that you have already installed Maven, Java, MySQL, and JBoss or Tomcat. If you need help with installation and setup, visit the respective websites to learn more about the installation process.
 
First, let's create the root todolist module. Create an empty Maven project using the default archetype. To do this, open a command line in the directory where you want to create the project. Then, run the following command:
 
mvn -DgroupId=org.epseelon.samples -DartifactId=todolist archetype:create
The command above creates a basic JAR project that we will modify to serve as a root module. Here are the steps:
 
  1. Delete the "src" directory in the newly created module
  2. Edit pom.xml and change packaging to "pom" instead of "jar"
  3. Add the following repositories to the POM:
<project> … <repositories> <repository> <id>flex-mojos-repository</id> <url>http://flex-mojos.googlecode.com/svn/trunk/repository/</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>false</enabled> </snapshots> </repository> <repository> <id>epseelon-repository</id> <url>http://m2repo.epseelon.org/</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>false</enabled> </snapshots> </repository> </repositories> <pluginRepositories> <pluginRepository> <id>flex-mojos-repository</id> <url>http://flex-mojos.googlecode.com/svn/trunk/repository/</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>false</enabled> </snapshots> </pluginRepository> <pluginRepository> <id>epseelon-repository</id> <url>http://m2repo.epseelon.org/</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>false</enabled> </snapshots> </pluginRepository> </pluginRepositories> </project>
The first repository contains the flex-mojos created by Velo and the second one is my repository, where you can find BlazeDS libraries. At the time of this writing, BlazeDS libraries are not available in a public repository. But there is an issue you can vote for if you want it to happen.
 
It's a best practice to specify an explicit version for plug-ins, especially since we'll have submodules using maven-assembly-plugin and a maven-dependency-plugin. Add the following build section to the pom.xml file:
 
<build> <pluginManagement> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-dependency-plugin</artifactId> <version>2.0</version> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-assembly-plugin</artifactId> <version>2.2-beta-2</version> </plugin> </plugins> </pluginManagement> </build>
Now that we've updated the pom.xml file, the next part involves building the Flex module. We'll work on that in the next section of this article.
 
 
Creating a Flex module
Building the Flex module is relatively straightforward. There are several Maven plug-ins designed to handle Flex-based projects, including ServeBox and Israfil. However, the last time I tested them, neither of these plug-ins was suitable to work with BlazeDS projects. I was therefore very excited to discover that Velo developed his own Maven plug-in named flex-mojos. And I have to say that he's done an excellent job, because it's working great, as you will see.
 
Before creating the Flex module, you need to open a command line in the todolist directory you've created above. Then, run the following command:
 
mvn archetype:create \ -DarchetypeArtifactId=maven-archetype-flex \ -DarchetypeVersion=1.0 \ -DarchetypeGroupId=dk.jacobve.maven.archetypes \ -DgroupId=org.epseelon.samples \ -DartifactId=todolist-ria \ -DpackageName=
This archetype creates a Flex project under the root module created above, but it uses israfil mojo by default. So once you've created your subproject, the next step is to replace the israfil plug-in configuration with the flex-mojos plug-in, as shown below:
 
<plugin> <groupId>info.rvin.mojo</groupId> <artifactId>flex-compiler-mojo</artifactId> <version>1.0-beta3</version> <extensions>true</extensions> <configuration> <locales> <param>en_US</param> </locales> </configuration> </plugin>
You can also delete the properties section, because flex-mojos uses its own version of the Flex compiler. Last but not least, add the following dependencies section to the POM:
 
<dependencies> <dependency> <groupId>com.adobe.flex.sdk</groupId> <artifactId>playerglobal</artifactId> <version>3.0.0.3.0.0.477</version> <type>swc</type> <scope>external</scope> </dependency> <dependency> <groupId>com.adobe.flex.sdk</groupId> <artifactId>flex</artifactId> <version>3.0.0.3.0.0.477</version> <type>swc</type> </dependency> <dependency> <groupId>com.adobe.flex.sdk</groupId> <artifactId>framework</artifactId> <version>3.0.0.3.0.0.477</version> <type>swc</type> </dependency> <dependency> <groupId>com.adobe.flex.sdk</groupId> <artifactId>framework</artifactId> <version>3.0.0.3.0.0.477</version> <type>resource-bundle</type> <classifier>en_US</classifier> </dependency> <dependency> <groupId>com.adobe.flex.sdk</groupId> <artifactId>rpc</artifactId> <version>3.0.0.3.0.0.477</version> <type>swc</type> </dependency> <dependency> <groupId>com.adobe.flex.sdk</groupId> <artifactId>rpc</artifactId> <version>3.0.0.3.0.0.477</version> <type>resource-bundle</type> <classifier>en_US</classifier> </dependency> <dependency> <groupId>com.adobe.flex.sdk</groupId> <artifactId>utilities</artifactId> <version>3.0.0.3.0.0.477</version> <type>swc</type> </dependency> </dependencies>
After making those modifications, run "mvn install" from the todolist directory. If everything is set up correctly, you'll be presented with a BUILD SUCCESSFUL message. You can now use Flash Player to view this SWF:
 
todolist/todolist-ria/target/todolist-ria-1.0-SNAPSHOT.swf
At this point we have set up the Flex compiler plug-in and it is working on a simple client-only application. In the next installment of this three-part article series, I'll describe the process to create the server module based on Spring and Hibernate.
 

 
Where to go from here

Read Part 2 of this article series to learn how to develop the server module and work towards completion of the to-do list sample project.
 
In the meantime, visit the Flex Developer Center to find the latest articles, sample projects, and tutorials. Also, see the Flex online documentation to get specific details about working with Flex to create applications.
 
And to learn more about working with Flex and BlazeDS, read this article: Collaborative data entry with Flex and BlazeDS.