Page History

Follow these instructions to use Flash Builder 4.7 for developing FlexJS applications.

Setup instructions are:

...

 These instructions assume you have installed the Apache FlexJS SDK via one of the methods described in "Getting Started".

Also, starting with Apache FlexJS 0.8.0, you will need to have upgraded Flash Builder to run on Java 7 or 8.  See http://blogs.adobe.com/flashplayer/2016/09/running-adobe-flash-builder-on-mac-with-java-78.html

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
   
   Image Added
   
   
4. Browse to the FlexJS SDK directory and in the "/Choose the ide/flashbuilder folder from this modified copy of the Apache Flex SDK." folder you will see new launch configurations. Select these and click the Finish button
   
   Image Added
   
   

There should now be

...

around 9 new configs in the Run menu under External Tools

Creating a FlexJS Application

Flash Builder does not currently know how to create new FlexJS Applicationhave a default Application template for a FlexJS project. The recommended way to create a new Application 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
   
   Image Added
   
   
2. Choose this modified the Apache Flex SDK
3. Do not change the output folder from bin-debug
4. Hit OK. FlexJS SDK and click Finish or Next to change and default options
   
   Image Added
   
   Flash Builder will generate a new project and a new Application MXML file that has errors. Ignore those errors for now.
   
   If you create a Desktop (AIR) project, you will probably get an error in the error log that says: "Error while retrieving predefined variables".  Just ignore that for now.
   
   
5. 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:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/flexjs/basic" 
                >

    <fx:Style>
        @namespace basic "library://ns.apache.org/flexjs/basic";
        
        .labelStyles {
            font-weight: bold;
            background-color: blue;
        }
    </fx:Style>

    <!-- Initial View -->
    <js:initialView>

        <js:View>
            <js:Label text="Hello World" x="100" y="100" className="labelStyles"/>
        </js:View>
        
    </js:initialView>
    
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    
</js:Application>

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
2. Get the example source for the DataBindingTest from http://people.apache.org/~aharui/FlexJS/DataBindingTest/bin-release/srcview/DataBindingTest.zip
3. Copy the contents of DataBindingTest.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 DataBindingTestDataBindingExample.mxml file to the source folder and make that the default Application for the project.
4. Copy the rest of the files from the DataBindingExample project folder to the source folder for of your project.
5. Rename the references to DataBindingTest DataBindingExample in the other source files to match your Application's name.

Typical Application Project Code:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/flexjs/basic" 
                xmlns:models="models.*" 
                xmlns:controllers="controllers.

...

*"
                xmlns:local="*">
    
    <js:initialView>
        <local:MyInitialView />
    </js:initialView>
    
    <js:model>
        <models:MyModel />
    </js:model>
    
    <js:controller>
        <controllers:MyController />
    </js:controller>
    
</js:Application>

Building

As you edit and save changes to the code, the new compiler known as FalconJX is compiling not only a SWF, but also cross-compiling your source code into JavaScript, and reporting any errors it finds.   FlexJS uses a "common denominator" approach to its libraries.  Where there are differences in the APIs between Flash and Javascript runtimes, the FlexJS library API will present a new common API that will work for both runtimes, but also expose the runtime-specific APIs as well.  This makes it possible for the library code to be as fast as possible.  Instead of calling APIs on instances of objects that wrap runtime objects, your code can directly access the runtime object itself.  The danger is that if you are porting existing Flash-specific code, you won't know if you are still calling APIs that only exist on Flash.  Each FlexJS library is actually two libraries, one for Flash, one for JavaScript and when your code is cross-compiled, the cross-compiler (or transpiler) will look in the JavaScript version of the library and realize that some of those Flash-specific APIs are not implemented for JavaScript.

Running/Debugging

To run the Flash version of your application,

Building and Running/Debugging

As you edit the code, the regular Flex compiler is compiling and reporting errors, but it only knows how to build Flex SWFs so the output SWF won’t run. So, before you debug, select the main MXML file from the Package Explorer and choose from the Run menu the new External Tool: “FlexJS (Debug Build)”. This will run the Falcon compiler with the right options to generate a SWF in the bin-debug folder that overwrites the one that is there. Then you should be able to set breakpoints and debug .

The Falcon compiler cannot currently access your project's settings so any custom compiler options, library and source-paths must be added to the Launch Configuration.

as you would any other Flex project.

To Debug:

1. Select the main Application file in Package Explorer
   
   Image Added
   
   
2. Click the Debug menu icon. This will open your app in the browser where you can debug and interact with the SWF version.
   
   Image Added

To Run:

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

To run or debug the JavaScript version, use a browser to open the index.html in Once you have your app working as a SWF, try the FalconJX tool in the Run menu. It will output a debug version to the bin/js-debug and a of the project, or the minified version to in the bin/js-release folder. Run the index.html in a browser Each browser has its own JavaScript debugging tools. You can also create a External tool to open the debug index.html using the settings below (on Mac) 

1. 
   Image Added

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
   
   Image Added
   
   
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:
   
   Image Added

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

Converting an Existing Flex Application

...

Please ask questions on the dev@flex.apache.org mailing list. Please start the subject of your email with "[FLEXJSFlexJS (legacy)]". 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.