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 databinding.

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.

...

+flexlib="/Users/aharui/Work/ApacheFlexJS/frameworks" -debug /Users/aharui/git/flex/master/asjs/examples/FlexJSTest_again/src/FlexJSTest_again.mxml -js-output-type=FLEXJS -closure-lib=/Applications/GoogleClosure/library -sdk-js-lib=/Users/aharui/git/flex/master/asjs/frameworks/js/FlexJS/src

The Demo

MXML->SWF
In the ASJS folders under branches/develop/examples/FlexJSTest_again is a sample "hello world" application The latest demo is http://people.apache.org/~aharui/FlexJS/DataBindingTest. Run the bin-release/DataBindingTest.html and right-click and choose "View Source" to see the source. You should be able to compile FlexJSTestDataBindingTest.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> FlexJSTestDataBindingTest.mxml

You should be able to launch the SWF, see a button and some text, click the button and see the text changea simple application that allows you to choose a stock symbol and get information about it.

MXML->JS
Now you should be able to create an HTML/JS equivalent by running FalconJSFalconJX. In compiler.jx/bin is its mxmlc script. Use the exact same arguments as you did before, i.e.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> FlexJSTestDataBindingTest.mxml

and the FalconJX compiler will generate an index.html file and a single minified .js file.

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 but hey! no Flash is involved. It is pure HTML/JS. Right now the appearance of things is a bit different, but that is a To Do itemCompare 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.

...

Once you have the HTML and JS file(s), you can copy these into the www folder in a Cordova/PhoneGap application and publish it and see it work on a phone or desktop emulator. A To Do item is to automate this process.

Notes

...

.

...

Discussion

As you can hopefully see, the first building blocks are now in place such that the ASJS framework and FalconJX compiler can create applications using familiar tools, components, and workflows. You can use Adobe Flash Builder or other Flex-capable IDE to quickly build or prototype an application on Flash using structured-programming techniques afforded by ActionScript, then convert it to a HTML/JS application that can run on browsers or mobile devices without Flash.

...

• More components
• More advanced and complete CSS handling for default values
• More advanced Data-binding syntax support