FalconJX leverages a lot of code from Falcon to generate the AST.  Once the AST is created, the tree is walked via an ASBlockWalker or MXMLBlockWalker.  The walkers call Emitters.  FalconJX could have different emitters generate something other than HTML/JS/CSS.  Most folks are using the JSFlexJSEmitter and MXMLFlexJSEmitter classes to output JS.  MXMLFlexJSEmitter calls a JSFlexJSEmitter for Script blocks in MXML.

The JSFlexJSEmitter calls several sub-Emitters for various nodes.  There is an IdentifierEmitter for simple identifiers, a MemberAccessEmitter for member access expression nodes (someObject.someProp), a BinaryOperatorEmitter for binary operator nodes (a = b, a.b = c.d, a + b, etc) and lots more.  The sub-Emitters output JS to a stream or a StringBuilder for use in other places.

After each MXML and AS CompilationUnit has completed the AST walk, the output folder contains a .JS file for every MXML and AS file.  For COMPJSC, FalconJX is done.  For MXMLJSC, if no errors have been reported, the MXMLFlexJSPublisher gets called.  It creates the output folder(s), copies files from Google Closure Library into the output folder (to make relative paths work across disk drives), then adds a final goog.exportSymbol for the main class to the main class's .js file, and also adds encoded CSS information to the main class .js file as well.

The MXMLFlexJSPublisher then calls GoogDepsWriter to compute the actual set of JS files that are needed by the cross-compiled JS files.  It does this by chasing down the goog.requires in each .js file.  It looks inside SWCs for .js files as well as in folders specified by the -sdk-js-lib compiler option.  These JS files are copied into the output folder.  If the -remove circulars option is used, some goog.requires are removed from the copied .JS files in order to eliminate circularities.

The MXMLFlexJSPublisher then copies .gif, .jpg, .png and .json files from the source folder to the output folder.   Next, the MXMLFlexJSPublisher writes out an HTML file to the output folder that brings in the .js files.  It also outputs a .CSS file based on CSS used in the application.   Finally, if -debug=false, the MXMLFlexJSPublisher calls the Google Closure Compiler to generate the minified/optimized version.

The output HTML can be modified by adding <inject_html> tags to the ASDoc for the constructor of a class.  For example, below is the constructor for the JQuery Application class.

public class Application extends org.apache.flex.core.Application implements IFlexInfo
 {
 /**
 * FalconJX will inject html into the index.html file. Surround with
 * "inject_html" tag as follows:
 *
 * <inject_html>
 * <link rel="stylesheet"
 * href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
 * <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 * <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
 * </inject_html>
 */
 public function Application()
 {

 

 
  • No labels