DisplayObjectContainer into Flex component… how?

Question

I'll re-write this question to be clearer.

I'm trying to get a class file from Flash into Builder.

Everything in that class sits inside a Sprite called mainContainer. Now I'm trying to get that `mainContainer' which hold the graphics for the class into a Flex Application.

This is proving to be a problem as their are many various ways of doing it (it seems going by numerous Google searches).

First off I declare an MXML Canvas with an Image inside it (as I read would work):

<mx:Canvas x="268" y="10" width="756" height="680" id="canvas">
    <mx:Image id="spriteLayer" x="268" y="0" width="756" height="700" scaleContent="false" autoLoad="true">

    </mx:Image>
</mx:Canvas>}

Ok, my plan was then to pass the Image reference her of spriteLayer to the class I'm trying to run:

            import includes.Spirograph;
            public var spiro:Spirograph = new Spirograph(spriteLayer);

Unfortunately it only ever passes null into the Spirograph class:

        function Spirograph(canvasImage:Image):void
        {   
            this.canvas = canvasImage;
            mainContainer.graphics.beginFill(0xFFFFFF);
            mainContainer.graphics.drawRect(290, 0, 670, 700);
            mainContainer.graphics.endFill();

            ui.addChild(mainContainer);
            canvas.addChild(ui);
}

Not sure what to do.

Many thanks.

apologies for bad formatting, seems the SO code highlighting isn't working just now. — Alex
@AlexWwhen formatting code use the 'curly bracket' symbol; not the 'quote' symbol. I reformatted the code in your post. I'm not sure if it was a temporary issue if you were unaware; but nevertheless it appears we're good now. — JeffryHouser
I'm unclear what the problem is. Your question seems to mix up MXML with ACtionScript as if the lines were running clearly in sync; when that is not possible. If you could provide some more context or in depth code, it may help. — JeffryHouser

JeffryHouser JeffryHouser · Accepted Answer · 2011-04-30T03:26:50

I think you need to read up on the Flex Component LifeCycle. Most likely the spriteLayer component is not yet created or initialized when the new Spirograph(spriteLayer) code called. When is that code called?

The Flex Component LifeCycle is a series of methods and events that create the Flex UI. You can override these methods, or listen to these events to 'do stuff'. The canvas and spritelayer will not be created until after the createChildren method is called; and default property values are defined before that happens.

You could override createChildren() and do the initialization there:

override protected function createChildren():void{
 super.createChildren()
 spiro  = new Spirograph(spriteLayer);
}

or you could listen to the initialize event and set the default in there:

<mx:MyParentComponent initialize="onInitialize()">
 <fx:Script>
   protected function onInitialize():void{
    spiro  = new Spirograph(spriteLayer);
  }
 </fx:Script>
</mx:MyParentComponent>

As another poster commented, you could also do the initialization (like above) in the creationComplete event, although I would personally recommend against doing that. The creationComplete event dispatches at the very end of the lifecycle; and most likely the changes you're doing will cause a renderer event to "restart", forcing most of the lifecycle to parse through again; the component would be resized (measure()) and elements repositioned (updateDisplayList()). Setting default values as early in the lifecycle as possible is recommended.

DisplayObjectContainer into Flex component… how?

3 Answers