xJSFL overview

Categories:Framework basics

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
  • An external IDE, Komodo,  to organise, write and run JSFL code
  • An SWF Snippets panel to organise and run finished code

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

// 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

// 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();
    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);

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

// inspect the properties of multiple items in table format

// 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 ')

// 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')

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

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

        .addPopupslider('Value 1', 'value1', Math.floor(Math.random() * 100))
        .addPopupslider('Value 2', 'value2', Math.floor(Math.random() * 100))

Next steps

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>