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:
mxmlc -compiler.mxml.children-as-data -library-path+=<path to folder containing FlexJSUI.swc> FlexJSTest.mxml |
You should be able to launch the SWF, see a button and some text, click the button and see the text change.
MXML->JS
Now you should be able to create an HTML/JS equivalent by running FalconJS. In compiler.js/bin is its mxmlc script. Use the exact same arguments as you did before, i.e.
mxmlc -compiler.mxml.children-as-data -library-path+=<path to folder containing FlexJSUI.swc> FlexJSTest.mxml |
and the FalconJS compiler will (currently) generate a bunch of .js files, one for each .mxml and .as file. These files go along with the Google Closure Library's base.js and an HTML file to create a rough equivalent to the SWF. Someday, FalconJS will output a single minified .js file instead of all of these files. But for now, you can use the Google Closure tools and scripts to combine all of the .js files into a single minified .js file. In the ASJS folders under branches/develop/publisher is an attempt to create a build script that does all of these things. If you can't get it all to work, or you want to see the code un-minified, you can create an html file that looks something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="goog/base.js"></script> <script type="text/javascript" src="FlexJSTestDeps.js"></script> <script type="text/javascript"> goog.require("FlexJSTest"); </script> <script type="text/javascript"> var app = new FlexJSTest(); </script> <title>FlexJSTest</title> </head> <body onload="app.start()"> </body> </html> |
where FlexJSTestDeps.js looks like this:
// This file was autogenerated by /Applications/GoogleClosure/builder/depswriter.py. // Please do not edit. goog.addDependency('../examples/FlexJSTest_again/FlexJSTest.js', ['FlexJSTest'], ['MyInitialView', 'MySimpleValuesImpl', 'StockDataJSONItemConverter', 'controllers.MyController', 'models.MyModel', 'org.apache.flex.core.Application', 'org.apache.flex.net.HTTPService', 'org.apache.flex.net.JSONInputParser', 'org.apache.flex.net.dataConverters.LazyCollection']); goog.addDependency('../examples/FlexJSTest_again/MyController.js', ['controllers.MyController'], ['MyInitialView', 'org.apache.flex.core.IDocument']); goog.addDependency('../examples/FlexJSTest_again/MyInitialView.js', ['MyInitialView'], ['org.apache.flex.binding.ConstantBinding', 'org.apache.flex.binding.SimpleBinding', 'org.apache.flex.core.ViewBase', 'org.apache.flex.html.staticControls.Label', 'org.apache.flex.html.staticControls.List', 'org.apache.flex.html.staticControls.TextButton']); goog.addDependency('../examples/FlexJSTest_again/MyModel.js', ['models.MyModel'], ['flash.events.Event', 'flash.events.EventDispatcher']); goog.addDependency('../examples/FlexJSTest_again/MySimpleValuesImpl.js', ['MySimpleValuesImpl'], ['org.apache.flex.core.SimpleValuesImpl', 'org.apache.flex.html.staticControls.beads.TextButtonBead', 'org.apache.flex.html.staticControls.beads.TextFieldBead', 'org.apache.flex.html.staticControls.beads.models.ArraySelectionModel', 'org.apache.flex.html.staticControls.beads.models.TextModel']); goog.addDependency('../examples/FlexJSTest_again/StockDataJSONItemConverter.js', ['StockDataJSONItemConverter'], ['org.apache.flex.net.JSONItemConverter']); goog.addDependency('../frameworks/js/FlexJS/src/FlexGlobal.js', ['org.apache.flex.FlexGlobal'], ['flash.events.Event']); goog.addDependency('../frameworks/js/FlexJS/src/FlexObject.js', ['org.apache.flex.FlexObject'], []); goog.addDependency('../frameworks/js/FlexJS/src/flash/events/Event.js', ['flash.events.Event'], []); goog.addDependency('../frameworks/js/FlexJS/src/flash/events/EventDispatcher.js', ['flash.events.EventDispatcher'], ['org.apache.flex.FlexGlobal']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/binding/ConstantBinding.js', ['org.apache.flex.binding.ConstantBinding'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/binding/SimpleBinding.js', ['org.apache.flex.binding.SimpleBinding'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/core/Application.js', ['org.apache.flex.core.Application'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject', 'org.apache.flex.core.SimpleValuesImpl', 'org.apache.flex.core.ValuesManager', 'org.apache.flex.core.ViewBase', 'org.apache.flex.utils.MXMLDataInterpreter']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/core/IDocument.js', ['org.apache.flex.core.IDocument'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/core/SimpleValuesImpl.js', ['org.apache.flex.core.SimpleValuesImpl'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/core/UIBase.js', ['org.apache.flex.core.UIBase'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/core/ValuesManager.js', ['org.apache.flex.core.ValuesManager'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/core/ViewBase.js', ['org.apache.flex.core.ViewBase'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.core.UIBase', 'org.apache.flex.utils.MXMLDataInterpreter']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Label.js', ['org.apache.flex.html.staticControls.Label'], ['org.apache.flex.core.UIBase']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/List.js', ['org.apache.flex.html.staticControls.List'], ['org.apache.flex.core.UIBase']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/TextButton.js', ['org.apache.flex.html.staticControls.TextButton'], ['org.apache.flex.core.UIBase']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/TextButtonBead.js', ['org.apache.flex.html.staticControls.beads.TextButtonBead'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/TextFieldBead.js', ['org.apache.flex.html.staticControls.beads.TextFieldBead'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/ArraySelectionModel.js', ['org.apache.flex.html.staticControls.beads.models.ArraySelectionModel'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/models/TextModel.js', ['org.apache.flex.html.staticControls.beads.models.TextModel'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/net/HTTPService.js', ['org.apache.flex.net.HTTPService'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/net/JSONInputParser.js', ['org.apache.flex.net.JSONInputParser'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/net/JSONItemConverter.js', ['org.apache.flex.net.JSONItemConverter'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/net/dataConverters/LazyCollection.js', ['org.apache.flex.net.dataConverters.LazyCollection'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/utils/MXMLDataInterpreter.js', ['org.apache.flex.utils.MXMLDataInterpreter'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); |
and was generated via Google Closure's depswriter.py:
depswriter.py --root_with_prefix="examples/FlexJSTest_again ../examples/FlexJSTest_again" --root_with_prefix="frameworks/js/FlexJS/src ../frameworks/js/FlexJS/src" >FlexJSTestDeps.js |
The directory structure looks like this:
index.html (contains the html described above) FlexJSTestDeps.js examples (the examples folder from asjs/branches/develop) goog (the goog folder from Google Closure) third_party (the third_party folder from Google Closure) frameworks (the frameworks folder from asjs/branches/develop); |
If you then open the HTML file in a browser (I've only been using FireFox on Mac) 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.
MXML->Cordova/PhoneGap
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.
As you can hopefully see, the first building blocks are now in place such that the ASJS framework and FalconJS 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.