THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
There is no particular enhancement made by JetBrains to support FlexJS but the Apache Flex Team has enhanced the Falcon compiler to make believe the IntelliJ Flex Plugin is using the legacy one, therefore the configuration requires a little bit more tweaking than a classic Apache Flex application.
I will assume you know how to use IntelliJ and focus on the FlexJS configuration only, I will also assume, you installed the FlexJS SDK in a location I will name <FLEXJS_INSTALL_FOLDER>.
The first gotcha is that you can't import an existing project, you will need to create a new one and copy your sources into the folder where you created your IntelliJ FlexJS project.
(You should have at least one Flex SDK installed and configured in IntelliJ to do that)
To start to play with, you can use the examples located in <FLEXJS_INSTALL_FOLDER>/examples.
Actually, I will use DataGridExample for the need of this demo.
The first thing you will need to do will be to add the FlexJS SDK to IntelliJ.
1- go to File -> Project Structure.. -> SDKs -> Add new SDK
2- Nagivate to and select the FlexJS SDK from <FLEXJS_INSTALL_FOLDER>. (I'm using the nightly build here)
While this window is still open, click on Global Libraries, we will add the FlexJS SDK also as a library, that's the second gotcha.
1- Click on New Global Library, select your <FLEXJS_INSTALL_FOLDER>.
2- Rename the library to something meaningful, I choose to name mine "FlexJS Nightly Lib".
3- Remove any Classes and Sources entries that doesn't belong the frameworks folder.
We will now configure our module to use the freshly added SDK and library along with configuring the compiler options.
1- Click on Modules, select the module you want to configure and click on Dependencies.
2- Select the FlexJS SDK you just added.
3- Add the FlexJS global library you just added too.
4- Click on Compiler Options
5- Click on Module Defaults
6- Remove the default en_US local
7- In Default options for modules, add: -load-config+=<FLEXJS_INSTALL_FOLDER>\ide\IDEA\intellij-config.xml
8- Click OK to validate.
9- In Additional compiler options, add: -js-output-type=FLEXJS_DUAL
(The FLEXJS_DUAL output type will tell the compiler to build the SWF / SWC and also the JS version of your module, if you want to build the JS only, use FLEXJS, if you want to build the SWF / SWC only , remove this line)
Click OK to validate.
You should be able to build your project now, click on Build -> Rebuild project.
(Fix the eventual error the compiler it found and you can use Build -> Make project)
It is time now to launch the application:
1- Create a Launch Configuration for your SWF as you would do normally for a classic Flex application.
2- Click on Run or Debug.
3- In the Project pane, navigate to and right click on /out/<Your module name>/js/out/bin/js-debug/index.html
4- Click on Run or Debug 'index.html'
It will open the index.html in your default browser, in order to be able to debug your module in the browser, you will need to debug your application in Chrome.
I use to create another Chrome instance.
The --disable-hang-monitor option will allow you to be able to continue to debug even after the script time out limit in case of a SWF.
Once done, you will need to launch once the Debug configuration, it will open Chrome, close it, you see a popup appear in IntelliJ asking you to install the JetBrains IDE support for Chrome, do it, take care to configure the port as describe in the popup.
Set a break point in one of the JS file and launch the Debug configuration again, it will now break at it.
I will now explain how to configure IntelliJ modules base on Externs which will allow you to create low level FlexJS components based on JavaScript but written in AS3.