Tutorial: Getting Started with Flex and Maven

shansun123

浏览: 1059397 次
性别:
来自: 杭州

最近访客更多访客>>

gundammew

x3630436

yanshijia01

dotfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

FLEX

Flex maven AIR Flash Adobe

Generating a Flex Library Project

Start out by entering the following in a terminal window:

mvn archetype:generate  \

-DarchetypeRepository=http://repository.sonatype.org/content/groups/public  \

-DarchetypeGroupId=org.sonatype.flexmojos \

-DarchetypeArtifactId=flexmojos-archetypes-library \

-DarchetypeVersion=3.7.1

Figure 7 shows the output of running the generate archetype for a Flex library project.

Flexmojos generate:archetype flexmojos-archetypes-library

The generated folder structure for the samplelib project should be as shown in Figure 8.

Generated folder structure for a Flex library project, samplelib

This time a class named App.as is generated, which contains the following:

Next, easily build and package the Flex library using “mvn install”. The output of this process creates a SWC file, samplelib-1.0-SNAPSHOT.swc, which can be linked to a Flex application and used as a Flex library typically is.

You can also generate a multimodule project using the archetypeArtifactId as flexmojos-archetypes-modular-webapp but I will not illustrate that here. There is no Flexmojos archetype to generate an AIR application or a pure AS3 project.

Next, we try and synch up the Flexmojos’ approach with that of Flash Builder’s.

Importing Flexmojos projects into Flash Builder

Flexmojos projects follow the Maven idiom of development and so keep the source and output in folders that follows the Maven conventions. This however doesn’t by itself work with Flash Builder. For example, Flash Builder keeps its Main.mxml Flex application file within the src folder in the project, whereas Flexmojos keeps that within src/main/flex. To convert a Flexmojos project to a Flash Builder structure you could use the flexmojos:flexbuilder plugin goal.

To see how this works, first generate a new Flex application. I call it samplefbapp. Once created modify the project pom.xml to include the Flexmojos repository, as illustrated earlier. Finally run “mvn org.sonatype.flexmojos:flexmojos-maven-plugin:3.7.1:flexbuilder”. This generates artifacts for Eclipse so that the project can be easily imported into it. The generated structure is as shown in Figure 9. To simply run “mvn flexmojos:flexbuilder” instead with its fully qualified name, add the following to settings.xml file within the “.m2” folder:

<pluginGroups>

  <pluginGroup>com.sonatype.maven.plugins</pluginGroup>

  <pluginGroup>org.sonatype.plugins</pluginGroup>

</pluginGroups>

Create the settings.xml file if it doesn’t already exist.

Folder structure and generated files after running “mvn flexmojos:flexbuilder”

To make sure this actually works and is Eclispe friendly, I open up the Eclipse instance with the Flash Builder plugin and try and import the project into it. Figure 10 to 14 show the steps involved in importing the project. Figure 13 shows that I use the latest version of Flash Builder but chose the Flex 3.5 SDK to keep things consistent. Once the project is available in Flash Builder, you can use Flash Builder to develop the application.

Import existing project into workspace

Select existing project from the file system

Project linked to the source on the file system

Choose Flex 3.5 SDK

Main.mxml of the project, as viewed in Flash Builder

So far we started with Flexmojos but that may not be the case always. If you start out with Flash Builder and would like to use Maven to build it without any modifications, then remember to configure the parameters like sourecDirectory and testDirectory appropriately in the pom.xml that you will define for the project.

So far we have looked at generating Flex application and library projects and importing Maven Flex projects into Flash Builder. Next, we take a Flex and an AIR project and use Maven to build it.

Building a Flex Application

First create a Flex 4 project using Flash Builder. I name it flex4app. Figure 15 shows a snapshot of the project create wizard.

Create flex4app, a Flex 4 application

I named my Application file Main.mxml. The contents of Main.mxml are as follows:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                         xmlns:s="library://ns.adobe.com/flex/spark"

                                                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

                  <fx:Declarations>

                                    <!-- Place non-visual elements (e.g., services, value objects) here -->

                  </fx:Declarations>

                  <s:Button id="myButton" label="My Button"/>

</s:Application>

Flash Builder generates much of the code above. I only added the line that includes a Spark Button that had a label: “My Button”.

Next, add a pom.xml file at the root of the project. Add the following to pom.xml:

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"

  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0

    http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>

  

  <groupId>com.treasuryofideas</groupId>

  <artifactId>flex4app</artifactId>

  <version>1.0-SNAPSHOT</version>

  <packaging>swf</packaging>

  

  <name>flex 4 app</name>

 

  <build>

    <sourceDirectory>src</sourceDirectory>

                  

    <plugins>

      <plugin>

        <groupId>org.sonatype.flexmojos</groupId>

        <artifactId>flexmojos-maven-plugin</artifactId>

        <version>3.7.1</version>

        <extensions>true</extensions>

                                    <dependencies>

          <dependency>

            <groupId>com.adobe.flex</groupId>

            <artifactId>compiler</artifactId>

            <version>4.0.0.14159</version>

            <type>pom</type>

          </dependency>

        </dependencies>

      </plugin>

    </plugins>

  </build>

 

  <dependencies>

    <dependency>

      <groupId>com.adobe.flex.framework</groupId>

      <artifactId>flex-framework</artifactId>

      <version>4.0.0.14159</version>

      <type>pom</type>

    </dependency>

  </dependencies>

 

  <repositories>

    <repository>

      <id>flexmojos</id>

      <url>http://repository.sonatype.org/content/groups/flexgroup/<;/url>

    </repository>

  </repositories>

 

</project>

Lets traverse through the contents of the pom file to see what we have added. The first few lines of the file are the XML/XSD schema and namespace definitions. Then there are the four Maven co-ordinates: groupId, artifactId, version and packaging that identify the project. After the Maven coordinates is the name XML tag that attaches a name to the project. Besides what is already listed so far the pom file contains the following:

build parameters – includes source directory and plugin defintions
dependencies – specifies dependencies, if any
repositories – in addition to the central Maven repository and required specifically for the project

Looking a little closely at the build parameters you will notice that the “sourceDirectory” points to “src” and not the default “src/main/flex”. The project source code resides in the “src” directory so this is required. The build tags also specifies the plugin, which is org.sonatype.flexmojos:flexmojos-maven-plugin:3.7.1. Within the plugin definition additional dependency on a specific compiler is specified. By default, each plugin version supports a specific Flex compiler. However, one can explicitly specify a particular compiler version, if required. You can read more about this online here.

In my specific setup the Flex 4 SDK is version 4.0.0.14159 so that is the version of the Flex compiler the Flexmojos plugin is dependent on. You can look up your specific SDK version by expanding out the framework swc details in the “Flex Build Path” in your Eclipse/Flash Builder installation as shown in Figure 16.

Framework version as visible in the Flex Builder Path

If you scroll down to the section that specifies the dependencies, you will notice that the Flex framework dependency also specifies the same version: 4.0.0.14159. This is required to make sure the compiler and SDK versions are both specified correctly for the Flexmojos plugin to work without errors. The definition in the repository section is something you are already familiar with so I will skip explaining it again here.

Once the pom is ready and saved, open up a terminal window, browse to the folder where the pom is and run “mvn install”. Again, you should see Maven downloading and building, at the end of which you should see a message saying the build was successful. Once compete you should find flex4app-1.0-SNAPSHOT.swf in the newly created “target” directory within your project. Review Figure 17 and Figure 18 to find out the newer files and directories that “mvn install” creates.

flex4app project structure before running “mvn install”

flex4app project structure after running “mvn install”

If you open flex4app-1.0-SNAPSHOT.swf in a local Flash Player or a browser that has the Flash plugin installed then you should see a Flex application with a spark button labeled “My Button” as shown in Figure 19.

Flex 4 Application build using Maven

We have been running Flexmojos install build lifecycle goal for a while but haven’t really dug deeper into what all is running as a result of executing this goal. So, it may be worthwhile to note which exact goals are executed and in what order. Flexmojos follows the standard Maven build lifecycle but introduces three additional goals, namely, compile-swc, test-compile and test-run. The goals are executed in the following order:

resources:resources
flexmojos:compile-swc
resources:testResources
flexmojos:test-compile
flexmojos:test-run
install-install
deploy:deploy (which we don’t run as a part of mvn install)

When you use Flash Builder to compile a Flex application, you get the SWF and an html wrapper for the SWF. You can generate an html wrapper using Maven as well. All you have to do is include the following, within the plugin tags of your pom’s build tags:

<executions>

          <execution>

            <goals>

              <goal>wrapper</goal>

            </goals>

            <configuration>

              <parameters>

                <swf>${build.finalName}</swf>

                <width>100%</width>

                <height>100%</height>

              </parameters>

            </configuration>

          </execution>

        </executions>

and run “mvn install” again. Now you should see a number of newer files to support the html wrapper. Look at Figure 20 to see the project structure after generating the html wrapper. You will also see flex4app-1.0-SNAPSHOT.html that wraps the Flex application.

Flex4app project structure after mvn install with html wrapper

You can learn more about html wrapper and its possible configurations at the Flexmojos wiki: https://docs.sonatype.org/display/FLEXMOJOS/Html+Wrapper+Mojo

With a successful Flex 4 and Maven experience, lets move on to the last topic of this article, which illustrates building an AIR application with Maven.

Building an Adobe AIR application

Create an AIR application and name it airapp. Figure 21 depicts the first screen of the project creation wizard.

Create an AIR application

Add a pom.xml file to the root of the project. Add the following to pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://

www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://

maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

<modelVersion>4.0.0</modelVersion>

<groupId>com.treasuryofideas</groupId>

<artifactId>airapp</artifactId>

<version>1.0-SNAPSHOT</version>

<name>Flex 4 AIR Application</name>

<properties>

   <!-- the application name which must match the main mxml file

                  and application descriptor file names -->

   <application.name>Main</application.name>

   <flex.framework.version>4.0.0.14159</flex.framework.version>

   <keystore.file>${basedir}/cert4air.p12</keystore.file>

   <keystore.password>secret</keystore.password>

</properties>

<packaging>swf</packaging>

<build>

 <sourceDirectory>src</sourceDirectory>

 <plugins>

  <plugin>

    <groupId>org.sonatype.flexmojos</groupId>

    <artifactId>flexmojos-maven-plugin</artifactId>

    <version>3.7.1</version>

    <extensions>true</extensions>

 

    <dependencies>

 

      <dependency>

        <groupId>com.adobe.flex</groupId>

        <artifactId>compiler</artifactId>

        <version>${flex.framework.version}</version>

        <type>pom</type>

      </dependency>

 

      <dependency>

         <groupId>com.adobe.flex.compiler</groupId>

         <artifactId>adt</artifactId>

         <version>${flex.framework.version}</version>

      </dependency>

    </dependencies>

 

    <configuration>

      <!-- set this to true to allow the plugin to find the special Flex Builder/Flash Builder

      string in the application descriptor which is normally in site the <content> tag. If you set

      this to false or omit it entirely, the plugin will expect there to be an ${output} token

      in that tag. Placing that token in the application descriptor will prevent the Export Release

      Build function in Flex Builder/Flash Builder for working

      -->

 

      <flexBuilderCompatibility>true</flexBuilderCompatibility>

 

      <sourceFile>${application.name}.mxml</sourceFile>

      <descriptorTemplate>${basedir}/src/${application.name}-app.xml</descriptorTemplate>

      <keystore>${keystore.file}</keystore>

      <storepass>${keystore.password}</storepass>

  

      <!--optionally include files in the AIR package -->

 

      margin-left: 18

  分享到：
      
       关于变更eclipse中maven插件的reposito ...
      |
      [转] oracle数据库中to char 和to date的 ...
    
    2010-12-20 21:39
浏览 3936
评论(0)
分类:Web前端
查看更多
    
    评论
    
发表评论   您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论