ASUL is an XML based GUI framework. This means that it is possible to define GUI components / using an XML document. This allows a most flexible way of customizing GUI elements, as it is not necessary to hard-code anything (well, almost).

ASUL stands for ActionScript User Interface Language and is a very bad pun on XUL... furthermore it will never offer competing functionality, of course, as it'll always just do as much as it needs to. It was primarily developed for the rewrite of the MegaZine3 engine, but can be used in other contexts, too (as there are no direct dependencies, only on the utility classes).

The original reason for not using MXML was that Asul is not meant to be as complex. I.e. the basic intent was to rebuild the GUI components from 1.x in a more dynamic fashion, nothing more, nothing less. Asul did get a bit bigger than intended, but is still rather small. For more involved endeavors it is strongly recommended not to rely on ASUL, but MXML instead. A Flex bridge is planned, basically consisting of a plugin and a wrapper class, allowing easier interaction.

[edit] Components

ASUL consists of a set of given component types, such as simple containers, buttons and so on. Based on this set of components it is possible to build more complex structures by nesting elements. All objects allow child nodes / child components. Some components even require certain child objects for full functionality.

The basic components available can be looked up in this category.

Nested definitions are possible, i.e. it is possible to define child objects in the form of child nodes in the XML structure. E.g.:

<box>
    <box>
    </box>
</box>

will create a box within a box.

ASUL objects will behave like any other Sprite, with the difference that setting their width and height will only change the size of the background of the object (backgrounds may be fully transparent, though). In turn, child nodes will be asked to layout themselves, or be positioned by the container (see Layouting). Also, the returned width and height are the actual visible width and height of the element (read on).

Every ASUL object has two layers: one for the background, and one for the elements. The element layer is furthermore masked, so that children can never exceed the bounds of the parent (one can change this setting, though, but the default setting is children to be cut off).

[edit] Configuration

[edit] Attributes

All components must be set up using attributes in their XML definition. The available attributes vary by type, but there are some common attributes which are defined in the top level object. These include the behavior common to all objects, such as position, size and layouting, but also background and filters. For example, a Box might be set up like this:

<box width="100" height="100" background="color(0xFF0000)"/>

[edit] Children

Some components require child nodes to define parts of them for full or any functionality at all. These child nodes must be named as defined in the object's documentation. Such names follow the naming convention that they are encapsulated in $ characters, e.g. $foobar$.

Those child nodes will normally have to be of a specific kind, which will be described in the documentation of the object. For example, the ProgressBar object requires a $bar$ child of any type, and / or a $text$ child of type Text. A XML description may look like this:

<progressbar width="200" height="30" background="color(0x000000)" value="0.5">
    <box name="$bar$" anchors="5,5,pw-5,ph-5" background="color(0xFFFFFF)"/>
</progressbar>

[edit] Sandbox

This is a demonstration SWF which can be used to experiment with ASUL by creating elements for which the definition is entered into the textbox. Use the gray bar on top to drag the control window. The create button tries to instantiate the ASUL component defined in the text field and add it to the stage. Use the clear button to remove all created elements from the stage. The text area is not meant as an editor. Use an external text editor (e.g. Notepad++) to write your ASUL definition, then copy-paste it into the text area to see how it looks.

To start with, you can try copy-pasting the definition of the box and the progressbar above (you will have to move the control window to see the instances).

[edit] Download

The ASUL project is licensed under the MIT License, which means anyone can use it. It does not depend one any of the MegaZine3 classes, so it is completely independent of the main project. You will need a few classes from the other packages, though. Get the sources from the repository.