Custom MXML components and IMXMLObject

So we have already seen how to extend a Flex 2 component with MXML, as well as extending our derived component to form an extended version of that component. Say you don’t want to create an MXML component from an existing one but want to create an MXML component from scratch. Well that is where IMXMLObject comes in.

MXML doesn’t have a constructor so it is difficult to invoke a ground-up custom MXML component without some mechanism to act as the constructor. Step up to the plate IMXMLObject

IMXMLObject is an interface that allows MXML components to react to their invocation by the compiler. As MXML utilizes an events based model to trigger common events like preinitialize, initialize, and creationComplete we can use this model to notify the application of our components status. Unfortunately these events are all inherited from UIComponent so we don’t have access to them from our bespoke component. To resolve this we can implement IMXMLObject and access it’s initialized() method, as the example below demonstrates:

<?xml version="1.0" encoding="utf-8"?>
<mx:Object xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IMXMLObject">
 
	<mx:Script>
		<![CDATA[
			// We need to implement IMXMLObjects initialized() method and for this example we'll set the trace output of 'val'
			// to "IMXMLObject" :P.
			// REMEMBER this is an interface so the method MUST be public!
			public function initialized(document:Object, id:String):void
			{
				trace('output:: ' + val);
			}
		]]>
	</mx:Script>
	<mx:String id="val" />
</mx:Object>

To implement this in an MXML file you just nee to declare the namespace the component lives in and add it to your application MXML like any other custom component. An example of this is detailed below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:fgx="com.flashgen.components.flex.controls.*">
	<fgx:FGObject id="myObj" val="IMXMLObject" />
</mx:Application>

Now there are a couple of things to know about IMXMLObject and the Flex Builder 2 IDE. Firstly if you chose New > MXML Component from the project options you cannot create a custom component from either IMXMLObject or good old Object. I’m not sure if this an oversight or a bug. I’m going to report it as an inconsistency / bug. Secondly if you switch from code view to design view you will get an error from the design view. Along these lines:

An unknown item is declared as the root of your MXML document. Switch to source mode to correct it.

Now while this is correct it does imply that there is an error in your code somewhere. In actual fact it is probably down to the fact that the component cannot be resolved to UIComponent and therefore cannot create any visual elements (I’m just speculating here). Either way the error message needs looking at – as the file doesn’t contain any errors, it just doesn’t work with the design view…Again I’m going to mark this as a bug and see if I can get some Adobe feedback on this.

Catch my talk on Flex 2 and Actionscript 3.0 component development at Flash on the Beach
December 4th-6th 2006, Brighton, UK