What is xJSFL?

In a nutshell, xJSFL is a JSFL (JavaScript for Flash) framework designed to make it easier to extend Adobe Flash using the JSFL language.

The framework itself comprises a number of physical and conceptual parts that all work together to make it easier to develop and run anything from a simple script, to complex Modules that rely on a kit of parts, all working together.

What are the major elements of the framework?

JSFL code

• Core xjsfl object that provides core functionality and acts as backbone to the actual framework
• Functional libraries that provide common, housekeeping and utility functionality
• Object-oriented classes that abstract disparate functionality into object-oriented workflows

Structure

• A bootstrap process and class-loading system making it easy to initialize and run code
• An organised folder and file structure making it easy to manage file dependencies, such as:
• Assets
• Config
• Libraries
• UI
• A tiered system of top-level folders making it easy to extend core classes or distribute self-contained "Modules" of code

Software

• An external IDE, Komodo,  to organise, write and run JSFL code
• An SWF Snippets panel to organise and run finished code

Methodology

• Framework-focussed code, as opposed to one-off files and miscellaneous scripts
• Object-oriented code, such as Collections, as opposed to procedural code and or global functions
• Modern JavaScript practices such as as
• Functional "class"-based design
• JavaScript 1.5 getters and setters
• Inheritance

What does xJSFL code look like?

So this theory is all very well, but what does actual xJSFL look like?

Well, xJSFL is still JSFL; it's just much more object-oriented than JSFL. On top of this, the code (classes, libraries and functions) are written in a way that reflects how JSFL coders actually work with Flash. And  whenever you think about coding something, you know automatically that you have a whole host of functionality you can rely on, right out of the box, to make working with JSFL much more intuitive.

To illustrate this, let's start with a few examples:

Accessing the xJSFL core

The xJSFL core contains a lot of core functionality that the entire rest of the framework relies on, along with utility methods and helper functionality that you'll use quite a bit:

// get a reference to the current DOM
    $dom

// get a reference to the current DOM, but display a warning dialog if not open
    var dom = UI.dom;
    if(dom){ ... }

// get the keys of an object
    var keys = Utils.getKeys(element);

// parse a string into a real datatype
    var value = Utils.parseValue(str);

// test a function, outputting the error stack if it fails
    xjsfl.debug.func(func);

// load a file from the framework
    var text = load('as3/class.as', 'template');

// get the URI to an item in the framework
    var xml = xjsfl.file.find('images/flower.png', 'assets');

Using datatypes or utility classes

Some libraries extend existing classes (such as XML) or are smaller utility classes designed mainly to operate with other objects or functions

// find nodes within an XML object
    var nodes = xml.find('.someClass');

// use Timer object to benchmark something
    var timer = new Timer('Instance').start();
    test();
    timer.stop(true);
    fl.trace('The task took ' + timer.time);

// use a geom.Bounds object to create a new oval the same size as the selection
    var bounds = new Bounds($selection);
    $dom.addNewOval(bounds);

Utilising static libraries

Other libraries in the framework present their methods as static methods, so you operate directly on the class:

// inspect the first item in the document selection as a hierarchal structure
    Output.inspect($election[0]);

// inspect the properties of multiple items in table format
    Table.print($selection);

// run a callback function on all of an items elements, on every frame and layer
    Iterators.layers(true, null, null, function(element){ trace(element.name); })

Instantiating first-class xJSFL objects

Finally, many of the libraries in the framework function as instantiatable objects (classes) which can have properties set and methods called as objects in ActionScript 3 or any other language:

// create a file, save some data to it, and open it
    var file = new File('user/temp/hello world.txt', 'Hello ')
        .append('World!')
        .open();

// instantiate a Config object and save some settings
    var settings = new Config('settings/test')
        .set('some.setting.@id', id)
        .set('some.setting.@name', name);

// populate Template object and save as a text file
    var template = new Template('config/templates/as3/class.as')
        .set(values)
        .save('temp/MyClass.as');

// create a new Context object that can be used to navigate the timeline
    var context = Context.create();
    for each(var frame in context.keyframes)
    {
        context.setKeyframe(frame);
    }

// create a user interface and run a function using the results
    function accept(a, b)
    {
        alert('The product of the values is ' + a * b);
    }

    XUL.factory()
        .setTitle('Callbacks')
        .addPopupslider('Value 1', 'value1', Math.floor(Math.random() * 100))
        .addPopupslider('Value 2', 'value2', Math.floor(Math.random() * 100))
        .show(accept);

Next steps

• xJSFL environment