Moving children of a container (defined in MXML) inside an "inner container"

Question

I'm currently working on a custom component which extends Canvas (let's call it SuperCanvas) ; it's basically a container that let you zoom & pan its contents.

It would be too long to explain why, but I can't use scrollRect, so I was forced to declare a Canvas object (called innerCanvas)... inside my SuperCanvas (I know, not very nice =/)

I would like to know if there's a proper way to "redirect" the creation of my component's children in this canvas.

Let me explain:

<comp:SuperCanvas id="superCanvas">
   <mx:Image id="img" source="image.jpg"/>
   <mx:Label id="lbl" text="Sample"/>
</comp:SuperCanvas>

With this, img and lbl are added to my SuperCanvas. I want them to be added to superCanvas.innerCanvas instead.

I can't override the add/removeChild methods to do the "redirection", since I won't be able to add this innerCanvas...

So I tried this :

<comp:SuperCanvas>
   <comp:innerCanvas>
      <mx:Image id="img" source="image.jpg"/>
      <mx:Label id="lbl" text="Sample"/>
   </comp:innerCanvas>
</comp:SuperCanvas>

But Flex complains that "In initializer for 'contents': type mx.controls.Image is not assignable to target type mx.containers.Canvas". I read I could use an array of UIComponents with a [ArrayElementType] metatag, and manually instanciate objects, but I I'm looking for a simplier (and probably proper) solution.

I also saw the childDescriptor property (which contains descriptions for every child defined in the MXML file), but it's read-only, so I can't pass it to my innerCanvas.

If I'm not clear enough, do not hesitate to ask me precisions, english isn't my native tongue, so it's pretty hard to explain things well =/

Any help would be greatly appreciated, I'm totally stuck.

---

EDIT: My SuperCanvas class (minus the imports and the zoom & pan logic that doesn't matter here) :

public class SuperCanvas extends Canvas
{
    public innerCanvas:Canvas = new Canvas();

    public function SuperCanvas()
    {
      super();
      addChild( innerCanvas );
    }
}

Answer 1

This blog entry details an approach where you add components to the SuperCanvas, but then move them all to the inner canvas after creation. So that's one workaround.

Alternatively, you could set the DefaultProperty to be a dataProvider-type object, and then add things to the inner canvas from there, rather than making them children of the SuperCanvas first.

Addition:

I ran across this blog entry which, among other things, talks about the Panel component and how it handles this problem. You might look at it and at the Panel source code.