Question

I am trying to develop a custom component to act as a divider.

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Canvas id="left"/>
   <mx:Canvas id="right"/>
</mx:HBox>

I would like to use this component to assign objects like this:

<Divider>
    <left>
        <mx:label text="Stuff I want to put in the left canvas"/>
        <mx:label text="etc..."/>
        <mx:label text="etc..."/>
    </left>

    <right>
        <mx:label text="Stuff I want to put in the right canvas"/>
        <mx:label text="etc..."/>
        <mx:label text="etc..."/>
    </right >
</Divider>

Unfortunately, this does not work. I get a compiler error saying :
In initializer for ‘left’: multiple initializer values for target type mx.containers.Canvas.

What am I missing ?

Answer 1

I ended up finding the solution reading the following from the Adobe website.

Using the technique described as template component, you can specify an array of a certain type of objects. I ended up rewriting my component as follow:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
    <mx:Script>
    <![CDATA[

       [ArrayElementType("mx.core.UIComponent")]
       public var right:Array;

       [ArrayElementType("mx.core.UIComponent")]
       public var left:Array;

       protected function init():void
       {
           var i:int;

           for (i = 0; i < left.length; i++)
               leftCanvas.addChild(left[i]);

           for (i = 0; i < right.length; i++)
               rightCanvas.addChild(right[i]);            
       }         

    ]]>
    </mx:Script>

    <mx:Canvas id="rightCanvas"/>
    <mx:Canvas id="leftCanvas"/>
</mx:HBox>

It now works as intended.