Flex - Simple Maven Project

Did you ever wanted to build flex/maven project but you didn't know how?

Here is a step by step tutorial on how to create and build "simple" flex / maven project from Flash Builder using m2eclipse.

If you don't know how to install m2eclipse (maven eclipse plugin) into Flash Builder, you can read this step by step tutorial: Installing m2eclipse in Flash Builder

More informations about Maven you can find at:
http://maven.apache.org/
http://www.sonatype.com/
http://www.sonatype.com/books/maven-book/

1. Run Flash Builder and click on "File -> New -> Other".

2. In "New" dialog, expand "Maven" node and select "Maven Project". Click on "Next".

3. In "New Maven Project (Select project name and location)" dialog setup the name and location where Maven project will be created.

4. In "New Maven Project (Select Archetype)" dialog, in a "Catalog" drop down box, select "All Catalogs" than in the "Filter" text field write "flex". 
In the filtered results, select archetype as in the picture below.

5. In "New Maven Project (Specify Archetype parameters), in a "Group Id" add yourdomain (example: org.yourdomain), in "Artifact Id" add name of the application you are creating, "Version" can stay as it is, and in the "Package" you can add "application" as package. 

Press "Finish" button to create project.

6. Finally, your project is created :), but it is still not ready for use :( .

The project we created should look similar as in the picture below.

7. Because Flash Builder does'nt recognize "Maven" projects, we have to add a "Flex Project Type" to project we just created.

Right click on project we created: "Add/Change Project Type -> Add Flex Project Type...".

8. Select Flex SDK you want to use and press "Next".

9. Select ouput folder and press "Finish"

10. Now we have a full Flash Builder recognized application. 

Now when we look at the project, we can see "default package" with "default" application created by Flash Builder.

We should just delete it. In this case we will delete "yourapp.mxml".

11. Your app should look as in the image below.

We are almost done :) ....

12. Our project, at the moment, can't be compiled, because it has few errors. Open the "Problems" panel as in the image below.

13. One of the "errors" states: "Can not create HTML wrapper. Right-click here to recreate folder html-template"

So follow the instructions from the error message.

14. Before we fix other "Maven" related errors, we are going to set up default application, so we can run and compile project from Flash Builder.

"Right-Click on Main.mxml -> Set as Default Application"

15. Now we are going to fix "Maven" related errors displayed in the "Problems" panel.

Open the "pom.xml" file (it is placed in the root of your project), and replace selected code (selection as in the image below) with code you will find after the image.

Code:

	
		src/main/flex
		src/test/flex
		
			
				org.sonatype.flexmojos
				flexmojos-maven-plugin
				4.0-beta-1
				true
				
					
						compile
						
							copy-flex-resources
						
					
				
			
		

	

	
		
			com.adobe.flex.framework
			flex-framework
			4.5.0.17855
			pom
		

		
			com.adobe.flexunit
			flexunit
			0.85
			swc
			test
		
	

	
		
			flexmojos
			flexmojos
			http://repository.sonatype.org/content/groups/flexgroup/
		
	

	
		
			flexmojos
			flexmojos
			http://repository.sonatype.org/content/groups/flexgroup/
		
	

16. Finally we are ready to run our "simple" :) maven project.

"Right-click on pom.xml -> Run As -> Maven Package"

17. After everything finishes, you should see created "target" directori in root of yourapp package with application files as in the image below.