BIT-101 [2003-2017]

This is a concept I’ve had for a while, and last week started to implement it. It wound up being orders of magnitude simpler than I imagined. The core part of it was done days ago. I cleaned things up more recently and finally checked it in and made some examples. As easy as Minimal Comps are to instantiate and set up, once you start getting into more complex layouts with lots of components, you can still wind up with a messy bunch of code. Well now you can create your layouts in an external xml file and leave your classes to handle the logic, as it should be.

The concept is to load an XML file, similar to MXML (you can call it MCML if you need a name for it), that defines what components are to be instantiated, and all their properties. In keeping with the minimal theme, it’s not as hard core as something like MXML. You won’t find data binding or in line ActionScript, or styles, etc. And ALL properties are expressed as attributes, not nested tags. But I am happy to say I worked out some pretty neat things that I originally thought would be more difficult.

One is that a component that has an id attribute will be mapped to a public variable in the parent container if such a variable exists, so you can code things around these created components. For example public var btn:PushButton; will map to < PushButton id=“btn”/>.

Second is that you can nest components for those components that can have children. Some components, such as Window, Panel, ScrollPane, expect children to be added to a content property, while others, such as VBox and HBox are added directly. These are both handled correctly. So you can write:

[code lang=“xml”]







[/code]

And finally, you can assign events with the syntax: event=“eventName:eventHandler”. For example:

[code lang=“xml”][/code]

This assumes that the main container class has a public method called onClick that has the signature compatible with the event that will be dispatched. If it does not, the event handler will not be assigned.

You instantiate the class like so:

[code lang=“as3″]var config:MinimalConfigurator = new MinimalConfigurator(this);[/code]

You pass in the DisplayObjectContainer that the components will be added to. This is also where it will look for public ids and event handlers.

Then you can parse the xml in one of 3 ways:

[code lang=“as3″]// 1. load the xml from a url:
config.loadXML(urlString);

// 2. parse a string containing xml:
config.parseXMLString(xmlString);

// 3. parse an xml object:
config.parseXML(xml);[/code]

You can listen for an Event.COMPLETE event which will be fired when the xml is parsed and all the components are instantiated. This is mostly useful when loading the xml from a file, as that is asynchronous, obviously, though the rest are synchronous.

Here, you can try it out for yourself. Write some xml in the text field below and press “Parse XML” and it should create the components above.

[kml_flashembed publishmethod=“static” fversion=“10.0.0″ movie=“http://www.bit-101.com/blog/wp-content/uploads/2011/01/MinimalConfig.swf” width=“500″ height=“500″ targetclass=“flashmovie”]

[/kml_flashembed]

Here are a few examples to try, you’ll get the idea soon enough.

One:
[code lang=“xml”]







[/code]

Two:
[code lang=“xml”]
















[/code]

Three:
[code lang=“xml”]









[/code]

Finally, here’s a code example that shows how to use ids and events:

[code lang=“as3″]package
{
import com.bit101.components.Component;
import com.bit101.components.Label;
import com.bit101.utils.MinimalConfigurator;

import flash.display.Sprite;
import flash.events.MouseEvent;

public class MinConfigTest extends Sprite
{
public var myLabel:Label;

public function MinConfigTest()
{
Component.initStage(stage);

var xml:XML =


;

var config:MinimalConfigurator = new MinimalConfigurator(this);
config.parseXML(xml);

}

public function onClick(event:MouseEvent):void
{
myLabel.text = “You did it”;
}
}
}[/code]

There’s a public var “myLabel” of type Label. This will be assigned the Label created in the first component tag, with the same id.

Then there’s a public method “onClick”. This is mapped to the button’s click event, so it will be called as an event handler when the button is clicked.

Pretty straightforward I think.

Obviously there are some more complex actions that will still need to be done with code, such as assigning list and combobox items, probably accordions, etc. But this should handle a good bunch of use cases.

The code is currently checked in and there’s a new SWC and zip available for download at the Google Code site. The class is com.bit101.utils.MinimalConfigurator. Enjoy.

Oh, and by the way, even if you aren’t interested in the new class, there are a few fixes in this build which might make it worth updating to anyway: Change Log.