Page History

...

• 1/11/2013 - MXML-based project can now be compiled into a working HTML/JS project
• 2/10/2013 - Added HTTPService, LazyCollection, and a List class.
• 3/01/2013 - Added Adobe Flash Builder integration.
• 4/23/2013 - Updated to use FalconJX instead of FalconJS.
• 6/27/2013 - Added the beginnings of MXML states and databindingdata binding.
• 7/22/2015 - Updated to latest process.

Set Up

This is the setup for developers working with the source code. If you only want to use Flash Builder to play with the FlexJS framework, see: Using FlexJS with Adobe Flash Builder.

1. Get the ASJS code from Apache Git via

   Code Block
   git clone https://git-wip-us.apache.org/repos/asf/flex-asjs asjs cd asjs git checkout develop

2. Get the Falcon code from Apache Git at

   Code Block
   git clone https://git-wip-us.apache.org/repos/asf/flex-falcon.git falcon cd falcon git checkout develop

3. Get the FlexUnit code from Apache Git at

   Code Block

   Apache Flex 4.9 up and running. We don't really use any of its code, but getting it up and running makes sure you have the build tools and playerglobal.swc we need.Get the ASJS code from Apache Git via

   Code Block
   git clone https://git-wip-us.apache.org/repos/asf/flex-asjsflexunit.git asjsflexunit cd asjsflexunit git checkout develop

4. In the frameworks/as folder, run ant. You may need a local.properties or a FLEX_HOME environment variable to build successfully. This should result in a frameworks/as/libs/FlexJSUI.swc

5. Get the Flex SDK code from Apache Git at

   Code Block
   git clone https://git-wip-us.apache.org/repos/asf/flex-sdk.git sdk cd sdk git checkout develop

6. Get the TLF

   Get the Falcon

   code from Apache Git at

   Code Block
   git clone https://git-wip-us.apache.org/repos/asf/flex-falcontlf.git falcontlf cd falcontlf git checkout develop

7. Get the BlazeDS code from Apache Git at

   Code Block
   git clone https://git-wip-us.apache.org/repos/asf/flex-blazeds.git blazeds cd blazeds

8. In the sdk folder, follow the README to set up environment variables, then run ant to build the sdk.
9. In the flexunit folder, run Run ant to build Falconflexunit.
10. Change to compiler.jx folder and run ant to build FalconJX.
11. In the falcon folder, run 'ant all' to build Falcon.
12. In the asjs folder, follow the README to download Google Closure Library, the linters and set up more environment variables, then run ant to build the FlexJS libraries.
13. In the asjs folder, change to examples/DataBindingTest and run ant there.  It should create bin-debug/DataBindingTest and bin/js-debug and bin/js-release folders containing a debug SWF, a debug HTML/JS/CSS version and a minified HTML/JS/CSS version respectively.  Open the .html file in those folders in your browser.

Using Eclipse

We are using Eclipse Helios for Java 1.6 compatibility because at least one of the jars (flex-oem-compiler) needs to be 1.6 compatible to work with Flash Builder.  There There are eclipse project files in the falcon repo. The run/debug configuration for building a FlexJS SWF in Eclipse needs the following settings (ApacheFlexJS is an overlaid Apache Flex 4.9 SDK/Users/aharui/git/flex/master/asjs is my asjs repo):

Program Arguments:

+flexlib="/Users/aharui/Work/ApacheFlexJSgit/flex/master/asjs/frameworks" -debug /Users/aharui/git/flex/master/asjs/examples/FlexJSTest_againDataBindingTest/src/FlexJSTest_again.mxml -library-path+=/Users/aharui/git/flex/master/asjs/frameworks/as/libs/ -compiler.mxml.children-as-dataDataBindingTest.mxml

VM Arguments:

-Xmx384m -Dsun.io.useCanonCaches=false -Dflexcompiler="/Users/aharui/git/flex/master/falcon/compiler" -Dflexlib="/Users/aharui/git/flex/Workmaster/ApacheFlexJSasjs/frameworks"

And the environment variables:
FLEX_HOME points to a Flex SDK and PLAYERGLOBAL_HOME are points to a playerglobal.swc as specified in the 

For cross-compiling with FalconJX the Program Arguments are:

+flexlib="/Users/aharui/Work/ApacheFlexJSgit/flex/master/asjs/frameworks" -debug /Users/aharui/git/flex/master/asjs/examples/FlexJSTest_againDataBindingTest/src/FlexJSTest_againDataBindingTest.mxml -js-output-type=FLEXJS -compiler.mxml.children-as-data -closure-lib=/ApplicationsUsers/GoogleClosureaharui/closure-library -sdk-js-lib=/Users/aharui/git/flex/master/asjs/frameworks/js/FlexJS/src

The Demo

MXML->SWF
The latest demo is http://people.apache.org/~aharui/FlexJS/DataBindingTestFlexJSStore. Run the bin-release/DataBindingTestFlexJSStore.html and right-click and choose "View Source" to see the source. You should be able to compile DataBindingTestFlexJSStore.mxml into a working SWF by using Falcon (and not the MXMLC compiler in Apache Flex 4.9). Find the Falcon mxmlc script in the Falcon folders under compiler/generated/dist/sdk/bin and run:

mxmlc -compiler.mxml.children-as-data -library-path+=<path to folder containing FlexJSUI.swc> DataBindingTest.mxml

You should be able to launch the SWF, see a simple application that allows you to choose a stock symbol and get information about itApache Flex SDK Installer to install a FlexJS release and using the bin/mxmlc on Mac or bin/mxmlc.bat on Windows to compile the source.  This is a port of the old FlexStore demo to FlexJS.  You can click on the Products button, hover over the people and see toolTips, drag them to the compare window and see drag-and-drop work and effects play.

MXML->JS
Now you should be able to create an HTML/JS equivalent by running FalconJX. In compiler.jxjs/bin is its mxmlc script. Use the arguments below:

mxmlc -js-output-type=FLEXJS -compiler.mxml.children-as-data -closure-lib=/Applications/GoogleClosure/library -sdk-js-lib=/Users/aharui/git/flex/master/asjs/frameworks/js/FlexJS/src -library-path+=<path to folder containing FlexJSUI.swc> DataBindingTest.mxml

and the /mxmlc on Mac or js/bin/mxmlc.bat on Windows.  The FalconJX compiler will generate an index.html file and a single minified .js file in bin/js-release and a debug version with many .js files in bin/js-debug.

If you then open the HTML file in a browser (I've used FireFox, Chrome and Safari on Mac and FireFox, Chrome and IE8 and IE9 on Windows) you will again see the button and text and clicking on the button will change the text people and tooltips and drag-and-drop and effects but hey! no Flash is involved. It is pure HTML/JS. Compare the SWF version and the HTML/JS version. They should look pretty similar. I don't know if we can make it exactly the same as it looks in Flash, but we should be able to get better visual match.

...