THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
- 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.
Set Up
- 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.
- Get the ASJS code from: https://svn.apache.org/repos/asf/flex/asjs/branches/develop/
- 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
- Get the Falcon code from https://svn.apache.org/repos/asf/flex/falcon/trunk/
- Run ant to build Falcon.
- Change to compiler.js folder and run ant to build FalconJS.
...
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:
| Code Block |
|---|
<!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="frameworks/FlexJSTestDeps.js/FlexJS/src/flash/events/Event.js"><"></script> <script type="text/javascript"> goog.require("FlexJSTest"); </script> <script type="text/javascript" src="> var app = new FlexJSTest(); </script> <title>FlexJSTest</title> </head> <body onload="app.start()"> </body> </html> |
where FlexJSTestDeps.js looks like this:
| Code Block |
|---|
// 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"></script> <script type="text/javascript" src="', ['org.apache.flex.FlexGlobal'], ['flash.events.Event']); goog.addDependency('../frameworks/js/FlexJS/src/FlexObject.js', ['org.apache.flex.FlexObject'], []); goog.addDependency('.js"></script> <script type="text/javascript" src="./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/utilsbinding/MXMLDataInterpreter.js"></script> <script type="text/javascript" src="ConstantBinding.js', ['org.apache.flex.binding.ConstantBinding'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/corebinding/UIBase.js"></script> <script type="text/javascript" src="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.js"></script> <script type="text/javascript" src="', 'org.apache.flex.utils.MXMLDataInterpreter']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/htmlcore/staticControls/Label.js"></script> <script type="text/javascript" src="IDocument.js', ['org.apache.flex.core.IDocument'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/bindingcore/SimpleBinding.js"></script> <script type="text/javascript" src="SimpleValuesImpl.js', ['org.apache.flex.core.SimpleValuesImpl'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/TextButton.js"></script> <script type="text/javascript" src="examples/FlexJSTest_again/MyInitialView.js"></script> <script type="text/javascript" src="/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/ValuesManager.js"></script> <script type="text/javascript" src="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/corehtml/staticControls/SimpleValuesImpl.js"></script> <script type="text/javascript" src="Label.js', ['org.apache.flex.html.staticControls.Label'], ['org.apache.flex.core.UIBase']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/corestaticControls/Application.js"></script> <script type="text/javascript" src="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/IDocument.js"></script> <script type="text/javascript" src="examples/FlexJSTest_again/MyController.js"></script> <script type="text/javascript" src=".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"></script> <script type="text/javascript" src="', ['org.apache.flex.html.staticControls.beads.TextFieldBead'], ['org.apache.flex.FlexObject']); goog.addDependency('../frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/TextButtonBead.js"></script> <script type="text/javascript" src="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"></script> <script type="text/javascript" src="examples/FlexJSTest_again/MySimpleValuesImpl.js"></script> <script type="text/javascript" src="', ['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/flashflex/eventsutils/MXMLDataInterpreter.js', ['org.apache.flex.utils.MXMLDataInterpreter'], ['org.apache.flex.FlexGlobal', 'org.apache.flex.FlexObject']); |
and was generated via Google Closure's depswriter.py:
| Code Block |
|---|
depswriter.py --root_with_prefix="examples/FlexJSTest_again ../EventDispatcher.js"></script> <script type="text/javascript" src="examples/FlexJSTest_again/MyModel.js">< --root_with_prefix="frameworks/js/FlexJS/src ../frameworks/js/FlexJS/src" >FlexJSTestDeps.js |
The directory structure looks like this:
| Code Block |
|---|
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);/script> <script type="text/javascript" src="examples/FlexJSTest_again/FlexJSTest.js"></script> <script type="text/javascript"> var app = new FlexJSTest(); </script> <title>FlexJSTest</title> </head> <body onload="app.start()"> </body> </html> |
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.
...