Component Templating

POSTED IN Flex | TAGS : children, component, custom, Flex, parent, templating September 1, 2009

Say you want dynamic children in your custom component, what should you do? Most people would say to add them using a ‘dataProvider’, which is sometimes the best way when it comes to simple data, but what about complex view that needs to be added and then reused differently throughout the system? That’s where component templating comes in handy.

This is an incomplete subject sort of speak. As of the SDK 3.3, you still need to implement it manually, but I believe in the near future they will be adding it as an option within components so it is done automatically.

Since it’s slightly awkward to explain the details without code, here’s a quick and dirty example.

CustomComponent.as

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
	backgroundColor="#333333"
	creationComplete="addChildren()">
	<mx:Script>
		<![CDATA[

			[DefaultProperty("content")]
			[ArrayElementType("mx.core.UIComponent")]
			private var _content:Array;

			[Bindable]
			private var _title:String;
			private var _created:Boolean = false;

			public function set title(value:String):void
			{
				this._title = value;
			}

			public function get title():String
			{
				return this._title;
			}

			public function set content(value:Array):void
			{
				this._content = value;
				this.addChildren();
			}

			public function get content():Array
			{
				return this._content;
			}

			private function addChildren():void
			{
				if(this.initialized)
				{
					container.removeAllChildren();

					for(var i:int = 0, len:int = this.content.length; i < len; i++)
					{
						container.addChild(this.content[i]);
					}
				}
			}
		]]>
	</mx:Script>
	<mx:Label text="{this._title}" color="#FFFFFF" fontWeight="bold" />
	<mx:Canvas id="container" width="100%" height="100%" backgroundColor="#FFFFFF" />
</mx:VBox>

Now, this is the template. It’s simple enough; we have our VBox as our parent tag that contains a Label and a Canvas that is going to contain our children. In this instance, we’re making window that has a ‘title’ property and a ‘content’ property. When we instantiate this class, we can then add children within our CustomComponent using the ‘content’ property and wrapping the children that we want in this window. Then the template takes the children, which is in an array, and adds them to the container that we want; in this case, the Canvas.

If we were to implement this component within our project, we would do something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:view="com.codemonkeycreative.view.*">
	<view:CustomComponent width="500" height="300" title="Custom Component">
		<view:content>
			<mx:Label text="content!"/>
		</view:content>
	</view:CustomComponent>
</mx:Application>

Try it out. You can put in any kind of content that you want and it will be displayed with a surrounding container. This trick is particularly useful for standardising a look for you application that is reusable throughout, like a popup window for example. This is a powerful method that can be used for both for visual and non-visual components, and in the end should save you a lot of time.