I only have a few more classes to finish writing before I release the framework, so I thought I would write a post to quickly highlight some of the cool things you can look forward to.

Overview

xJSFL notes

• The xJSFL core and libraries are around 9,000 lines of JavaScript, similar to jQuery which is around 8600. The Snippets module on top of that is about 1,300 lines
• The xJSFL ActionScript source (UI and framework code) is about 10,000 lines of ActionScript 3

Installation and setup

• Install to any folder
• 1-click installation
• Easy initialisation of all classes and functions via xjsfl.init(this);

Usage

• Snippets panel to mange and run scripts
• Console panel to quickly test JSFL code

Coding

• Use Komodo IDE to manage projects and write larger JSFL scripts
• core, user and module folders keeps code separate
• assets, data, settings, templates, libraries, and scripts folders keeps things organised

API

xJSFL Core

• settings - access to common settings such as folders and paths
• utils - utility methods such as applyEach(), makeURI(), getValues(), unique(), parseValue()
• output - such as warn(), output(), and error()
• iterators - basic iteration for documents, items, layers, keyframes and elements
• file - file finding and loading
• Centralised management of all classes and modules

Stage / Library

• Context - convenient access to the major DOM elements (DOM, timeline, layers, frames)
• Collections - powerful Array-like classes for manipulating authoring-time elements, including:
  • ItemCollection - for Library items
  • ElementCollection - for Stage elements
  • Soon to come will be Document, Layer and Frame Collections.
• Library ($$) - CSS-style selection of items in the Libray panel
• Stage ($) - CSS-style selection of layers, frames and elements
• Superdoc - logical routing to the expansive Document class' methods

User Interaction

• XUL - OO library for creating and managing XUL dialogs
• Module - Base class used to create and manage xJSFL Modules (collections of files)

File / Data

• Config - an object-oriented wrapper for easily saving and loading settings
• Events - handle JSAPI events like in AS3, including Event objects
• FileSystem - object-oriented File and Folder classes
• FLfile - adds FLfile platform-to-URI conversion compatibility for pre-CS4 versions of Flash
• JSFL - serialises values to XML for type-safe communication with Flash panels
• JSON - Standard JSON library
• XML - Some additional E4X methods to overcome some JSFL-specific bugs

Text I/O

• Output - logging, introspection, and a variety of printing and formatting methods
• Source - utility methods for developers to parse source code
• Table - outputs 2D Array/Object arrays to easily-readable ASCII tables
• Template - loading and population of templates, including nesting & auto-indentation
• Validation - validate user or other input

Utility

• Class - a base class to create new classes and inherit prototype chains
• Data - a collection of methods for manipulating data, including hierarchies
• Geom - Geometric classes including Bounds
• Timer - simple timer class, used for benchmarking, etc
• Utils - Array, Object, String, Number and Color methods

Cool code examples

Smooth all bitmaps in the library:

$$(':bitmap').attr('allowSmoothing', true);

Rename any exported items after their classes, and select them:

function rename(name, index, item){
    return item.linkageClassName.split('.').pop();
}
$$(':exported').rename(rename).select();

Organise library items into respective folders (assets/movie clip, assets/graphic, etc):

[':bitmap',':graphic',':button',':movieclip'].forEach
(
    function(e,i){ $$(e).move('assets/' + e + 's'); }
);

Synchronize the animation of any tweens in your entire .fla (not yet committed in the repo):

function syncAnimation(timeline, index){
    $frames(':animated', timeline).attr('motionTweenSync', true);
}
$$(':animated').exec(syncAnimation);

Rename, randomise, and select all Leaf items on the current frame (also, noy yet committed in the repo):

$(':Leaf')
	.rename('leaf_###')
	.randomize
	(
		{
			position:['20', '20'],
			width:[20, 100, 20],
			rotation:360,
			tint:{from:'green', to:'yellow', mode:'hsv'}
		}
	)
	.select();

Inspect any object's properties, in this case, a library Item:

var item = $$('Movieclip 1').get(0);
Output.inspect(item);

/*
Inspect: SymbolItem (objects:8, values:55, time:0.0 seconds)
--------------------------------------------------------------------------
object => SymbolItem
	[timeline] => Timeline
		 name: "MovieClip 2"
		[layers] => Array
			[0] => Layer
				 name: "Layer 1"
				 layerType: "normal"
				 visible: true
				 locked: false
				 frameCount: 1
				[frames] => Array
					[0] => Frame
						 name: ""
						 actionScript: ""
						[elements] => Array
						 startFrame: 0
						 duration: 1
						 soundLibraryItem: null
						 soundEffect: "none"
						 soundName: ""
						 soundSync: "stream"
						 soundLoopMode: "repeat"
						 soundLoop: 1
						 tweenType: "none"
						 tweenEasing: 0
						 motionTweenScale: true
						 motionTweenRotate: "auto"
						 motionTweenRotateTimes: 0
						 motionTweenOrientToPath: false
						 motionTweenSync: false
						 motionTweenSnap: false
						 shapeTweenBlend: "distributive"
						 labelType: "none"
						 hasCustomEase: false
						 useSingleEaseCurve: true
				 color: "#4fff4f"
				 height: 100
				 outline: false
				 parentLayer: null
		 frameCount: 1
		 currentFrame: 0
		 layerCount: 1
		 currentLayer: 0
		[bindings] => Array
	 symbolType: "movie clip"
	 sourceFilePath: ""
	 sourceLibraryName: undefined
	 sourceAutoUpdate: undefined
	 scalingGrid: true
	[scalingGridRect] => Object
		 left: -12.749
		 top: -12.749
		 right: 12.75
		 bottom: 12.75
	 itemType: "movie clip"
	 name: "Folder 1/MovieClip 2"
	 linkageExportForAS: true
	 linkageExportForRS: false
	 linkageImportForRS: undefined
	 linkageExportInFirstFrame: true
	 linkageIdentifier: ""
	 linkageClassName: "display.MyClass"
	 linkageBaseClass: ""
	 linkageURL: undefined
*/

Inspect the properties of several library items in table format:

var elements = $$(':movieclip').sort().elements;
Table.print(elements, 'symbolType,name,linkageClassName,linkageBaseClass');

/*
+------------+----------------------+-------------------+----------------------+
| symbolType | name                 | linkageClassName  | linkageBaseClass     |
+------------+----------------------+-------------------+----------------------+
| movie clip | Folder 1/MovieClip 1 | display.YourClass |                      |
| movie clip | Folder 1/MovieClip 2 | display.MyClass   |                      |
| movie clip | Folder 1/Sprite 1    | Sprite1           | flash.display.Sprite |
| movie clip | Folder 3/Sprite 2    | Sprite2           | flash.display.Sprite |
| movie clip | MovieClip 3          |                   |                      |
+------------+----------------------+-------------------+----------------------+
*/

Read a file's contents:

var text = new File('assets/text.txt').contents;

Populate a template and output it, retaining indentation {>...}, rendering nested templates {...}, and removing optional non-populated variables {...?}:

// input: object.txt
/*
  {doc?}
  {name} =
  {
  	  {>content}
  }
*/

var methodTemplate = new Template('method.txt', methodData);
var objectData     = {name:'TestClass', content:methodTemplate};
var objectTemplate = new Template('object.txt', objectData);
objectTemplate.render(true);

// output
/*
TestClass =
{
	set color:function(color)
	{
		document.setFillColor(color);
	}
}
*/

Count the total lines of code for all files in a folder (and subfolders):

var lines  = 0;
var folder = new Folder(xjsfl.utils.makeURI('core'));
countLines = function(file){
    lines += file.contents.split('\n').length;
};

Data.recurseFolder(folder, countLines);

// 8522

Output the hierarchical structure of a folder:

Output.folder('core', true); // relative paths are relative to the xJSFL root

/*
/core
	/docs
	/jsfl
		/bootstrap.jsfl
		/install
			/External Libraries
				/xjsfl.dll
				/xjsfl
			/install.jsfl
			/xJSFL Loader.jsfl
			/xJSFL Splash.txt
			/xJSFL.ini
		/libraries
			/class.jsfl
			/collections.jsfl
			/config.jsfl
			/data.jsfl
			/events.jsfl
			/filesystem.jsfl
			/flfile.jsfl
			/jsfl.jsfl
			/library.jsfl
			/module.jsfl
			/output.jsfl
			/simple-template.jsfl
			/stage.jsfl
			/superdoc.jsfl
			/table.jsfl
			/template.jsfl
			/timer.jsfl
			/xjsfl.jsfl
		/run
			/exec.jsfl
			/file.jsfl
			/lib.jsfl
*/

Test a function and output the error stack if it fails:

function demo()
{
	var settings = XUL.create('xcolorchip:Color,numeric:Frame rate,Title');
}

xjsfl.utils.test(demo);

/*
Error: XUL.add(): Undefined control type "xcolorchip"
----------------------------------------------------------------------------------------------------

	0 > ("xcolorchip:Color,numeric:Frame rate,Title")

		line: 1088
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

	1 > XUL("xcolorchip:Color,numeric:Frame rate,Title")

		line: 96
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

	2 > ("xcolorchip:Color,numeric:Frame rate,Title")

		line: 239
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

	3 > demo()

		line: 1429
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/

	4 > (demo)

		line: 684
		file: xjsfl.jsfl
		path: xJSFL/core/jsfl/libraries/

	5 >

		line: 1497
		file: xul.jsfl
		path: xJSFL/core/jsfl/libraries/
*/

Anyway, you get the general idea.

Once you get your hands on Komodo and have a look at the source code, you'll be into writing proper classes as well.

Laters,

Dave