Tutorial Setup Flex Project With Maven

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
www.flexguse.de
6.3 Maven and Java version......................................................................................................................................................................... .............25
6.4 Test the build process.................................................................................................................................................................................... ......26
7 Summary........................................................................................................................................................................................ ............................27
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.
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/
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
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'.
www.flexguse.de
3.1 POM modifications
The pom.xml file created by Maven needs to be modified, the result must look like this:
<?xml version="1.0"?>
<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</modelVersion>

<parent>
<groupId>info.flexmojos</groupId>
<artifactId>flexsuperpom</artifactId>
<version>2.0alpha4</version>
</parent>

<groupId>de.flexguse</groupId>
<artifactId>demo</artifactId>

<packaging>pom</packaging>

<version>1.0SNAPSHOT</version>
<name>flexmail</name>
<url>http://maven.apache.org</url>

<build>
<pluginManagement>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>mavendependencyplugin</artifactId>
<version>2.0</version>
</plugin>
<plugin>
www.flexguse.de
<artifactId>mavenassemblyplugin</artifactId>
<version>2.2beta2</version>
</plugin>
</plugins>
</pluginManagement>
</build>

<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
</project>
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
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.
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>
</parent>
<artifactId>demoria</artifactId>
<packaging>swf</packaging>
<properties>
<maven.test.skip>true</maven.test.skip>
5 http://blog.codeadept.com/2008/06/12/mavenarchetypeforflexmojos/
www.flexguse.de
</properties>
<build>
<sourceDirectory>src/main/flex</sourceDirectory>
<testSourceDirectory>src/test/flex</testSourceDirectory>
<finalName>flextimerecordingria</finalName>
<plugins>
<plugin>
<groupId>info.flexmojos</groupId>
<artifactId>flexcompilermojo</artifactId>
<extensions>true</extensions>
<configuration>
<locales>
<locale>en_US</locale>
</locales>
<contextRoot>demo</contextRoot>
</configuration>
</plugin>
<!
this plugin is needed to extract the BlazeDS configuration from the
zipped configuration
>
<plugin>
<artifactId>mavendependencyplugin
</artifactId>
<executions>
<execution>
<id>unpackconfig</id>
<goals>
<goal>unpackdependencies</goal>
</goals>
<phase>generateresources</phase>
<configuration>
www.flexguse.de
<outputDirectory>${project.build.directory}/generatedresources
</outputDirectory>
<includeArtifacIds>democonfig</includeArtifacIds>
<includeGroupIds>${project.groupId} </includeGroupIds>
<excludeTransitive>true</excludeTransitive>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
<resources>
<resource>
<directory>${basedir}/src/main/resources</directory>
</resource>
<resource>
<directory>${basedir}/target/generatedresources</directory>
<filtering>true</filtering>
</resource>
</resources>
</build>
<dependencies>
<dependency>
<groupId>flexunit</groupId>
<artifactId>flexunit</artifactId>
<type>swc</type>
<scope>test</scope>
</dependency>
<dependency>
<groupId>flexunit.junit</groupId>
<artifactId>flexunitoptional</artifactId>
<type>swc</type>
<scope>test</scope>
www.flexguse.de
</dependency>
<dependency>
<groupId>com.adobe.flex.framework</groupId>
<artifactId>playerglobal</artifactId>
<version>93.1.0.2710</version>
<type>swc</type>
<scope>external</scope>
</dependency>
<dependency>
<artifactId>flex</artifactId>
<type>swc</type>
</dependency>
<dependency>
<artifactId>framework</artifactId>
<type>swc</type>
</dependency>
<dependency>
<artifactId>framework</artifactId>
<type>resourcebundle</type>
<classifier>en_US</classifier>
</dependency>
<dependency>
<artifactId>rpc</artifactId>
<type>swc</type>
</dependency>
<dependency>
www.flexguse.de
<artifactId>rpc</artifactId>
<type>resourcebundle</type>
<classifier>en_US</classifier>
</dependency>
<dependency>
<artifactId>utilities</artifactId>
<type>swc</type>
</dependency>
</dependencies>
<reporting>
<plugins>
<plugin>
<artifactId>mavensurefirereportplugin
</artifactId>
<configuration>
<reportsDirectory>${project.build.directory}/testreports</reportsDirectory>
</configuration>
</plugin>
</plugins>
</reporting>
</project>
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
In the node
<contextRoot>demo</contextRoot>
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
www.flexguse.de
in
democonfig/src/main.
Create the file servicesconfig.xml in the new folder.
<?xml version="1.0" encoding="UTF8"?>
<servicesconfig>
<services>
<serviceinclude filepath="remotingconfig.xml" />
</services>

<channels>
<channeldefinition id="channelamf"
class="mx.messaging.channels.AMFChannel">
<endpoint
url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf"
class="flex.messaging.endpoints.AMFEndpoint" />
<properties>
<pollingenabled>false</pollingenabled>
</properties>
</channeldefinition>
</channels>

<logging>
<target class="flex.messaging.log.ConsoleTarget"
level="Error">
<properties>
<prefix>[BlazeDS]</prefix>
<includeDate>true</includeDate>
<includeTime>false</includeTime>
<includeLevel>true</includeLevel>
<includeCategory>true</includeCategory>
</properties>
www.flexguse.de
<filters>
<pattern>Endpoint.*</pattern>
<pattern>Service.*</pattern>
<pattern>Message.*</pattern>
<pattern>DataService.*</pattern>
<pattern>Configuration</pattern>
</filters>
</target>
</logging>

<system>
<redeploy>
<enabled>true</enabled>
<watchinterval>20</watchinterval>
<watchfile>
{context.root}/WEBINF/flex/servicesconfig.xml
</watchfile>
<watchfile>
{context.root}/WEBINF/flex/remotingconfig.xml
</watchfile>
<touchfile>{context.root}/WEBINF/web.xml</touchfile>
</redeploy>
</system>
</servicesconfig>
Create the file remotingconfig.xml in the newly created folder.
<?xml version="1.0" encoding="UTF8"?>
<service id="remotingservice"
class="flex.messaging.services.RemotingService">

<adapters>
www.flexguse.de
<adapterdefinition id="javaobject"
class="flex.messaging.services.remoting.adapters.JavaAdapter"
default="true" />
</adapters>

<defaultchannels>
<channel ref="channelamf" />
</defaultchannels>

<!
<destination id="todoService">
<properties>
<source>de.flexguse.someClass</source>
<scope>application</scope>
</properties>
</destination>
>
</service>
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.
Maven must be tought to use the Flex configurations files. This is done in two steps.
www.flexguse.de
5.2.1 Step 1
In step 1 the pom.xml of the configuration subproject must be modified.
<parent>
</parent>
<artifactId>democonfig</artifactId>
<name>democonfig</name>
<packaging>pom</packaging>
<build>
<plugins>
<plugin>
<artifactId>mavenassemblyplugin</artifactId>
<executions>
<execution>
<id>make shared resources</id>
<goals>
<goal>single</goal>
</goals>
<phase>package</phase>
www.flexguse.de
<configuration>
<descriptors>
<descriptor>src/main/assembly/resources.xml</descriptor>
</descriptors>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
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.
<assembly>
<id>resources</id>
<formats>
<format>zip</format>
</formats>
<includeBaseDirectory>false</includeBaseDirectory>
<fileSets>
<fileSet>
<directory>src/main/resources</directory>
<outputDirectory></outputDirectory>
</fileSet>
</fileSets>
</assembly>
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.
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:
<parent>
www.flexguse.de
</parent>
<artifactId>demoweb</artifactId>
<packaging>war</packaging>
<name>demoweb Maven Webapp</name>
<repositories>
<repository>
<id>epseelonrepository</id>
<url>http://m2repo.epseelon.org/</url>
<releases>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>epseelonrepository</id>
<url>http://m2repo.epseelon.org/</url>
<releases>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
www.flexguse.de
</pluginRepositories>
<build>
<finalName>demoweb</finalName>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
<resource>
<directory>src/main/java</directory>
<excludes>
<exclude>**/*.java</exclude>
</excludes>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
</resources>
<plugins>
<plugin>
<artifactId>mavendependencyplugin</artifactId>
<executions>
<execution>
<id>unpackconfig</id>
<goals>
<goal>unpackdependencies</goal>
</goals>
<phase>generateresources</phase>
<configuration>
<outputDirectory>${project.build.directory}/${project.build.finalName}/WEBINF/flex</outputDirectory>
<includeGroupIds>${project.groupId}</includeGroupIds>
<includeClassifiers>resources</includeClassifiers>
<excludeTransitive>true</excludeTransitive>
www.flexguse.de
<excludeTypes>jar,swf</excludeTypes>
</configuration>
</execution>
<execution>
<id>copyswf</id>
<phase>processclasses</phase>
<goals>
<goal>copydependencies</goal>
</goals>
<configuration>
<outputDirectory>${project.build.directory}/${project.build.finalName}</outputDirectory>
<includeTypes>swf</includeTypes>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>com.adobe.blazeds</groupId>
<artifactId>blazedscommon</artifactId>
</dependency>
<dependency>
<artifactId>blazedscore</artifactId>
</dependency>
<dependency>
<artifactId>blazedsremoting</artifactId>
www.flexguse.de
</dependency>
<dependency>
<groupId>backportutilconcurrent</groupId>
<artifactId>backportutilconcurrent </artifactId>
</dependency>
<dependency>
<groupId>${project.groupId}</groupId>
<artifactId>democonfig</artifactId>
<classifier>resources</classifier>
<type>zip</type>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>${project.groupId}</groupId>
<artifactId>demoria</artifactId>
<version>${project.version}</version>
<type>swf</type>
</dependency>
</dependencies>
</project>
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
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
<contextparam>
<paramname>flex.class.path</paramname>
<paramvalue>/WEBINF/flex/hotfixes</paramvalue>
</contextparam>

<! MessageBroker Servlet >
<servlet>
<servletname>MessageBrokerServlet</servletname>
<servletclass>
flex.messaging.MessageBrokerServlet
www.flexguse.de
</servletclass>
<initparam>
<paramname>services.configuration.file</paramname>
<paramvalue>/WEBINF/flex/servicesconfig.xml</paramvalue>
</initparam>
<initparam>
<paramname>flex.write.path</paramname>
<paramvalue>/WEBINF/flex</paramvalue>
</initparam>
<loadonstartup>1</loadonstartup>
</servlet>

<servletmapping>
<servletname>MessageBrokerServlet</servletname>
<urlpattern>/messagebroker/*</urlpattern>
</servletmapping>
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
<plugin>
<artifactId>mavencompilerplugin</artifactId>
<configuration>
<source>1.5</source>
<target>1.5</target>
</configuration>
</plugin>
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
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

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Setup Flex Project With Maven

Uploaded by

Copyright:

Available Formats

www.flexguse.

You might also like

Tutorial Setup Flex Project With Maven

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Setup Flex Project With Maven

Uploaded by

Copyright:

Available Formats

www.flex­guse.

You might also like

www.flexguse.