www.flexguse.de
Tutorial setup Flex project with Maven Version 1.0
Christoph Guse
Tutorial setup Flex project with Maven
page 1 of 29
www.flexguse.de
Table of contents 1 Preface............................................................................................................................................................................................. ............................3 1.1 Why do I write this tutorial? ............................................................................................................................................................. ......................3 1.2 What will you learn in this tutorial?................................................................................................................................................................. ........3 1.3 Who should read this tutorial?.................................................................................................................................................. .............................3 1.4 What are the templates for this tutorial?............................................................................................................................................................... ..4 2 Prerequisites................................................................................................................................................................................................... ..............5 2.1 Installation of Flex SDK in local Maven repository................................................................................................................................................. .5 2.1.1 Flex SDK download.......................................................................................................................................................... ..............................5 2.1.2 Flex SDK installation....................................................................................................................................................... ...............................5 3 Root maven project creation............................................................................................................................................................ .............................6 3.1 POM modifications............................................................................................................................................................................................. ....7 4 Flex subproject creation............................................................................................................................................................................... .................8 4.1 POM modifications............................................................................................................................................................................................. ....9 5 Flex configuration submodule creation....................................................................................................................................................... .................14 5.1 Flex configuration....................................................................................................................................................................................... ..........14 5.2 POM modifications............................................................................................................................................................................................ ...17 5.2.1 Step 1........................................................................................................................................................................................... ................17 5.2.2 Step 2......................................................................................................................................................................................................... ..18 6 Webapplication subproject creation..................................................................................................................................................................... ........19 6.1 POM modifications........................................................................................................................................................................................... ....20 6.2 Webapplication web.xml.................................................................................................................................................................... ..................24 Tutorial setup Flex project with Maven
page 2 of 29
www.flexguse.de 6.3 Maven and Java version......................................................................................................................................................................... .............25 6.4 Test the build process.................................................................................................................................................................................... ......26 7 Summary........................................................................................................................................................................................ ............................27
Tutorial setup Flex project with Maven
page 3 of 29
www.flexguse.de
1 Preface Adobe Flex is a powerful tool to create nice Smart Clients. Adobe Flex Builder is a very nice IDE to use the Flex technology, but for building enterprise applications it lacks some functionality to manage the build process of large applications with several dependencies. In the Java world Maven is the technology to manage complex applications with a lot of dependencies. Why not bring both technologies – Adobe Flex and Maven – together? Fortunately the Flex community is very active and provides several solutions for Flex and Maven, so I'm able to combine several approaches and write this tutorial.
1.1 Why do I write this tutorial? Well, mainly to have guide for my own projects.
1.2 What will you learn in this tutorial? You will learn to create a Maven Flex project skeleton which has a Webapplication .war file as build result which can be deployed in a Java webserver. The webapplication includes BlazeDS, so everything is provided to develop a Flex ↔ BlazeDS ↔ Java Smart Client Webapplication.
1.3 Who should read this tutorial? This tutorial is dedicated to Java and Flex developers who want to put their development to a more professional level. Tutorial setup Flex project with Maven
page 4 of 29
www.flexguse.de
1.4 What are the templates for this tutorial? Sébastian Arbogast wrote an excellent three part article1 about Flex, Spring and BlazeDS. This is the original for this tutorial. Sébastian wrote the article for the Flex SDK 3. In the meanwhile Adobe released Flex SDK 3.1 and the mojos written by VELO2 have reached the version 2.0M5. This causes several changes in the Maven configuration which are covered in this tutorial.
1 http://www.adobe.com/devnet/flex/articles/fullstack_pt1.html 2 http://blog.flexmojos.info/
Tutorial setup Flex project with Maven
page 5 of 29
www.flexguse.de
2 Prerequisites To use this tutorial you need Java 1.5 or above, Maven 2.0.9 or above, a download of Flex SDK 3.1.0.2710 and Internet access.
2.1 Installation of Flex SDK in local Maven repository There is no official Flex SDK Maven repository, so you have to install the SDK 3.1.0.2710 locally in your Maven repository. Thanks to VELO3 there is an install mojo which makes the SDK installation very handy.
2.1.1 Flex SDK download Download Adobe Flex SDK 3.1.0.27104 and unzip it somewhere in your filesystem
2.1.2 Flex SDK installation To install the Flex SDK to your local maven repository open a command shell and use the maven command mvn info.flexmojos:installmojo:2.0M5:installsdk Dflex.sdk.folder=${flex sdk folder} Dversion=3.1.0.2710
Maven starts to work and should return "Build Successful". 3 http://blog.flexmojos.info/2008/08/21/installmojo/ 4 http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3
Tutorial setup Flex project with Maven
page 6 of 29
www.flexguse.de
3 Root maven project creation Create the root maven project using the maven command mvn DgroupId={your group id} DartifactId={your artifact id} archetype:create
The groupId is something like 'de.flexguse' and the artifactId like 'demo' but this really depends on your project. Maven should start to work and give you a 'Build Successful'.
Tutorial setup Flex project with Maven
page 7 of 29
www.flexguse.de
3.1 POM modifications The pom.xml file created by Maven needs to be modified, the result must look like this: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/mavenv4_0_0.xsd"> <modelVersion>4.0.0 <parent>
info.flexmojos <artifactId>flexsuperpom
2.0alpha4 de.flexguse <artifactId>demo <packaging>pom
1.0SNAPSHOT flexmail http://maven.apache.org org.apache.maven.plugins <artifactId>mavendependencyplugin 2.0
Tutorial setup Flex project with Maven
page 8 of 29
www.flexguse.de org.apache.maven.plugins <artifactId>mavenassemblyplugin 2.2beta2 <dependencies> <dependency>
junit <artifactId>junit
4.4 <scope>test
The changes are marked in bold letters. The 'parent' node must be added so flexmojo has all it's needed dependencies and repositories. The 'packaging' value must be changed to have a root maven project. The 'build' node is needed well, I don't know it exactly. The version of junit is changed because I prefer to use Junit 4.
4 Flex subproject creation The Flex project is covered by the Root Maven application. Please navigate into the newly created root project folder in the command line and use the Tutorial setup Flex project with Maven
page 9 of 29
www.flexguse.de Maven command: mvn archetype:create DgroupId=de.flexguse DartifactId=demoria DarchetypeGroupId=com.codeadept DarchetypeArtifactId=flexmojosarchetype DarchetypeVersion=1.0SNAPSHOT DremoteRepositories=http: //flexonjava.googlecode.com/svn/repository
The archetype was created by Jeremy Anderson5 and creates a complete Flex project.
4.1 POM modifications The pom.xml created by the flexmojosarchetype is not correct for the Flex SDK 3.1.0.2710, so we have to do some manual changes.
<project> <parent> <artifactId>demo
de.flexguse 1.0SNAPSHOT <modelVersion>4.0.0
de.flexguse <artifactId>demoria <packaging>swf
1.0SNAPSHOT <properties> <maven.test.skip>true 5 http://blog.codeadept.com/2008/06/12/mavenarchetypeforflexmojos/
Tutorial setup Flex project with Maven
page 10 of 29
www.flexguse.de
<sourceDirectory>src/main/flex src/test/flex flextimerecordingria info.flexmojos <artifactId>flexcompilermojo <extensions>true en_US demo org.apache.maven.plugins <artifactId>mavendependencyplugin <executions> <execution> unpackconfig unpackdependencies generateresources
Tutorial setup Flex project with Maven
page 11 of 29
www.flexguse.de ${project.build.directory}/generatedresources democonfig ${project.groupId} <excludeTransitive>true ${basedir}/src/main/resources ${basedir}/target/generatedresources true <dependencies> <dependency>
flexunit <artifactId>flexunit
0.85 swc <scope>test <dependency>
flexunit.junit <artifactId>flexunitoptional
0.85 swc <scope>test
Tutorial setup Flex project with Maven
page 12 of 29
www.flexguse.de <dependency>
com.adobe.flex.framework <artifactId>playerglobal
93.1.0.2710 swc <scope>external <dependency>
com.adobe.flex.framework <artifactId>flex
3.1.0.2710 swc <dependency>
com.adobe.flex.framework <artifactId>framework
3.1.0.2710 swc <dependency>
com.adobe.flex.framework <artifactId>framework
3.1.0.2710 resourcebundle en_US <dependency>
com.adobe.flex.framework <artifactId>rpc
3.1.0.2710 swc <dependency>
Tutorial setup Flex project with Maven
page 13 of 29
www.flexguse.de
com.adobe.flex.framework <artifactId>rpc
3.1.0.2710 resourcebundle en_US <dependency>
com.adobe.flex.framework <artifactId>utilities
3.1.0.2710 swc <artifactId>mavensurefirereportplugin ${project.build.directory}/testreports
The changes are marked in bold font. Please don't forget to put the artifactId of your configuration project (described in the next chapter) in
democonfig
In the node
demo
Tutorial setup Flex project with Maven
page 14 of 29
www.flexguse.de
you have to give the name of the WAR file we will create later in this tutorial. Normally this is the artifactId of the web project.
The buildplugin node can be removed completely, this information is now provided by the superpom. The changes in the the groupId and the version of the dependencies are due to changes in the internal Flex SDK structure. Finally I had to add the property to switch off running the testcases during the Maven build process because I use a linux environment and the gflashplayer can't be started which causes a build error.
5 Flex configuration submodule creation The server part of the Flex smart client is BlazeDS. There must be some configuration in BlazeDS, so the Flex smart client can use Java POJOS on the server side. Sébastien created an extra project which contains this configuration. To create the configuration submodule use the following Maven command in the root project folder. mvn archetype:create DgroupId=org.epseelon.samples DartifactId=democonfig
5.1 Flex configuration The configuration is done in two resource files: servicesconfig.xml and remotingconfig.xml. Create the folder resources
Tutorial setup Flex project with Maven
page 15 of 29
www.flexguse.de in democonfig/src/main.
Create the file servicesconfig.xml in the new folder. <servicesconfig> <services> <serviceinclude filepath="remotingconfig.xml" />
<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint" /> <properties> <pollingenabled>false <properties> <prefix>[BlazeDS] true false true true
Tutorial setup Flex project with Maven
page 16 of 29
www.flexguse.de <pattern>Endpoint.* <pattern>Service.* <pattern>Message.* <pattern>DataService.* <pattern>Configuration <system>
<enabled>true <watchinterval>20 <watchfile> {context.root}/WEBINF/flex/servicesconfig.xml <watchfile> {context.root}/WEBINF/flex/remotingconfig.xml {context.root}/WEBINF/web.xml
Create the file remotingconfig.xml in the newly created folder.
<service id="remotingservice" class="flex.messaging.services.RemotingService">
Tutorial setup Flex project with Maven
page 17 of 29
www.flexguse.de <defaultchannels>
<properties> <source>de.flexguse.someClass <scope>application >
The escaped destination node is an example how to address a Java class. I don't want to explain the BlazeDS configuration, please refer to http://livedocs.adobe.com/blazeds/1/blazeds_devguide/ for a full overview of all configuration options.
5.2 POM modifications Maven must be tought to use the Flex configurations files. This is done in two steps. Tutorial setup Flex project with Maven
page 18 of 29
www.flexguse.de
5.2.1 Step 1 In step 1 the pom.xml of the configuration subproject must be modified. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/mavenv4_0_0.xsd"> <parent> <artifactId>demo
de.flexguse 1.0SNAPSHOT <modelVersion>4.0.0
de.flexguse <artifactId>democonfig
democonfig 1.0SNAPSHOT http://maven.apache.org <packaging>pom
org.apache.maven.plugins <artifactId>mavenassemblyplugin <executions> <execution> make shared resources single package
Tutorial setup Flex project with Maven
page 19 of 29
www.flexguse.de <descriptors> <descriptor>src/main/assembly/resources.xml
5.2.2 Step 2 In the modified pom.xml there is the referenced file resources.xml in the folder democonfig/src/main/assembly
You have to create the folder and the file.
resources zip false src/main/resources
Tutorial setup Flex project with Maven
page 20 of 29
www.flexguse.de
To check your configuration you can run mvn package
in the command line. Maven must build with success and in the target folder there must be a *resources.zip
which includes the configuration files servicesconfig.xml and remotingconfig.xml.
6 Webapplication subproject creation The webapplication subproject is built by the Maven command mvn archetype:create DgroupId=de.flexguse DartifactId=demoweb DarchetypeArtifactId=mavenarchetypewebapp
This is a common archetype provided by Maven.
6.1 POM modifications There must be several modifications in the pom.xml file because the used archetype doesn't know anything about BlazeDS and the configuration which shall be used. For my demo application the pom.xml in the webapplication subproject must look like this: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/mavenv4_0_0.xsd"> <parent>
Tutorial setup Flex project with Maven
page 21 of 29
www.flexguse.de <artifactId>demo
de.flexguse 1.0SNAPSHOT <modelVersion>4.0.0
de.flexguse <artifactId>demoweb <packaging>war
demoweb Maven Webapp 1.0SNAPSHOT http://maven.apache.org epseelonrepository http://m2repo.epseelon.org/ <enabled>true <snapshots> <enabled>false epseelonrepository http://m2repo.epseelon.org/ <enabled>true <snapshots> <enabled>false
Tutorial setup Flex project with Maven
page 22 of 29
www.flexguse.de demoweb src/main/resources src/main/java <excludes> <exclude>**/*.java **/*.xml <artifactId>mavendependencyplugin <executions> <execution> unpackconfig unpackdependencies generateresources ${project.build.directory}/${project.build.finalName}/WEBINF/flex democonfig ${project.groupId} resources <excludeTransitive>true
Tutorial setup Flex project with Maven
page 23 of 29
www.flexguse.de <excludeTypes>jar,swf <execution> copyswf processclasses copydependencies ${project.build.directory}/${project.build.finalName} swf <dependencies> <dependency>
com.adobe.blazeds <artifactId>blazedscommon
3.0.0.544 <dependency>
com.adobe.blazeds <artifactId>blazedscore
3.0.0.544 <dependency>
com.adobe.blazeds <artifactId>blazedsremoting
3.0.0.544
Tutorial setup Flex project with Maven
page 24 of 29
www.flexguse.de <dependency>
backportutilconcurrent <artifactId>backportutilconcurrent
3.1 <dependency>
${project.groupId} <artifactId>democonfig
1.0SNAPSHOT resources zip <scope>provided <dependency>
${project.groupId} <artifactId>demoria
${project.version} swf
The dependency nodes are the BlazeDS part. In the build node we link to the configuration subproject. The repository and the pluginrepository must be given here, because there is no official BlazeDS Maven repository. Sébastien Arbogast maintains the BlazeDS jars in his private repository.
Please ensure that in the nodes (in italic font) includeArtifacIds
Tutorial setup Flex project with Maven
page 25 of 29
www.flexguse.de and artifactId
of the last dependency node there is the name of your configuration project!
You can test your work so far by using mvn package
in the root project folder. In the target folder of the webapplication project there must be a .war file containing the BlazeDS libraries, the BlazeDS configuration and a Hello World Flex application.
6.2 Webapplication web.xml So far the webapplication is not ready to provide BlazeDS. We included the JAR files but we have to modify the web.xml a little bit. First of all we have to register the BlazeDS messagebroker servlet. Please add
<paramname>flex.class.path <paramvalue>/WEBINF/flex/hotfixes <servlet> <servletname>MessageBrokerServlet <servletclass> flex.messaging.MessageBrokerServlet
Tutorial setup Flex project with Maven
page 26 of 29
www.flexguse.de
<paramname>services.configuration.file <paramvalue>/WEBINF/flex/servicesconfig.xml <paramname>flex.write.path <paramvalue>/WEBINF/flex 1 <servletmapping> <servletname>MessageBrokerServlet
/messagebroker/*
in the webapp node of the web.xml file.
6.3 Maven and Java version Maven needs a build plugin to know which Java version it uses. Please add
org.apache.maven.plugins <artifactId>mavencompilerplugin <source>1.5 1.5
Tutorial setup Flex project with Maven
page 27 of 29
www.flexguse.de either to the root project pom.xml (recommended) or to the webproject pom.xml file.
6.4 Test the build process If you want to see if everything was configured properly, please go to the root project and give mvn clean package
in the command prompt. Maven starts to work. You can watch that all three projects (configuration project, ria project and web project) are built by Maven. This takes on my machine about 20 seconds and after that Maven must report BUILD SUCCESSFUL. You can check the build result in the target folder of the web project. There must be a WAR file demoweb.war
which includes three BlazeDS libs and the backportutilconcurrent lib in the WEBINF/lib
folder, both BlazeDS XML configuration files in WEBINF/flex
and demoria.swf
Tutorial setup Flex project with Maven
page 28 of 29
www.flexguse.de in the root folder.
7 Summary In this tutorial you created a complete project setup for a Flex webapplication with Maven. The result is a 'Hello World' application which is the base for your further development. For example you can implement your complete business logic into the webapplication, deploy the created WAR file into a Java Application Server, run mvn eclipse:eclipse
in the ria subproject, import it into FlexBuilder and develop the GUI.
Please leave me a note on www.flexguse.de if you found errors in this tutorial.
Tutorial setup Flex project with Maven
page 29 of 29