Working with Flexmojos projects in IntelliJ IDEA

From IntelliJ-Wiki

Jump to: navigation, search

IntelliJ IDEA greatly simplifies the process of working with Flexmojos projects:

  • Flexmojos projects can be easily imported into IDEA.
  • Due to IntelliJ IDEA’s Maven integration, all the required dependencies are automatically downloaded and added to the list of project libraries.
  • IntelliJ IDEA can compile projects the same way as Maven does, and provides run/debug configurations for Flex applications and FlexUnit tests.

This tutorial will walk you step-by-step through the following tasks:

  • Importing an existing Flexmojos project into IntelliJ IDEA
  • Exploring its structure
  • Launching the Flex application


Contents

Prerequisites

  • Standalone Flash Player version 11.4 or later should be installed. Follow download and installation instructions. Flexmojos needs this to run FlexUnit tests. You can also install the debugger version of the Flash Player browser plugin, if you are going to run or debug Flex applications in your browser.
  • Internet connection is up and running!

Creating a sample Flexmojos project

In this section, we’ll perform all the necessary preliminary steps outside of IntelliJ IDEA: generate the sample project, which will be later imported into IntelliJ IDEA, and make some fine-tuning to the pom.xml file. If you have an existing Flexmojos project available, you can always use it.

As an example, let's create a sample project from the archetype for the latest stable Flexmojos 4.x plugin version which is 4.2-beta.

Use the mvn command to generate the sample-application project:

 mvn archetype:generate \
-DarchetypeGroupId=org.sonatype.flexmojos \
-DarchetypeArtifactId=flexmojos-archetypes-application \
-DarchetypeVersion=4.2-beta

Note: since Flexmojos plugin version 5.0-beta is available, the group id of Flexmojos plugin is changed to:

  • org.sonatype.flexmojos (for Flexmojos 3.x and 4.x)
  • net.flexmojos.oss (for Flexmojos 5.x)

After the archetypes are downloaded, you need to define values or use the default ones for the following properties:

  • 'groupId'
  • 'artifactId'
  • 'version'
  • 'package'

You can use the following example:

 Define value for property 'groupId': :sampleflexgroup \
 Define value for property 'artifactId': :sampleflex-app \
 Define value for property 'version': 1.0-SNAPSHOT: : \
 Define value for property 'package': sampleflexgroup: :


Have a closer look at the generated pom.xml file of this project. Important for us is the <dependencies> section. It contains two dependencies:

  • flex-framework
  • flexunit

For these dependencies, the necessary libraries will be downloaded from the Sonatype's FlexMojos Repository and added to the list of project libraries.

Let’s make some changes to the pom.xml file.


Use the versions of Flex SDK, Flex framework and FlexUnit that are currently most up to date and contain the necessary sources and documentation. Explicit dependency of flex-mojos-maven-plugin com.adobe.flex:compiler is strongly recommended. The version of com.adobe.flex:compiler must be the same as of com.adobe.flex.framework:flex-framework project dependency. The current versions are as follows:

  • Flex SDK version 4.6.b.23201
  • Flex framework ${flex.sdk.version}
  • FlexUnit 4.0-rc-1

To use these versions, make the following changes to the pom.xml file:

  • In the <properties> section, ensure that you have a current version of Flex SDK (4.6.b.23201).
    <properties> 
     <flex.sdk.version>4.6.b.23201</flex.sdk.version>
    </properties>
  • In the plugin section, change the version of Flex to ${flex.sdk.version} (the corresponding line in the following fragment is shown in blue):
   <plugin>
         <groupId>org.sonatype.flexmojos</groupId>
         <artifactId>flexmojos-maven-plugin</artifactId>
         <version>4.2-beta</version>
         <extensions>true</extensions>
        <configuration>
              <debug>true</debug>
        </configuration>        
        <dependencies>
            <dependency>
                  <groupId>com.adobe.flex</groupId>
                  <artifactId>compiler</artifactId>
                  <version>${flex.sdk.version}</version>
                  <type>pom</type>
            </dependency>
        </dependencies>
   </plugin>
  • In the <dependencies> section, change the versions of flex-framework and FlexUnit (the corresponding lines in the following fragment are shown in blue):
   <dependency>
         <groupId>com.adobe.flex.framework</groupId>
         <artifactId>flex-framework</artifactId>
         <version>${flex.sdk.version}</version>
         <type>pom</type>
   </dependency>
   <dependency>
         <groupId>com.adobe.flexunit</groupId>
         <artifactId>flexunit</artifactId>
         <version>4.0-rc-1</version>
         <type>swc</type>
         <scope>test</scope>
   </dependency>

Importing Flexmojos project to IntelliJ IDEA

Start IntelliJ IDEA. In the Welcome screen, click Open Project, (or choose File | Open Project on the main menu) and select the pom.xml file of your sample-app project:

File:openprojectflex_11.png


Actually, that’s it… when you click OK, IntelliJ IDEA scans the Maven projects, downloads the necessary dependencies. IntelliJ IDEA also creates Flash module, Flash build configuration file, and most importantly generates Flex compiler configuration file. Finally, the IntelliJ IDEA project is ready. Let’s explore its structure.

Tip: there is another way to import a Flexmojos project. Choose File | New project on the main menu, in the wizard select the option Import project from external model and follow the instructions of the wizard.

Exploring Flexmojos project in IntelliJ IDEA

The Project and Maven Projects tool windows provide two different viewpoints onto the application

  • The Project tool window shows the treeview of project files and folders. The file system you observe here completely corresponds to the one generated by Maven. Besides that, you can see all the necessary libraries under the External Libraries node. The files marked with File:IdeaIcon.png icon are generated by IntelliJ IDEA and store the project information.
  • The Maven Projects tool window shows the Maven projects as a collection of Maven goals, plugins, dependencies and profiles.

File:flexsampleapp_view11.png


The project structure is also worth exploring. Click File:ProjectStructureButton.png on the main toolbar to open the Project Structure dialog. In the Modules page, you can see Flash module that contains Flash build configuration.

File:projectstructure_flex1.png

In the SDK page, you see that the necessary SDK settings are provided automatically:

File:flexsdk_11.png

1. Flex SDK with the name Flexmojos SDK. This special type of SDK contains all the necessary information for launching the Flex compiler and debugger.

2. Flex compiler and debugger classpath. This is the read-only field that IntelliJ IDEA displays for your information.

3. AIR paths. If you are not happy with the suggested values, you can change them manually.


However, if you look at the Libraries page of the Project Structure dialog, you will see that the sources and documentation libraries are red:

File:library_flex11.png

It means that they are not available locally and should be downloaded from the remote repository only. This is where we’ll use the download functionality of the Maven Projects tool window.

Click the download button File:DownloadButton.png on its toolbar and choose Download Sources and Documentation from the submenu:

File:FlexDownloadSources.png

All available archives will be downloaded to your local repository and added to the project. Thus the references will be resolved.

Running the application

Before you run the application you need to create run/debug configuration:

1. On the main menu, choose Run | Edit Configurations:

File:run_flex.png

2. In the Run/Debug Configuration dialog, press INSERT.

3. From the list of available configuration types, select Flash App.

4. Use this dialog to create or edit Flash App run/debug configurations which let you run and debug your ActionScript and Flex applications.

File:rundebugflex11.png

5. Click OK to apply changes and close the Run/Debug Configurations dialog.

6. Click the Run button on the main toolbar to run the application:

File:flexsampleapprun.png

… and enjoy the everlasting Hello World.

For more information, refer to the Running and Debbugging ActionScript and Flex Applications page.

Running unit tests

You can launch the FlexUnit tests: select the desired test class on the Project tool window, or open it in the editor, and choose Run "unit test name" on the context menu:

File:runtestapp.png

Note that the run/debug configuration for FlexUnit tests provides the possibility to run all tests in a package, a test class, or an individual method:

File:flexunitconfig11.png

More information

Personal tools