Flex: Pump out DisplayObjects with the quickness.

Accomplishing a programming task with as few lines of code as possible is typically a good thing. At the same time, keeping the readability of your code at a reasonable level is also a good thing – especially if other developers will be maintaining your code in the future.

When writing custom components in Flex (and more or less writing anything to do with DisplayObjects in Flex) you find yourself writing a lot of the same, boring code. Basically, you instantiate a new DisplayObject, set some common properties on it, and then add it to a container. For example, take the following piece of code:

private function createUI():void
{
    var vbox:VBox = new VBox();
    vbox.percentWidth = 100;
    vbox.percentHeight = 100;
    vbox.name = 'My name is vbox';

    var txt:TextInput = new TextInput();
    txt.text = 'I am a TextInput';
    txt.setStyle('borderStyle', 'solid');
    txt.setStyle('borderThickness', 1);

    vbox.addChild(txt);
}

Pretty boring stuff, right?

Enter ctz.util.FlexUtils. With FlexUtils, you can cut down on writing all that boring code – like the snippet above. While there is nothing too complex or ground-breaking in this class, I find it to be quite helpful… and you may too:

package ctz.util
{
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.utils.*;

	import mx.collections.ArrayCollection;

	public final class FlexUtils
	{
		public function FlexUtils()
		{
			throw new Error('static methods only');
		}

		/**
		 * Create a Display Object and add some atts
		 */
		public static function createDisplayObject(typeName:Class, atts:Object=null):DisplayObject
		{
			try {
				var o:DisplayObject = new typeName();
				if (atts != null) {
					for (var k:String in atts) {
						if (o.hasOwnProperty(k)) {
							o[k] = atts[k];
						} else {
							typeName(o).setStyle(k, atts[k]);
						}
					}
				}
			} catch (e:Error) {
				trace('Error in FlexUtils.createDisplayObject: ' + e.message);
			}
			return o;
		}

		/**
		 * Given a root display object, get all children of the same type, recursively
		 */
		public static function getChildrenByType(collection:ArrayCollection, typeName:Class, rootObject:DisplayObjectContainer):void
		{
			var dobj:DisplayObject;
			for (var i:int = 0; i < rootObject.numChildren; i++) {
				dobj = rootObject.getChildAt(i);
				if (dobj is typeName)
					collection.addItem(dobj);
				if (dobj is DisplayObjectContainer)
					FlexUtils.getChildrenByType(collection, typeName, dobj as DisplayObjectContainer);
			}
		}

		public static function objDump(o:Object):String
		{
			var s:String = '';
			for (var key:String in o)
				s += key + ' => ' + o[key] + '\n';
			return s;
		}
	}
}

Note, I should probably update the two custom components I have published to use this class, but I really don’t have the time these days.

The createUI() method from the snippet above is magically transformed into the snippet below using FlexUtils.createDisplayObject()…

private function createUI():void
{
    var atts:Object = {percentWidth: 100, percentHeight: 100, name: 'My name is vbox'};
    var vbox:VBox = FlexUtils.createDisplayObject(VBox, atts) as VBox;

    atts = {text: 'I am a TextInput', borderStyle: 'solid', borderThickness: 1};
    var txt:TextInput = FlexUtils.createDisplayObject(TextInput, atts) as TextInput;

    vbox.addChild(txt);
}

I hope someone finds this remotely useful.

You can download the file here.