Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Get 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.
  2. Get the ASJS code from : Apache Git via
    Code Block
    
    git clone https://
    svn
    git-wip-us.apache.org/repos/asf/flex
    /asjs/branches/develop/Image Removed
    -asjs asjs
    cd asjs
    git checkout develop
    
  3. 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
  4. Get the Falcon code from Apache Git at
    Code Block
    
    git clone https://
    svn
    git-wip-us.apache.org/repos/asf/flex
    /falcon/trunk/Image Removed
    -falcon.git falcon
    cd falcon
    git checkout develop
    
  5. Run ant to build Falcon.
  6. Change to compiler.js jx folder and run ant to build FalconJSFalconJX.

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):

Program Arguments:

Code Block

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

VM Arguments:

Code Block

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

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

For cross-compiling with FalconJX the Program Arguments are:
+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. You should be able to compile FlexJSTest.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:

...

MXML->JS
Now you should be able to create an HTML/JS equivalent by running FalconJS. In compiler.jsjx/bin is its mxmlc script. Use the exact same arguments as you did before, i.e.

Code Block
mxmlc -compiler.mxml.children-as-data -js-output-type=FLEXJS -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> FlexJSTest.mxml

and the FalconJS FalconJX compiler will generate an example 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 item. 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.

Debugging

If you set the -debug flag on the compiler, instead of a single minified .js file you will get one .js file for each of your MXML or AS files, and the compiler will output a XXXDeps.js file and html file. See the console output when you compile. To get it to run, you will need to copy in code from various places. The desired directory structure looks like this:

...

.

...

Notes

  • The code does not currently support the classic {} data-binding syntax. Instead, you can install a "beads" plug-in to handle simple binding scenarios. See the use of SimpleBinding in MyInitialView.mxml.

...

As you can hopefully see, the first building blocks are now in place such that the ASJS framework and FalconJS 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.

Next Steps

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