I'm a user of both Maven and Flex Builder for several years now. Several times, I was wondering how we could use those two technologies together and in parallel. So I started to "google" and found an interesting article by Sebastien Arbogast about the subject.
But it does not entirely satisfy me because it addresses Flex and Maven together but not what I am looking for, Flex Builder and Maven. The difference is that I want to be able to design and debug my project using Flex Builder, and when I am ok with the quality, generate with Maven.
So I decided to build a sample that could be used in this tutorial. If you want to follow this series, I created also a specific tag in my blog, MavenAndFlexBuilderTutorial.
Before we go in the details, let's first examine the tricky points when considering a Flex Builder project as a Maven artifact.
Analysis
A Flex Builder project is basically an Eclipse project with two natures, one for the Flex part and another the Web part. In terms of Maven artifacts, the first one could be seen as a SWF artifact (thanks to flex-mojos), the second as a WAR artifact with a dependency from the second to the first.
The first artifact will have a -flex suffix, the second -web suffix.
Generate SWF with Maven ?
So the first question that comes is: how come can I build a SWF artifact with Maven. Here comes flex-mojos, an open source project that provides Maven plugins for managing Flex based artifacts. You can find flex-mojos using this link.
In order to use flex-mojos, you just need to specify swf as the packaging in your pom, but because the flex-mojos are not deployed on the Maven central repository, you will need to specify the flex-mojos Maven repository (http://svn.sonatype.org/flexmojos/repository) as both standard an plugin repositories. This will be done in the master pom of our solution.
The next thing to do is to declare the flex-mojos plugin as an extension to Maven, otherwise Maven will not be able to process SWF artifacts. This will also be done in our master pom.
So, at this point, it seems quite simple: we have two pom (SWF and WAR) plus the master POM.
Handle shared use of Flex remoting configuration files
But some difficulties come: when you generate the SWF, the Flex compiler needs to have access to the Flex remoting (BlazeDS/Livecycle) configuration file (services-config.xml). This files resides in the web application. So, according to Maven rules, it is not possible for an artifact (SWF) to access a resource from an artifact (WAR) which as a dependency of this artifact (SWF).
The solution I choose is to add a new artifact (with JAR packaging and -config suffix), used only to store these configurations files.
When the SWF artifact will be build, it will first unpack the files from the -config artifact in a temporary directory and specify the file to the Flex compiler.
Handle HTML start page
In Flex Builder, when you created you project, a sub-directory called html-template is created. When you launch you project, these template files are processed and copied into the target WAR application. However, this directory cannot be renamed (I found no way to specify another directory name for the templates files as of Flex Builder 3.0.1). So we will created another artifact (with JAR packaging and -html-template suffix). When the WAR artifact will be build, it will first copy these files into a specify resource directory and process these files: the Maven filter mechanism will be used to replace some placeholders in the HTML page.
Proposed directory layout
If we call myapp our application, the directory layout will be the following:
myapp pom.xml html-template pom.xml myapp-config pom.xml src/main/resources Remoting config files myapp-flex pom.xml src/main/flex MXML and AS files myapp-web pom.xml src/main/filters filter.properties src/main/java Java files src/main/webapp WEB-INF/flex WEB-INF/lib web.xml
How this layout can be done inside Flex Builder?
By default, when Flex Builder creates a Flex application, Flex files are under the flex_src directory, Java files under the java directory and the web application under the WebContent directory.
So one way to get the previous directory layout would be to give myapp-flex/src/main/flex as the Flex sources directory, myapp-web/src/main/java as the Java directory and myapp-web/src/main/webapp as the web application directory.
Unfortunately, the Flex builder wizard does not allow extra sub directories for the Flex directory and the web application directory. So we will use a single layered directory for those parameters and will then modify the Eclipse project in order to reach the proposed directory layout.
In the next part of this series, we will describe all the steps from the wizard to the files modifications to reach the goal.
7 comments:
This was really helpful.
Wow. This is exactly what I've been looking for - thank you, and keep 'em coming! I have set up a flex builder/maven project in a similar manner and would have blogged about it if I didn't see this first. What I'm struggling with is the fact that there will be a number of top-level flex applications in our webapp, and we'd rather not split out one maven module per flex app, which is the maven/flex-mojos way. Have you found a way around this?
Julie,
I did not quite understand clearly your question. Can you describe a little bit more in detail what you want to do and how is structured your application ?
I'm coming from a maven/java background and am just learning about flex, so forgive me if my terminology is off. Let me try explaining further...
Our particular web application will contain multiple top-level flex applications, meaning that there are multiple mxml files, each one being built by maven into a separate swf file. Each of these swf files may additionally reference multiple flex modules, which are themselves swf artifacts. The flex-mojos only lets you specify one top-level application/swf in the pom.xml, like so:
<plugin>
<groupId>info.rvin.mojo</groupId>
<artifactId>flex-compiler-mojo</artifactId>
...
<configuration>
...
<sourceFile>MyApp1.mxml</sourceFile>
<output>MyApp1.swf</output>
<moduleFiles>
<module>Module1.mxml</module>
<module>Module2.mxml</module>
</moduleFiles>
...
</configuration>
</plugin>
Our web application also has MyApp2.mxml, MyApp3.mxml, etc., and the source code for all of these lives a single maven module. I'm trying to find a way to set up the maven module to produce artifacts for all of these mxml files, so that my WAR project can scoop them all up. Of course the alternative is to split up our UI into multiple maven modules, which would impact our UI developers and possibly take longer to implement, even though it's the maven way.
In the Maven philosophy, one file generated by the build means one artifact. So, as a Flex module leads to a separate SWF file, I would say that this must be in a separate Maven artifacts. By the way, it doesnt impact the WAR generation because what needs to be done is to first declare two SWF dependencies (one for the application SWF, the other for the module SWF). Then, I used the dependency plugin to copy those SWFs in the WAR, but the selection criteria can be take all SWF dependencies.
Great explaination. I can't explain well so I created an archetype for this purpose: maven-blazeds-spring-archetype.
Seems the project structure is standardized now. If you download the sample test application, you'll see the same.
In my project, I've been resovling some of the issues to have it well-integrated with Eclipse and Flex Builder but not yet have time put on wiki
Please have a try and let me know any further suggestions
Look forward to the next post.
Cheers,
Trung
thank u r information
it very useful
u r blog Is very nice
Post a Comment