IntelliJ Idea9 ActionScript 3/Flex Workflow
As far as ActionScript 3/Flex IDEs go, IntelliJ is the new kid on the block. It is cross platform, is not built on Eclipse, and has some of the best code writing/refactoring features I have ever seen. It's no surprise considering IntelliJ is one of the best Java editors around and now that it fully supports ActionScript development it is worth looking at. To help familiarize you with working in IntelliJ Idea 9 I have broken this workflow tutorial into two parts. This is part 1 which covers getting up and running, configuration, the editor itself and project organization. On the surface, it may look like there is a lot going on but each feature/step is clearly broken out with images to help you navigate through the entire process. Lets get started:
IntelliJ Idea 9 comes in two versions, Ultimate Edition and Community Edition. Unfortunately you need Ultimate in order to do Flash dev. You can visit the download page here.
IntelliJ has several price options, ranging from Free for classroom and Open Source to $249 for Individual then up to $599 for companies. It is not clear if the personal License includes the AS3/Flex support so you may want to contact them first. I took advantage of their Open Source deal and have been happy every since. You can learn more about the pricing here
Once you have IntelliJ Idea 9 downloaded and installed, open it up and lets go over the next steps.
IntelliJ is going to go through it's configuration Wizard. In these next few steps you will get a sense of just how comprehensive this IDE is. I have taken screenshots of the plugins I enabled/disable for myself. If you are not sure, just keep the default ones checked. It is important to note that IntelliJ may run slower based on how many plugins you install. It would be nice if they asked you some basic questions like do you want to do Flex dev or Java dev and selected only what you need. You can always go back and enable/disable plugins in the preferences at any time so don't worry if you feel like you messed up.
Select VCS Plugins
I only use Git and Subversion so it was an easy choice to make.
Web/JavaEE Plugins
Here I disabled everything since I don't use them.
HTML/JavaScript Development Plugins
Here I left everything enabled. Notice how Flex depends on CSS and JavaScript. From what I can tell, Flex support is considered "JavaScript" for the most part and that kind of makes sense.
Other Plugins
Here I just deactivated some of the obvious ones I knew I wouldn't need.
Now you are ready to click Finish and IntelliJ will launch.
Understanding The Workspace
If you are coming from an Eclipse based Editor (such as Flash Builder or FDT) you are going to be in for a surprise. IntelliJ is going to ask you to create a project, this is their equivalent to a workspace in Eclipse.
Before we create a new project, lets talk about configuring the editors settings.
Customizing Settings
You can customize the editor in the settings menu.
There are a lot of settings, way to many for me to go over here. Instead I just want to talk about the Keymapping. The first time you work with IntelliJ you may start going nuts when command w doesn't close the window. Luckily you are able to load different Keymaps. Go into the Keymap section under IDE Settings section.
Here you can remap any command. Almost every command you can use in IntelliJ has a keyboard equivalent. If you want to try different Keymaps, select them from the drop down. On the mac I chose Mac OS X 10.5+ even though it was automatically set to Mac OS X. This will restore the system commands you are used to such as copy, paste and closing windows as you would expect.
I am still trying to figure out the best Keymaps for Flash Development. For now I leave it at the default but I have set the debug run to command return. If you want to customize the Keymap you have to copy one of the pre-installed ones and edit it from there.
Installing Plugins
Unlike Eclipse which doesn't come with built-in plugins, outside of Java editing, IntelliJ has everything you need built in. Not only that but all of these plugins were designed to work with each other so they are very stable and well integrated into the editor. If you do want to enable or disable any plugin you can find them in the Plugins menu under the IDE Settings area.
I haven't done much research on 3rd party plugins since I have been very happy with the ones already installed. Plus I find it hard to imagine there would be any Flash specific ones sine AS3/Flex support is fairly new.
Creating A Project
Lets Create a new project and go through the configuration.
You have several options for creating a new project. The two I want to highlight are "Create project from scratch" and "Import project from external model". Lets look at the later first.
IntelliJ helps you transition from an Eclipse base IDE by allowing you to import your projects from Eclipse and in our case there is a Flex Builder option as well. I haven't tested this yet but it is nice to know the option is there. One of IntelliJ's features is the ability to work alongside Eclipse projects without corrupting the Eclipse specific project settings. Again this is something I haven't tested but it may be a good option if you work in a team which is not ready to make the switch. Lets look into creating a project from scratch. Click next.
This is the New Project wizard. There are two parts, the top area configures the project itself and the bottom configures a module. Before I talk about what a module is lets go over where your Projects are located.
On the Mac, IntelliJ wants to put your project in the user directory under IdeaProjects - /Users/jessefreeman/IdeaProjects/untitled. Who am I to argue, in Eclipse I would keep my workspaces in my Documents folder and organize them by IDE (I use FlashBuilder and FDT). To keep this workflow simple lets just use the default setting. Name the project HelloWorldProject. I know creative right?
Now lets talk about the module. If a project is like a workspace in Eclipse, a model is like a project in an Eclipse workspace. Mind blowing right? Each module is a single self contained dev area. So the module has its own src folder and compiler settings. Also you can have library modules or application modules just like you do in Flex Builder. Since IntelliJ was designed to be a Java IDE it defaults to Java. If I had selected Flex (this will also cover AS 3 only projects as well) and name it HelloWorld
You should now be ready to hit next and work your way though the additional set of screens. First up is where you want to put your source code.
I didn't change anything here so click next. Also ignore any references to Java you may see in the description area since you selected a Flex module. This is one of those little details that you should overlooked but may be confusing to people getting started.
Now comes the fun part, setting up the SDK. If you are use to Flash Builder or FDT you never have to worry about this, the Flex SDK is setup by default.
In IntelliJ you are going to have to configure it yourself. Lets start by downloading the latest SDK from Adobe here.
Once you have downloaded the SDK, unzip it and put it somewhere safe. I put mine in my user account just to make it easy to find - /Users/jessefreeman/flex_sdk_3.5. Likewise if you have Flex/Flash Builder installed already you can simply point to their sdk like so - /Applications/Adobe Flash Builder Beta 2/sdks/4.0.0. I have tested IntelliJ with the latest version of the SDK that comes with Flash Builder Beta 2 and it works fine.
Now we can set up the SDK, click the box with [...] next to the red [none] drop down. Here you will be presented with an empty Configure JDK screen. Click the plus button and you should see this window.
Find where you installed the SDK and hit ok. IntelliJ will display the SDK it found and the SWCs associated with the SDK. Here is what it looks like if you are using the 3.5 sdk.
This is what it looks like when pointed to the 4.0 SDK that comes with Flash Builder.
For the rest of this tutorial I am going to be using the 4.0 sdk but the 3.5 one should work exactly the same except you will be limited to Flex 3. Now that we have the SDK setup, lets close this window and go back to the New Project Wizard.
You should see the SDK you just created is selected and here you can target what version of the player you want to use for this module.
The next few options will get your module stared quickly. You can have IntelliJ create a sample Flex Application for you, for this example I am going to select Pure ActionScript sample application. Notice how the HelloWorld.mxml is now a .as file. I am also going to have it auto generate the HTML wrapper for us so your settings should look like this.
I should mention that I haven't tried making an AIR app but the option is there along with the ability to create a custom compiler configuration. Lets click Finish. You will be presented with the wizard for creating a HTML Wrapper file.
It is important to note that by default IntelliJ will put the wrapper file in your src file. For this tutorial you want to leave it this way but in future projects you may want to create a bin folder and have it generated there automatically. I am going to go over some of the refactoring options in the next few steps so keeping the wrapper in the src folder is important to the flow of the tutorial.
Project Properties
Now that you are done with configuring the Project and its module you should be sitting in the editor with your project preview on your left and gray on the right. Before we go any farther lets talk about the project's properties. This will be very important when it comes to correctly building your project later. You can open up the window by selecting Project Structure under the file menu.
I am just going to go through the basics here. There are so many settings and special options you can easily get lost in the details and I am sure you just want to start coding. Lets look at the Modules panel.
Here you will see all of the important information about your HelloWorld module. You will see that src is already added to the Content Root. If you look on the right you will see a project tree and the src folder is highlighted blue. Above you have 3 flags to mark items in your project, Excluded (will hide it from view), Test Source (if you have Unit Test code), and Sources. To use this, simply highlight a file an click the flag to activate it. Lets move onto the dependency tab.
Here you can add other dependancies such as additional SWCs or other modules. I will cover this more in the next part of this tutorial. Lets look at the last tab, Flex Compiler Settings.
Here you set the module up as an Application (swf) or a Library (swc). You can also point it to the Main Class and manage the output filename/directory. By default IntelliJ will put your swf in a directory called out in the root of the project - /Users/jessefreeman/IdeaProjects/HelloWorldProject/out/production/HelloWorld. Note that it is outside of the folder structure of your module. I have been trying to keep my folder setpup similar to how I would do it in Flash Builder or FDT so I change this path to bin - /Users/jessefreeman/IdeaProjects/HelloWorldProject/HelloWorld/bin/swfs. Click apply to save this change.
Before we leave this panel I want to show you the Advanced tab quickly.
You may be familiar with these advanced compiler settings from Flash Builder and FDT. Here you can pass in optional compiler arguments such as -use-network=false and what not. Also you can change your target player version and more. It is important to know where to find these setting. Lets click OK and exit out of this screen.
The Editor
The editor should look very familiar to you if you came from Eclipse. Explorer on the left, editor on the right and instead of tabs on the top you have them on the left, bottom and right. Unlike Eclipse, IntelliJ does not have the notion of perspectives. The editor is the editor! You don't need to switch back and forth between editors to work on PHP and Action Script at the same time. This is a huge advantage. Lets look at how it performs with ActionScript.
Goto the HelloWorld module, open it up and start to edit the HelloWorld.as file. It should pop up on the right when you double click on it.
As you can see IntelliJ already did our Hello World for us. Kind of takes the fun out of the tutorial. So lets just type in a few extra lines of code to test out the editor and show off the cool features. Start by turing on line numbers by right clicking on the right margin.
I just want to highlight a few of editor's the best features:
Code complete - if you start typing out a class you can access code complete via the shortcut. On a mac it is control space. This is exactly how Flash Builder and FDT work.
Auto importing - as you use code complete it will automatically import classes for you. If you are no longer using a class it will gray out the important statement telling you to remove it. You can also use the Organize Imports feature to cleanup your import statements.
Generate Code - There several options for generating code for you such as getters/setters, event handlers, toString() and copyright info. You can activate this menu via command n.
Quick Fix - you will see a light bulb on the left from time to time. Yellow is for warnings and red is to flag an error. You can use the quick fix to add a method variable as a field in the class, convert a switch statement into an if statement, flip a conditional, and simplify/cleanup your code. These are contextual and show up when you highlight parts of your code.
Quick Open - you can quickly open any class by pressing command O. A dialog will pop-up that lets you type in the name of the Class you want to edit. This is a huge timesaver when it comes to finding what you want to work on next.
These are just a few of the most commonly used features but if you explore the Code and Analyze menus you will see the fully list of options.
We need to do one last thing before trying to compile the project. You may remember that well told IntelliJ to place the html-wrapper inside of the src folder. Lets create a bin folder and move it over.
At this point you may get an error that looks like this:
This come up because when we change the output path to bin/swfs when setting up the project. Well IntelliJ has hid the bin folder by default. If you see your bin folder you may not see your swf folder, depending on when you hit apply as you typed out the path. Lets go back into the project structure menu and fix this. If you see that the bin folder or the swf folder is red we need to tell IntelliJ to not exclude that directory.
Simply click on the excluded directory and press the Exclude button above it. Once the directory is not red you are good to go. IntelliJ tends to hide files and folders it feels it should hide. This drove me nuts until I finally figured out what was going on. Lets finish cleaning up our bin folder so we can compile.
Create a js and swf directory in your bin folder if you don't already have them. Now move the swfobject.js into the js folder and the playerProductionIntsall.swf into the swf folder. The wrapper.html should got in the root of bin and rename it index.html. If you are looking for where rename is, right click on the file an look under the Refactor menu or hit shift F6. You can delete the history folder, we are not going to need it. Your module should look like this:
You may be thinking, wait don't we need to fix the paths in the index.html so it can load up the swfobject.js? IntelliJ already took care of this for us. As I had mentioned before, unlike Eclipse, you don't have to switch between different editor "modes" to modify HTML. Plus Eclipse never would have analyzed the html file to check for JavaScript paths. All of this is built into IntelliJ, open up the index.html file and take a look. You should see everything is correctly linked up now.
We do have to fix one thing, the path to the swf. Go to line 51 and put "swfs/" in front of HelloWorld.swf. Now we are ready to give this a go.
This is the end of part 1. In part two we are going to go over how to compile your swf, debugging, using Version Control, setting up libraries, Unit Testing and more. So stay tuned and make sure you leave your questions, comments and thoughts below.