Welcome to part 2 of my IntelliJ Idea 9 ActionScript 3/Flex workflow series. If you followed part 1 you should have a HelloWorldProject setup along with a HelloWorld module. Now it is time to learn how to compile our SWF and go over the other core features IntelliJ Idea 9 has to offer. Lets not waste any more time, here we go:

Compiling A Project

We are now ready to compile our project. In the menu above the editor is a row of icons, look for the box with an arrow in it.

Click on the arrow and select Edit Configurations. Since you have not set up anything you will see an empty settings window. Click on the plus sign and select Flex from the drop down menu.

Now you can point the HTML wrapper path to our index.html file in bin and give the run a name of HelloWorld.

Hit apply, then ok, and lets see if this will run. You should now notice the name of your run where the arrow was and a green play button next to it. Click play and we launch the HelloWorld swf in the html wrapper.

If you don't see the swf, make sure you have the correct output path in the module's Flex Compiler Settings.

Other then these few steps, setting up a module to compile should seem very similar to Flash Builder or FDT. IntelliJ offers up some additional functionality such as running an ANT build file before the launching (not this is done after the compile which is called "Make") so you can automate other process this module may depend on to run.

Debugging/Profiling

IntelliJ has full debugger support for your Flash applications. You can easily add break points by clicking in the left gutter of the editor.

Once you have a breakpoint in place, click the button with the bug over the play icon next to the green play button. This will start up the debugger and you should be taken to your breakpoint.

Here you will find your standard debugger feature set. It is on par if not better then Flash Builder's debugger. One thing to note is that recently I had some issues seeing the values of objects inside of the stack. This happened when I started using the new 10.0.x player and Flex 4.0 SDK. This was quickly fixed in the 9.0.1 updated but it raises a few concerns. Since this is a 3d party editor, Adobe can at any time make fundamental changes to the platform architecture that may break IntelliJ. There is no way to know and I am not sure how dedicated the IntelliJ team is to keeping IntelliJ 100% compatible with Flex. From what I have seen changed in version 9 they have made a great deal of improvements and are taking a serious stab at fully supporting ActionScript.

The other issue I have with IntelliJ is that there is no Profiler. This is a crucial tool in the debug process and something sorely missing from the IDE.

Deployment

As far as I can tell there is no deployment wizard. I believe running a regular run, not the debugger, will removed the additional overhead the debugger flag adds to compiling and give you a compressed swf. Likewise you can create custom compiler config xml or modify the one in the root of your project. Since I rely on Ant for all of my builds this isn't something I have really looked into.

Version Control

Versions control is fully integrated into IntelliJ. When you initially setup the plugins you had the option of picking the VC systems you wanted to use. I would say that InteliJ's compare, merge and history tools are much better then Eclipse's. Since you haven't checkedout a project yet I will simply highlight some of the features I like and show what they look like:

Change window - All of your changes are summaries in a single window. This makes it super easy to monitor that status of the project.

File are color coded to reflect their state.

You have local history and VC history. Local history is great when you need to figure out what you did a few saves back even if you didn't commit the file. What's nice about IntelliJ is that it also saves a local history marker every time you compile which is I nice addition. You can move forward and backwards through time easily inside of the history window.

Merge/compare is also intuitive and similar to how it works in Eclipse. The original file is on the left and your current one on the right. Changes are visualized as highlighted selections that illustrate exactly what will happen if you accept a merge in your document.

Now that we did a high level overview of VCS in IntelliJ, lets checkout a project and learn how to make it a shared library.

Setting Up Shared Libraries

**It is important to note that you will have to install Git on your computer before attempting this next section. After you install Git, if IntelliJ throws an error that it can't find Git, you may need to point the editor to the Git excitable. You can do this by going into File -> Settings -> Version Control -> VCSs -> Git and fill in Path to git executable. As an example, if you use Git OSX Installer your path should be usr/local/git/bin/git.**

Creating a shared library is very similar to how we set up our original module. Todo this you will need to create a new module. You can do this in a few places depending on if you are building it from scratch or are checking it out from version control. For this example we are going to quickly check out a library from GitHub. Lets start by going over to the Version Control menu. Select Checkout from Version Control -> Git

Now lets fill in the information for F*CSS. Not only is this an excellent opportunity for a product placement but it will allow us to look at setting up Unit Tests and running a project from ANT. Here is the information you need:

Notice how I set the Parent Directory to the project, that is because IntelliJ will automatically create a director for us based on the value we put the directory name field. Click clone and let it checked out.

Once that is done you will see the following screen:

You need to hit NO. You want to say yes but if you read what it says, it will turn what you just checked out into a new Project. That would be fine in Eclipse but since we want to make a module in IntelliJ that would just mess us up. Hopefully you read this before making the decision.

Once you click no you will be brought back to the editor. The FCSS module now exists on your computer but is not part of the project, we have to connect it. Go back into the project structure and go to the Modules section. Once you are there click on the plus above where you see the HelloWorld module.

You may have noticed this wizard is very similar to what we went through when we created a new project. Click next.

Here you will see I already set up the values. To have IntelliJ configure this wizard for you, click on the [...] next to the Content root field, browse to where you checked out F*CSS (it will be in your HelloWorldProject folder) and when you accept, the rest of the information will be filled in for you. Also make sure you select a Flex Module and click next.

Accept the default src folder name and hit next again. Now you will have to configure the module again. Here is what it should be then hit Finish.

Once that is setup you will now see the F*CSS module under the HelloWorld one. Click on the test directory and select Test Sources, we will need this later. Then go to the Dependencies tab. Here we are going to press add and you should see the following options:

Here we want to select Module Library... and on the next screen select Attach Jar Directories. Navigate to F*CSS's build/libs folder:

Let us take a step back and explain what is in the folder. I keep project SWCs and Jars used by the ANT build in a libs folder inside the build directory. In F*CSS I keep a copy of the FlexUnit classes (as a swc) for Unit Testing but since we told IntelliJ that the test folder was a Test Source directory we will need to add the Flex Unit SWCs as a shared library so we don't get compiler errors. Now the reason we chose Attach Jar Directories instead of adding each one by hand is because this will allow us to dump any SWC into the build/libs folder and they will automatically become available to our module. This is a good tip when it comes to your own projects which rely on multiple SWCs.

Before we finish, make sure you check the new library we added.

The final step will be for us to tell IntelliJ that F*CSS is a library and that it should generate a SWC. Click on the Flex Compiler Settings and change the Output type to Library (*.swc). You will also want to fix the output path to be /HelloWorldProject/fcss/bin

Now we have our library setup, lets link our HelloWorld Module up to it. Click on HelloWorld in the Modules panel and select the module's dependency tab. To add F*CSS, click add and select Module Dependancy. A list should pop up with F*CSS as the only option. Click ok and check it to be included as a module library.

Congratulations you have now connected two project and turned one of them into a library. Lets go back to the editor and test that it works. Go into the HelloWorld.as file and add the following after you create the TextField on line 14(ish):

 
var style:IStyle = new Style();

You will start to see an error and a message telling you that you need to import com.flashartofwar.fcss.styles.Style:

If you press option return when that message pops-up you will be able to automatically import the class. Next it will ask you to import the IStyle class and hit option return again to import that as well. This is the quick fix shortcut.

As you can see IntelliJ is correctly reading the F*CSS library we setup. Lets finish the rest of our test:

  
style["color"] = "red";
style["size"] = "20";
style["border"] = "true";
style["autoSize"] = "left";

var applicator:TextFieldApplicator = new TextFieldApplicator();
applicator.applyStyle(textField, style);

You will need to import the TextFieldApplicator class so when you compile you will see our Hello World is now red with a black border.

That covers how to create a library module, configure it, and have other projects link to it. Lets briefly look at running an Ant project.

ANT Support

Now that we have F*CSS checked out, this is a great example to use when talking about setting up and running ANT Scripts in IntelliJ. Go into the F*CSS project and copy the build.template.properties file and rename it to build.properties. Once you do that open the new file and modify the FLEX_HOME path to where you have the Flex 4 SDK. For this example I am going to use /Applications/Adobe Flash Builder Beta 2/sdks/4.0.0. You don't need to escape the spaces in Ant unlike navigating to it from the command line.

Once that is configured, right click on the build file and select Add as Ant Build File. You should now see a Ant Build panel on the right.

Notice how the compile-swc target is bold. That is the default target, so hit the green play button in the Ant Build panel and see what happens.

Chances are you got the above error. To fix this you will need to right click inside the Ant panel and select Properties from the contextual menu. From there click on Execution and go to the Run under JDK drop down. Click the [...] button, we have to add a Java JDK.

When you are in the Configure JDK window, click the plus and select JSDK. Now you will have to select the correct version of Java. IntelliJ should automatically brings you to the /JavaVM.framework/Versions folder. Open up the versions folder and pick 1.6 if you are on a Mac. I am not sure what it would be on the PC but chances are it is the same, you may just have to install the latest version by hand.

Now click ok and go back to the Build File Properties window. Java 1.6 should be selected now.

Before you close this window, goto the Filters tab and check compile-swc. For some reason when you select a Java SDK it no longer highlights the default target. This is also the place you can go to select only the targets you want to run. Now if you click the Ant run again, it should work.

F*CSS is going to take a while to compile for the first time. It will run through it's Unit Tests and create the Documentation. Once all of this is done you can go into the bin folder and look for an FCSS SWC with a version number at the end. If you don't see the bin folder go into the project structure panel and deselect the bin from the exclude list. The fcss.swc is the one IntelliJ generated and the one that is versioned was built by ANT.

Now you know how to run an Ant build, lets look into how to connect up the Unit Tests.

Unit Testing

Flex Unit Test is built into IntelliJ. F*CSS is already setup to run Unit Test through it's Ant build but if you want to get reports back in the IDE you will need to create a FlexUnit run. We have already added the FlexUnit swc/jar to the project (remember it was in the build/libs dir we added as a lib when setting up F*CSS) so now all we have to do is create the run.

If you click back on the down arrow button in the menu that now says HelloWorld, you should select Edit Configuration. IntelliJ will open up the Run/Debug Configurations window. You will see a Flex run which contains our HelloWorld build. Lets click the plus button and make a new FlexUnit run. Configure it to look like this:

Once that is done click apply and then ok to close the panel. The FCSS Unit Test should now be selected in the run menu. Press the green play button to activate it.

All of the test pass and you are presented with a report that lets you know everything is all good. Lets take a deeper look. Right click on where it says All Test Passed and select Show Statistics. This will give you an overview of all the tests, how long they took and allow you to click on each one to see the source code.

When tests fail you get a full report along with the output stack and you can jump to the fail test source code. Other than that, everything else should be standard issue Unit Testing and is very close to how Flash Builder has integrated its tests.

Workspace Organization

As you start to accumulate more and more modules you will want to keep them organized. IntelliJ projects allow you to group modules together without altering the underlying file system structure. You can create a new top level group by right clicking on a module in the project explorer and selecting New top level group...

This will create a new group in the root of the project and you can right click on other modules and tell them to move to the new group or create your own. Here is an example of a project with multiple groups.

Outside of placing modules in groups I don't see many other options for organizing your projects. There doesn't appear to be any way to close a project like you can in Eclipse, and there is nothing that would let me hide projects I don't want to see outside of placing them into a group and folding the group close.

Additional Resources

There are slim pickings when it comes to resources on how to use IntelliJ for Flash development. However there are many tutorials and sites that cover IntelliJ from a Java stand point. So far the best resource I have found on IntelliJ Idea 9's features has been the forums which you can visit here.

Conclusion

So this brings us to the end of the IntelliJ Workflow I hope it was easy to follow. Like always I am happy to answer any questions you may have. Also feel free to leave comments for solutions to issues you come across or tips I may not have covered. This is all very new and I am really looking forward to how this workflow matures and evolves over time.

Read more from Jesse Freeman.