MinimalConfigurator

MinimalConfigurator is a class that allows you to create the layout of MinimalComps with an XML file. Here you can try it out.

Demo

Specifics

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 .

Second is that you can nest components for those components that can have children. So you can write:

<comps>
    <Panel>
        <VBox x="10" y="10">
            <RadioButton label="one"/>
            <RadioButton label="two"/>
            <RadioButton label="three"/>
        </VBox>
    </Panel>
</comps>

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

<PushButton label="Click me" event="click:onClick"/>

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:

var config:MinimalConfigurator = new MinimalConfigurator(this);

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:

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

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.

Examples

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

One:

<comps>
    <HBox x="10" y="10">
        <PushButton label="File" width="60"/>
        <PushButton label="Edit" width="60"/>
        <PushButton label="View" width="60"/>
        <PushButton label="Settings" width="60"/>
        <PushButton label="Help" width="60"/>
    </HBox>
</comps>

Two:

<comps>
    <Panel x="10" y="10" width="200" height="200">
        <HBox x="10" y="10">
            <VBox>
                <Label text="First Name:"/>
                <Label text="Last Name:"/>
                <Label text="Address:"/>
                <Label text="City:"/>
            </VBox>
            <VBox spacing="7">
                <InputText />
                <InputText />
                <InputText />
                <InputText />
            </VBox>
        </HBox>
    </Panel>
</comps>

Three:

<comps>
    <Calendar x="10" y="10"/>
    <HUISlider x="10" y="200" label="Amount"/>
    <HBox x="10" y="230">
        <Label text="Color:"/>
        <ColorChooser usePopup="true"/>
    </HBox>
    <IndicatorLight x="200" y="10" label="Warning" isLit="true"/>
    <IndicatorLight x="200" y="30" label="No Warning" isLit="false"/>
    <IndicatorLight x="200" y="50" label="Safe" color="0x00ff00" isLit="true"/>
</comps>

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

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 = <comps>
							<Label id="myLabel" x="10" y="10" text="waiting..."/>
							<PushButton x="10" y="40" label="click me" event="click:onClick"/>
						  </comps>;
			
			var config:MinimalConfigurator = new MinimalConfigurator(this);
			config.parseXML(xml);
			
		}
		
		public function onClick(event:MouseEvent):void
		{
			myLabel.text = "You did it";
		}
	}
}

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.

getCompById()

You can also find any component by its id. Here’s an example:

package
{
	import com.bit101.components.*;
	import com.bit101.utils.MinimalConfigurator;
	
	import flash.display.Sprite;
	import flash.events.Event;
	
	public class Playground extends Sprite
	{
		private var config:MinimalConfigurator;
		
		public function Playground()
		{
			Component.initStage(stage);

			var xml:XML = <comps>
							<PushButton id="foo" label="hello" event="click:onClick" x="10" y="10"/>
						  </comps>;
			
			config = new MinimalConfigurator(this);
			config.parseXML(xml);
		}		
		
		public function onClick(event:Event):void
		{
			var btn:PushButton = config.getCompById("foo") as PushButton;
			btn.label = "goodbye";
			trace(btn.name); // foo
		}
	}
}

Also, it maps the id to the component’s native name property, in case that might be useful.

All in all, this allows you to access multiple components without having to make a bunch of public variables.

Summary

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.

---