Skip to end of metadata
Go to start of metadata

Follow these instructions to use Flash Builder 4.7 for developing FlexJS applications.  These instructions assume you have installed the Apache FlexJS SDK via one of the methods described in "Getting Started".

Install FlexJS SDK as a Flex SDK

The FlexJS SDK is designed to look like the Flex SDK so that Flash Builder can just treat it as the regular Flex SDK. To add the FlexJS SDK to Flash Builder:

  1. Run Flash Builder
  2. In the Flash Builder Preferences menu add this new folder as a Flex SDK
  3. Choose from the File menu, Import, Run/Debug, Launch Configurations and click the Next button



  4. Browse to the FlexJS SDK directory and in the "/ide/flashbuilder" folder you will see new launch configurations. Select these and click the Finish button



There should now be around 9 new configs in the Run menu under External Tools

Creating a FlexJS Application

Flash Builder does not have a default Application template for a FlexJS project. The recommended way to create a new Flex JS application is to create a Flex Project specifying the FlexJS SDK and then use a launch config to modify the project.  Another alternative is to copy in an existing working example and modify it as follows:

  1. Create a new Flex Project from the Flash Builder File menu



  2. Choose the Apache FlexJS SDK and click Finish or Next to change and default options



    Flash Builder will generate a new project and a new Application MXML file that has errors. Ignore those errors for now.

  3. You can then choose the "Convert New Flex Project to FlexJS Project" script from the list of External Tools in the Run menu.  This will replace files in the new project to look like the Hello World example below.  You can instead choose the "Convert New Flex Project to FlexJS MVC Project" script and it will replace files in the new project to look more like the DataBindingExample below.

    Or you can copy the example code below into your Application MXML file or skip to the next section to start with the example project

Hello World:

Hello World

 

Full Example Project

For a more comprehensive example locate the DataBindingExample in the examples/flexjs folder in the Apache FlexJS SDK directory.

  1. Copy the contents of the DataBindingExample.mxml into your Application MXML file.
    Note: The current tools require that the Application name matches the Project name so you can't just copy DataBindingExample.mxml file to the source folder.
  2. Copy the rest of the files from the DataBindingExample project folder to the source folder of your project.
  3. Rename references to DataBindingExample in the other source files to match your Application's name.


Typical Application Project Code:

FlexJS Application Example

Building and Running/Debugging

As you edit the code, the new compiler known as Falcon is compiling and reporting errors. You should be able to set breakpoints and debug as you would any other Flex project.

To Debug:

  1. Select the main Application file in Package Explorer



  2. Click the Debug menu icon. This will open your app in the browser where you can debug and interact with the SWF version.

To Run:

  1. Select the main Application file in Package Explorer
  2. Click on the Run menu icon


Once you have your app working as a SWF, try the FalconJX tool in the Run -> External Tools menu. It will output a debug version to the bin/js-debug and a minified version to the bin/js-release folder. Run the index.html in a browser.


To create a debug and release JS version:

  1. Select the main Application file in Package Explorer
  2. From the menu choose Run->External Tools->FlexJS (FalconJX Debug and Release Build)



    This will generate the JavaScript and HTML page. It may take longer to generate than the SWF. You can check it's progress and check for any errors in the Console.
    When it's complete the generated files will be in the bin directory.

  3. Open the bin folder. There you will find a js-debug and a js-release sub folder



  4. Open either index.html file in your browser. The debug version contains the full uncompressed JS code while the release version contains the minified code.
  5. You can also create a External tool to open the debug index.html using the settings below (on Mac)

 

Adding Support for Opening Declarations

By default, Flex JS does not yet support opening the class declarations. You can add support manually to each FlexJS project by following the steps below:

  1. Select your FlexJS project and open the Project Properties.
  2. Select the Flex Build Path and then expand the Apache Flex (Flex JS) library



  3. In each library you'd like to add expand and branch and double click on the source attachment icon.
  4. In the dialog browse to the source path of the library and click OK. For example, "/Applications/Adobe Flash Builder 4.7/sdks/FlexJS/frameworks/projects/Core/src/main/flex" would be the path to the Core.swc source files like so:

 

You should now be able to open declarations of the source files.

Converting an Existing Flex Application

The FlexJS prototype is so new, that nobody has attempted to convert an existing application since significant functionality is probably missing. However, the steps should be:

  1. In the Project Properties, change the Flex SDK.
  2. In each MXML file, change the xmlns for mx or s (or both) to library://ns.apache.org/flexjs/basic
  3. You will then have to fix lots of errors in your code where your code uses imports and API from Flex SDK classes that are not currently supported in FlexJS.

Getting Help

Please ask questions on the dev@flex.apache.org mailing list. Please start the subject of your email with "[FlexJS]". You may file bugs at https://issues.apache.org/jira/browse/FLEX under the component "FlexJS". Remember, Apache projects like Apache Flex is mostly staffed by volunteers so response times may vary and any contributions like patches are welcome.

  • No labels

5 Comments

  1. Hi Alex,

    1. Please let me know if FlexJS can convert AS/MXML into Sencha EXTJS files. If I use EXTJS core library instead of Google Closure Library...(Just guessing...)
    2. We have many large projects developed in Flex 3 and now we want to convert them into EXTJS, does FlexJS coverts Flex3 code bases as well?

    Thanks in advance.

    Best,
    Suman

    1. FlexJS doesn't currently support ExtJS, but we would love for someone to help us make it work. FlexJS uses only a limited subset of Google Closure (mainly just goog.require and the event model) and we most likely need to find a way to support RequireJS.

      FlexJS should be able to migrate Flex 3 applications, although the only support for states at this time is via Flex 4 states syntax.

  2. Anonymous

    A little note for those using other IDE's then FB 4.7
    I have been running Flex Builder 3 & do not want to invest in FB 4.7, a simple way to get up & running was to using external tool option
    On the overlaid FlexJS SDK go to ide\flashbuilder folder & open the .launch file corresponding to type of project you want to build, for an application it would be FlexJS (Release Build).launch
    Watch out for org.eclipse.ui.externaltools.ATTR_LOCATION & org.eclipse.ui.externaltools.ATTR_TOOL_ARGUMENTS variables, the former is the location of your java executable inside JDK & the latter is the argument you pass to it, copy the value part of org.eclipse.ui.externaltools.ATTR_TOOL_ARGUMENTS paste it inside a text editor & find/replace " with "

    In the external tools or command line type location of java executable followed by arguments you extracted in the step above, it looks a little something like this for me
    C:\Program Files (x86)\Java\jdk1.6.0_31\bin\java.exe -Xmx384m -Dfile.encoding=UTF8 -Dsun.io.useCanonCaches=false -Dflexcompiler="c:\software\ApacheFlexJS" -Dflexlib="c:\software\ApacheFlexJS\frameworks" -jar c:\software\ApacheFlexJS\js\lib\mxmlc.jar -compiler.mxml.children-as-data -compiler.binding-value-change-event-type=valueChange -js-output-type=FLEXJS -closure-lib=C:\software\closure -sdk-js-lib=c:\software\ApacheFlexJS\js\src "$

    Unknown macro: {resource_loc}

    "
    Replace the resource location with your flex application file location, its easy to miss it in eclipse; resource_loc point to the selected file & if you don't have your application file highlighted the compilation will fail

  3. AT point 1. Install Apache Flex 4.9 or later as an SDK in FB.
    This has issues.. i used "Flex SDK 4.11" and its giving errors.
    Cannot access jar <Path>/falcon-mxmlc.jar
    Works with SDK 4.9 and FB 4.7

    1. Sounds like the deploy.bat or deploy.sh did not work. Please file a JIRA issue with more details.