Program doesn't respond when I add canvas on enterFrame function

Question

Hello all!

I have been making a simple aplication and i have a problem i cannot find the solution (neither why it is happening)

The thing i want to do is to dynamically add a canvas containing a button to the application and then i want the canvas to be moved from the left side of screen to the right.

So i have made the following code

  <?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
   creationComplete="init()">

<mx:Script>
 <![CDATA[
  import mx.containers.Canvas;
  import mx.controls.Button;

  var ccanvas:Canvas = new Canvas();
  var canvasButton:Button = new Button();

  public function init():void{
   canvasButton.label="canvas Button";
   ccanvas.x=100;
   ccanvas.y=200;
   ccanvas.addChild(canvasButton);
   addChild(ccanvas);

   addEventListener(Event.ENTER_FRAME, onEnterFrame);

  }

  public function onEnterFrame(event:Event):void{
   ccanvas.x+=1;
  }

 ]]>
</mx:Script>


 </mx:Application>

And it works just fine. The next step is instead of using the Canvas i use a custom canvas .. here is the CustomCanvas.mxml component

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
     <mx:Button label="ccccButton" />
</mx:Canvas>

then i change the following code line

  var ccanvas:Canvas = new Canvas()  

      to

  var ccanvas:CustomCanvas = new CustomCanvas();

the result is that there is no canvas displayed at the screen...the program doesn't do anything....

the most weird thing is that if i do not have an onEnterFrame function and i just add my custom canvas to the init() method it is been displayed properly. Even if i have an onEnterFrame but without changing the customCanvas's x value it is been displayed properly. But the moment i write in the

onEnterFunction the code ccanvas.x +=1 the program doesnt display anything.... But if i do that with the original Canvas object it is all ok,,,

What is happening here? how i can i make a custom canvas object and then be able to move it in a onEnterFrame method?

Thank you!!!!!!

Answer 1

Nice little problem. It looks like the component-creation process is being short-circuited somehow, although to be honest, I'm not exactly sure how.

Nevertheless, waiting for the CustomCanvas to dispatch a creationComplete event before attempting to act on its display properties (which is good practice, anyway) fixes the problem. See below, modified to add the listener for creationComplete, and waiting until that listener gets called to add the enterFramelistener:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

 <mx:Script>
  <![CDATA[

   import mx.events.FlexEvent;
   import mx.containers.Canvas;
   import mx.controls.Button;

   private var ccanvas:CustomCanvas  = new CustomCanvas();
   private var canvasButton:Button = new Button();

   public function init():void
   {
    canvasButton.label="canvas Button";
    ccanvas.x = 100;
    ccanvas.y = 200;
    ccanvas.addChild(canvasButton);

    ccanvas.addEventListener(FlexEvent.CREATION_COMPLETE, ccanvas_creationComplete);
    addChild(ccanvas);
   }

   private function ccanvas_creationComplete(event:FlexEvent):void
   {
    addEventListener(Event.ENTER_FRAME, onEnterFrame);
   }

   public function onEnterFrame(event:Event):void
   {
    ccanvas.x += 1;
   }

  ]]>
 </mx:Script>

 </mx:Application>

Truth be told, though, I'm not sure what the difference is between an mx:Canvas and your derived CustomCanvas in this case, in terms of the timing; maybe someone could chime in on that one. But hopefully the solution will prove useful for ya, and again, it's good practice to Flex do its component-lifecycle thing before attempting to work with its components.

Hope it helps!