Page History

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 but 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 that we will call <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, here I chose a Web Application for this example but you can also choose a Web / Desktop / Mobile + Apllication Application / Library depending on what you are targeting.

Image RemovedImage Added

(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 DataBindingExample for the need needs of this demotutorial.

The first thing you will need to do will be to add the FlexJS SDK to IntelliJ.:1- go

1.  Go to File -> Project Structure.. -> SDKs -> Add new SDK

...

1.  Nagivate to and select the FlexJS SDK from <FLEXJS_INSTALL_FOLDER>. (I'm using

...

1. a nightly build here)

Image RemovedImage Added

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-

1. Click on

...

1. Global

...

1. Libraries, select <FLEXJS_INSTALL_FOLDER>/frameworks/libs. Then, deselect "air" and "player\23.0" in my case.
   
   Image Added
   
   
   
2. In the next step IntelliJ will ask for choose project where library should be added
   
   

          Image Added

     3. \frameworks.2- Rename the library to something meaningful, I choose to name mine "Apache FlexJS Nightly Lib".

          Image AddedImage Removed

We will now configure our module to use the freshly added SDK and library along with configuring the compiler options.:1-

1. Click on Modules, select the module you want to configure and click on Dependencies.

...

1. Select the FlexJS SDK you just added.

...

1. Add the FlexJS global library you just added too

...

Image Removed

...

1. , if you have not added it in the previous steps.
2. Click on Compiler Options

...

1. Click on Module Defaults (If you have more than one module, it makes sense you apply this and the following to Project

...

1. Defaults instead).

...

1. Remove the default en_US local

...

1. In Default options for modules, add: -load-config+=<FLEXJS_INSTALL_FOLDER>

...

1. /ide

...

1. /IDEA

...

1. /intellij-config.xml
   

...

1. 
   Image Added
   

...

1. 
   
2. Click OK to validate.

...

1. In Additional compiler options, add: -targets=JSFlex,SWF -external-library-path+=<FLEX_JS_INSTALL_FOLDER>/js/libs/js.swc -

...

1. allow-subclass-

...

1. overrides=

...

1. true 
   (The

...

1. -targets=JSFlex,SWF will tell the compiler to build both the SWF / SWC and

...

1. the JS version of your module

...

Image Removed

...

1. . If you want to build the JS only, use

...

1. -targets=JSFlex)
   
   Image Added

1. 
   
   
2. Click OK to validate.

You should be able to build your project now, click on Build -> Rebuild project. (Fix the eventual error the compiler found and use Build -> Make project)

It is time now In order to launch the and debug SWF version of application:1-

1. Create a Launch Configuration for your SWF as you would do normally for a classic Flex application.
   

...

1. 
   Image Added
   

...

1. 
   

2.  Click on Run or Debug

...

Image Removed

...

1. for launch SWF version of application

   Image Added

    

In order to launch and debug JS version of application:

1. In the Project pane, navigate to and right click on /out/<Your module name>/js/out/bin/js-debug/index.html

...

1. Click on Run or Debug 'index.html'

...

Image Removed

1. . 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.Image Removed

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 / SWC.
The --disable-bundled-ppapi-flash will allow to use the NNAPI Flash debugger plugin instead of the PPAPI, soone, Iif assumed it is not installed, in case not, 
you can download and install it from https://www.adobe.com/support/flashplayer/downloads.html

...

Set a break point in one of the JS file and launch the Debug configuration again, it will now break at it.

Image Removed

I will now explain how to configure IntelliJ modules based on Externs which will allow you to create low level FlexJS components based on AS3 / JavaScript but written in AS3-JS only or simply to create AS3-JS application.

• What are externs ?

There are AS3 surface API for JS libraries.

• And so what ?

That allows you to write JS code in AS3, for example to manipulate the DOM or use JS libraries like JQuery an others.

• How it looks like ?

see https://gist.github.com/doublefx/8dfb8d751045c074e4df

Image Added

 Will continue later...