Improved Flex Project Setup in IntelliJ IDEA 11.1

Hi, Flash and Flex devs!

We’ve been analyzing feedback from those of you who use IntelliJ IDEA for Flex and ActionScript development. A common problem turns out to be complicated project setup. To address this issue in IntelliJ IDEA 11.1, we have reworked the user interface, all the way from module wizard and project setup to run/debug configurations and AIR Packaging.

We believe these changes will make product experience better for everyone, and especially for the users of Eclipse-based IDEs.

Read on to see what we’ve changed so far. However, this isn’t final, as we count on more feedback from you to make additional improvements and polishing.

Introducing a new fundamental concept: build configuration. Build configuration is a set of parameters that define how to produce SWF or SWC, HTML wrapper, AIR descriptor and installer, Android and iOS package from the module source. ActionScript/Flex module can have one or more build configurations, thus allowing you to use the same code base to produce apps/libs for different target platforms (Web, Desktop or Mobile), pure AS3 or Flex based app/lib, use different SDKs, specific compiler options, etc.

You no longer need to create different types of SDKs depending on your target platform. Now you just define the Flex SDK, and IntelliJ IDEA will automatically choose the correct subset of SWCs for each build configuration.

The screenshot below shows a project with 2 modules: one of them (CommonLibs) produces a single pure ActionScript library, while the other (MyApp) has 3 Flex application build configurations: Mobile-, Desktop- and Web-targeted.

Build configurations give you an easy start with a small test project, as well as all the power to set up a huge multi-module enterprise level project with complex dependencies and various compiler options.

At this point you might ask: how are source files highlighted if the corresponding module has several contradictory build configurations? The answer is in the status bar (and the same item in the context menu) – there you can select which of the configurations is used to highlight module sources:

Hint: You can switch build configurations very quickly if you assign a keyboard shortcut to the action.

Run/debug configurations were redesigned as well. Now there is a ‘Flash App’ run configuration type that allows launching your app in the browser, on the desktop, mobile emulator or Android device, according to the selected build configuration:

IntelliJ IDEA 11.1 will open your Flex project and convert it to the new settings on the fly (having backed up previous settings), so it’s easy to start using new features in no time!

If you find anything unclear or inconvenient, please leave your comments here, or reach us on the forum or the issue tracker.

Let me remind you that we also provide Flash profiler and Flex UI designer plugins (we’ll post demos on the latter shortly).

Happy Flash coding!

Comments below can no longer be edited.

40 Responses to Improved Flex Project Setup in IntelliJ IDEA 11.1

  1. Avatar

    Michael Werle says:

    February 16, 2012

    We use the Flex support as part of an ActionScript-only Video player that we include in a Grails project. To do so, we include the Flex Aspect on the Grails Plugin project that contains it.

    Unfortunately, in 11.1, it doesn’t seem that this setup is possible anymore. Do we need to separat out the code into two trees? Or could we come up with some sort of clever exclude with a separate source root for the Flex support?

  2. Avatar

    ksafonov says:

    February 16, 2012

    At the first glance I would suggest having separate modules for Groovy and ActionScript. This would also keep the code more separate and clear. Would this work for you?

  3. Avatar

    chris says:

    February 16, 2012

    Looks more organised with compile targets this way nice work, here is me crossing fingers the haxe support in dev will be able to use this ui, even more targets are possible there 🙂

  4. Avatar

    D says:

    February 16, 2012

    UI looks great, but keep losing my changes after every dialog close 🙁

  5. Avatar

    ksafonov says:

    February 16, 2012

    @D This is the regression in the latest build, sorry for that! We plan to publish the fixed one today.

  6. Avatar

    Mike McConnell says:

    February 17, 2012

    Where do you set up the remote server (data) configuration? I see it in the compiler settings, but it’s greyed out and cannot be edited. Where do you go to point the application to the services-config.xml file on a ColdFusion server?

    Thank you,

  7. Avatar

    Mike McConnell says:

    February 17, 2012

    Also, I tried to use the Flash UI designer plugin with this version, but the “Switch to Design View” button is always greyed out and cannot be selected.

    Thanks Again,

  8. Avatar

    Alexander Doroshko says:

    February 18, 2012

    @Mike McConnell See legend at Compiler Options tab. Grey text doesn’t mean that option is not editable. Just click to the right from the option name.

    Design View works only for Flex 4, make sure that you have http://ns.adobe.com/mxml/2009 language namespace.

  9. Avatar

    Mike McConnell says:

    February 19, 2012

    Thank you, Alexander. Your recommendations worked perfectly for both the compiler settings and the Design view. Not real sure what good design view is, though, except for previewing component layouts and properties. It’s not the same “design view” I’m accustomed to. And just one other point: it’s not real intuitive that you have to click in an undefined area to the right of the compiler config settings to bring up a text entry box. I think it might be better to put empty text boxes there to let developers know that they can input something into the text field. Or perhaps just a button with some elipses to clue users in on the fact that they can search for the services-config.xml file for that particular server setting.

    Thanks Again,
    M. McConnell

  10. Avatar

    Rob says:

    February 28, 2012

    I was expecting the flash UI designer to allow me to drag and drop, however it seems to have extremely limited functionality. Is the intention to upgrade/update this in the future, or am I just doing it wrong?

  11. Avatar

    ksafonov says:

    February 29, 2012

    @Rob yes we will do that eventually. Feel free to submit a feature request at http://youtrack.jetbrains.net/issues/IDEA#newissue=yes so others can vote for it thus raising the priority.

  12. Avatar

    steve L says:

    March 7, 2012

    Thank you !

  13. Avatar

    Søren says:

    March 12, 2012

    Great work guys – IntelliJ supports Flex/Flash development better than Flash Builder and other tools. Will recommend it to other developers also 😀

  14. Avatar

    Abdul Sattar says:

    March 15, 2012

    Absolute joy! IntelliJ IDEA is way better than rest. I hope that you guys come up with a better GUI Designer than FlashBuilder’s Design View.

  15. Avatar

    mlestat says:

    March 16, 2012

    Does Intellij support building AIR Desktop using native installer option?

  16. Avatar

    ksafonov says:

    March 16, 2012

    @Abdul thanks! To help us with good Designer please give your feedback/bugreports/usability issues in tracker: http://youtrack.jetbrains.com

    @mlestat Not right now, but it will likely do it soon: please follow http://youtrack.jetbrains.com/issue/IDEA-82954

  17. Avatar

    Chris McDonald says:

    March 29, 2012

    Having some difficulties with the new flex module build configurations.
    Previously I had 2 modules A and B, B depended on A (used classes defined in A and locale resource bundles defined in A), so I would simple have module B define a module dependency on A. This doesn’t seem possible in the new interface.
    I have set up a file dependency for B to use the source code of A, this fixes everything except that B still cannot resolve the resource bundles defined in A. I have tried many combinations of dependencies, adding shared libraries etc. Could someone tell me how to get the old module dependency style working in this new UI? Or how to resolve the shared locale resource bundles between flex modules?

    The multiple build configuration seems like a great idea for deploying the same module code for web, mobile etc, but at the moment I’m stuck with a broken build configuration!

  18. Avatar

    ksafonov says:

    March 29, 2012

    @Chris McDonald
    You need to make build configuration in module B dependent on build configuration in module A (given that A-build configuration is a library). Click ‘+’ button to the right (or to the bottom) of your dependencies list and choose ‘Build configuration’. If your A-build configuration is not a library for some reason (it should be converted automatically if you your project was configured using IntelliJ IDEA 11 or 10.5), you can make it a library by clicking on ‘Change’ link at General tab.

  19. Avatar

    Chris McDonald says:

    March 29, 2012

    Thank you, that seems to work, actually modules A and B are both apps, but I added another build configuration for Module A as a library which seems to work.
    I now just have a problem with Module B not being able to resolve some assets. Module B has classes which have embedded assets which actually come from Module A. I have tried including the assets directory in the Compiler Options Items to include in output SWC for Module A and also tried adding the files to the dependency of Module B, but Module B fails to compile saying it cannot resolve the assets for transcoding. If you have any suggestions to fix this, that would be great. In the mean time I will just have to copy the asset files over to Module B to get it to compile.

  20. Avatar

    Alexander Doroshko says:

    March 30, 2012

    @Chris it is possible to configure project without copying assets.
    1. Include folder with assest or individual files to SWC (SWC build configuration, Copiler Options tab)
    2. Make sure that paths to assets in app source do not contain leading slash (if assets are in the same module – leading slash is required, but if assets come from SWC – usually not). This must be a relative path from source folder of lib module to the asset itself.

  21. Avatar

    Daniel Thompson says:

    March 30, 2012

    I can’t seem to debug my Flexmojos-based application. Other than the tag, there is no mention of the new process (i.e., is -DconfigurationReport=true still required, etc.). I created an issue here: http://youtrack.jetbrains.com/issue/IDEA-83826

  22. Avatar

    Chris McDonald says:

    April 4, 2012

    Thanks Alexander, it is now working. Unfortunately it breaks our build, since we are using ant and a different build config to IDEA, what worked before doesn’t in the new update. I guess we should be changing our ant build to work the way IDEA does the compilation, but for now I will do as you suggested and make sure I don’t commit my build breaking changes.

  23. Avatar

    Igor G. says:

    April 7, 2012

    In IDEA 11.0 there was fcsh, Flex compiler which is using incremental compilation, and from my experience the fastest way to compile even a big project. Why is it absent in 11.1? Or how can I add it to 11.1?

  24. Avatar

    Alexander Doroshko says:

    April 10, 2012

    We’ll bring fcsh back in one of the update releases. You can create an issue to track progress: http://youtrack.jetbrains.com

  25. Avatar

    Joni Bekenstein says:

    April 11, 2012

    I’m having a problem debugging a pure Actionscript App on Android. My build configuration successfully creates the .apk file, and if I manually install it on the Android device it works ok.

    But when I setup a run/debug configuration, (with run on Android device and debug over USB), I always get the following error: “No Devices Detected”.

    I connect the device via USB and then run
    $ ./adb devices
    List of devices attached
    37c6245411f8317 device

    Then I try to debug from Intellij IDEA and get the error.

    Now I try again with adb
    $ ./adb devices
    adb server is out of date. killing…
    * daemon started successfully *
    List of devices attached

    It looks like the device got disconnected somehow in the process.

    I’m using the following version:
    Intellij IDEA 11.1.1
    Build #UI-117.117

  26. Avatar

    Mike says:

    April 11, 2012

    Switching back to Eclipse. You’ve broken my projects for the last time. Backwards compatibility would have been nice.

  27. Avatar

    ksafonov says:

    April 12, 2012

    @Mike sad to hear, and we’re really sorry for breaking up your projects. Could you please some details on what is broken so we can fix it in the next builds? Thanks!

  28. Avatar

    Alexander Doroshko says:

    April 12, 2012

    @Joni Bekenstein: What is your OS and Flex SDK version? IntelliJ IDEA uses AIR Debug Launcher (adt) tool from Flex SDK. Can you please check output of the following command:
    [Flex SDK]/bin/adt -runtimeVersion -platform android
    P.S. It will be more convenient to continue discussion at the forum or issue tracker:

  29. Avatar

    Mike Hogan says:

    April 20, 2012

    Messed up my 11.0 project as well. imports for fl.controls.Button no longer work. Pretty stuck now.

  30. Avatar

    Alexander Doroshko says:

    April 24, 2012

    @Mike Hogan To get fl.* classes available go to Dependencies tab of the related Flash build configuration (under Flash module node in Project Structure dialog) and add required SWCs from Flash Pro installation.

  31. Avatar

    Scott Talsma says:

    May 8, 2012

    Is it still possible to create a run/debug configuration where nothing gets launched? It is often useful to simply refresh a browser window instead of always opening a new one.

    Additionally, Flash Player allows for piping debug output to an IP that is hosting the debugging session. This is useful for running IntelliJ on Mac, but testing the app on a windows virtual machine. (My workaround is to configure the IE browser path in IntelliJ to garbage, and set that up as the browser to use for that debug configuration.)

  32. Avatar

    Alexander Doroshko says:

    May 10, 2012

    @Scott There’s Flash Remote Debug run configuration. It doesn’t have ‘Make before launch step’, but Ctrl+F9 makes everything if needed.

  33. Avatar

    Scott Talsma says:

    May 11, 2012

    @Alexander–now that I see that default configuration, it all makes sense. Up and running again. Thanks!

  34. Avatar

    Pablo says:

    June 9, 2012

    Im a newbie to IntelliJ and I just downloaded version 11.1 for linux but I don’t have the option to create an ActionScript module. If anyone could tell me what’s missing I will appreciate that. Thanks!

  35. Avatar

    ksafonov says:

    June 11, 2012

    @Pablo First please ensure that you have Flex plugin enabled (Settings -> Plugins). Then click File -> New Project -> Create project from Scratch and select Flash module type.

  36. Avatar

    Travis says:

    July 19, 2012

    In IntelliJ 11.0 we were able to set a Project SDK and then have our Flex modules inherit that SDK. That functionality no longer appears to be supported in 11.1 – or am I missing something? When I set a build configuration the dropdown no longer shows a “Project SDK” and setting it to “No SDK” truly assigns it no SDK so there is no source highlighting, etc.

  37. Avatar

    ksafonov says:

    July 19, 2012

    @Travis you’re right: http://youtrack.jetbrains.com/issue/IDEA-84951

  38. Avatar

    hayesmaker says:

    August 15, 2012

    how do you add new air sdk’s to the current list.. also this info seems to be an older verison of intelliJ, my version 11.1 doesn’t have it

  39. Avatar

    Alexander Doroshko says:

    August 16, 2012

    @hayesmaker This blog post is exactly about IntelliJ IDEA 11.1.x. Now you configure SDK of ‘Flex’ type regardless of what kind of application or library you are going to develop, because Flex SDK includes AIR SDK. When configuring Flash Build Configuration you can choose any target platform: Web, Desktop or Mobile and required SWCs from Flex SDK will be picked automatically.

  40. Avatar

    Colin Kershaw says:

    August 29, 2013

    It was important for me to understand that the actual locale resource folder needs to be marked as Sources, not its parent folder. For example, “en_US” is flagged as Sources, not “locale” for the folder structure:

    \–en_US (contains .properties files)

Discover more