Blog

[UPDATE 2] If you are still having version issues with the sample application featured in this article, you can get a fully upgraded version here

[UPDATE] This article series has been reedited on the Adobe Developer Connection. For more information, see this post.

In the previous article of this series, I laid the ground for what will be a step-by-step tutorial about creating a Flex/BlazeDS/Spring/Hibernate project. In this article, I will go into more detail about the creation of the Flex UI for our Todo List application.

Creating a root Maven project

The first issue we have to tackle when creating a Flex/BlazeDS project with Maven is the location of configuration files. Both the Flex compiler and BlazeDS server-side libraries need XML configuration files that describe AMF channels, destinations, adapters and so on. They’re usually called remoting-config.xml and services-config.xml. So if we want to prevent duplicating those configuration files, it could be interesting to put everything into one single war-packaged Maven module. But then there is another issue: this monolithic project setup is not really compliant with Maven standards and mixing Flex and Java compilers in the same module is quite ugly. That’s why I’ve chosen to split the client-side and the server-side into two modules with a root pom-packaged module, at the cost of duplicating configuration files.

So first things first, let’s create the root todolist module. This article series assumes that you have already installed Maven, Java, MySQL and JBoss or Tomcat. If you have not already done so, see their respective website. Now the first thing to do is to create an empty Maven project using the default archetype. To do this, change your working directory to where you want to create the project and run the following command.

mvn -DgroupId=org.epseelon.samples -DartifactId=todolist archetype:create

This command creates a basic JAR project that we will modify to serve as a root module.

1. Delete the “src” directory in this 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 is the one for the flex-compiler mojo, the second one is my own repository, on which you’ll be able to find blazeds libraries until Adobe releases them in a public repository.

[EDIT]
Finally, since we’re gonna use maven-assembly-plugin and maven-dependency-plugin in submodules, it’s good practice to specify an explicit version for those plugins here. So add the following build section to pom.xml:

<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>

[/EDIT]

Creating a Flex module

We’re going to start with the “easy” part: the Flex module. There are several maven plugins to handle Flex-based projects, namely ServeBox and Israfil. But the last time I tried them, none handled BlazeDS projects, which is why I reported this issue on Adobe issue tracking system. And then one day, a brazilian guy named Velo decided that it was time to act, and he started working on his own Maven plugin. And I have to say that he’s working very fast, because it’s working great, as you will see.

You have to change your working directory to the todolist directory you’ve created above and 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 create a Flex project under the root module created above, but it uses israfil mojo by default. So once you’ve created your subproject, you’ll have to replace the israfil plugin configuration with the following one:

<plugin>
  <groupId>info.rvin.mojo</groupId>
  <artifactId>flex-compiler-mojo</artifactId>
  <version>1.0-alpha7</version>
  <extensions>true</extensions>
  <configuration>
    <locales>
      <param>en_US</param>
    </locales>
  </configuration>
</plugin>

You can also delete the properties section, as flex-compiler-mojo uses its own version of the Flex compiler. Last but not least, you have to 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>

With those modifications, again from the todolist directory, try to run “mvn install”. Normally, you should get a BUILD SUCCESSFUL message, and you should be able to view todolist/todolist-ria/target/todolist-ria-1.0-SNAPSHOT.swf in Flash Player.

Tadaaaa! That’s it for this second episode: now we have the Flex compiler plugin working on a simple client-only application. In the next episode (now that Luke and Lorelei are back together… woohooo!), we’ll create the server module with Spring and Hibernate. Stay tuned!

PS: Here is Todolist project with just the Flex module

PS II: If someone has a good code beautifier WordPress plugin to suggest, I’ll take it. I’ve tried WP-Syntax but it sucks with XML code.