simple Code only works inside init() function not inside class

[Daedalus]

I have some code that simply creates a canvas object and an image object, loads a picture into the image and puts the image inside the canvas while setting the horizontalCenter and backgroundColor styles, and setting the width of the canvas to 95%.

This should produce an orange rectange that is positioned in the middle of the screen with 95% width (meaning it is sized to most of the browser width) and the image located in the top left corner of the canvas.

When this code excecutes inside a init() function all is fine, however when I run it inside a class it does not work. The styles do not seem to have any affect and including the line that sets the percentage width results in nothing being displayed.

code below works fine

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script><![CDATA[
import mx.controls.Image;
import mx.containers.Canvas;
private function init():void {
var can:Canvas = new Canvas();
var titleImg:Image = new Image();
titleImg.load("graph.gif");

can.setStyle("horizontalCenter", 0);
can.setStyle("backgroundColor", "#FF8000");
can.percentWidth = 95;
can.addChild(titleImg);
addChild(can);
}
]]></mx:Script>
</mx:Application>


Code below only produces the image in the TL corner of the browser with no styles applied to the canvas (inclusion of can.percentWidth = 95; results in nothing being displayed).


//my mxml file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:app="app.*" backgroundGradientColors="[#ffffff, #6499c4]">
<app:boot />
</mx:Application>

//my class
package app
{
import mx.controls.Image;
import mx.containers.Canvas;
import flash.events.Event;
public class boot extends Canvas
{
public function boot():void {
this.addEventListener(Event.ADDED_TO_STAGE, dop);

}

public function dop(ev:Event):void {
var can:Canvas = new Canvas();
var titleImg:Image = new Image();
titleImg.load("graph.gif");
can.setStyle("horizontalCenter", 0);
can.setStyle("backgroundColor", "#FF8000");
//can.percentWidth = 95;
can.addChild(titleImg);
addChild(can);
}
}
}



Something to do with it being in a class has something to do with the problem. I tried putting the code in the constructor of boot and then in a function and calling it when event.ADDED_TO_STAGE is broadcast but it makes no difference.

[dr_zeus]

First of all, your class "boot" is a Canvas. Inside the dop function, you're adding another canvas. You commented out can.precentWidth = 95, so that internal canvas is zero width and zero height. You simply can't see it!

In your MXML file, you need to set the dimensions too:

<app:boot width="95%" height="95%" />

[Daedalus]

Thanks Josh much appreciated.

Problem Solved