Embedding a UIComponent in a Accordion Canvas using only AS3

[khovorka]

Hello,

I submitted the following on a different forum (Flex) and am looking for any solution here as well. I have been looking at Flex and AS3 for only about 3
days and so am not well versed in why things are happing as they are.

I can create an image dynamically and add it to a UIComponent and
I then want to add the UIComponent to a Canvas I have created using
MXML. It appears the UIComponents (I actually add multiple components
in a for loop) are not added to the canvas. I am also having a side effect
in that the application window appears to be shifting down as I attempt
to add the UIComponent with its image? I would really appreciate it if
there is a fix that can be given for this issue. I have removed some other
non-essential components and code but this should work except for the
url paths needing to be tweaked/replaced with a path to a couple of images.
I had a php script that returned XML with a list of png images from a folder
on a website the script was called filelist2.php near the bottom of the code
I could send the script for tweaking if necessary.

Here is the coding:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="setPAGESIZE(72);" horizontalAlign="center" verticalAlign="center"
fontFamily="Times New Roman" borderStyle="solid" borderColor="#83F4F5" themeColor="#A6D1F0" alpha="1.0"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#83E9B3, #83E9B3]" layout="absolute"
width="800" height="600" xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;
import flash.events.MouseEvent;
import mx.controls.*;
import mx.core.UIComponent;

public function populateContainerWithImages(Can:Canvas):void
{
var filenames:XMLList = mybkgrnds.filename;
var ix:int = 10;
var yi:int = 1;

for (var i:int = 0; i < filenames.length(); i++) {
var url:String = mybkgrnds_h"+
String(filenames[i].valueOf());
var myImage:Image = new Image;
var ref : UIComponent = new UIComponent();

myImage.source = url;
myImage.width = 160;
myImage.height = 100;
myImage.filters=[getBitmapFilter()];
myImage.addEventListener(MouseEvent.MOUSE_DOWN, mouseMoveHandler);

ref.x += ix;
ref.y;
ref.addChild(myImage);
Can.addChild(ref);
}
}

private function dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(UIComponent(event.targe t));
}

private function dragDropHandler(event:DragEvent):void
{
var img:Image;

if (event.dragInitiator.parent == theCHART)
img = event.dragInitiator as Image;
else
{
img = new Image();

img.source = (event.dragInitiator as Image).source;
img.addEventListener(MouseEvent.MOUSE_DOWN, mouseMoveHandler);
theCHART.addChild(img);
img.percentWidth = 100;
img.percentHeight = 100;
}
img.x = 0;
img.y = 0;
}

private function mouseMoveHandler(event:MouseEvent):void
{
var dragInitiator:Image = event.currentTarget as Image;
var dragSource :DragSource = new DragSource();
var dragProxy:Image = new Image();

dragProxy.source = dragInitiator.source;
dragProxy.width = dragInitiator.width;
dragProxy.height= dragInitiator.height;
dragSource.addData(event.localX, "localX");
dragSource.addData(event.localY, "localY");
DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}

private function setPAGESIZE(dpi:int):void
{
switch (cbPAGESIZE.text){
case "36 x 48":
if (rbtnLAYOUTP.selected) {
theCHART.width = 48*dpi;
theCHART.height = 36*dpi;
} else {
theCHART.width = 36*dpi;
theCHART.height = 48*dpi;
}
break;
default:
if (rbtnLAYOUTP.selected) {
theCHART.width = 20*dpi;
theCHART.height = 16*dpi;
} else {
theCHART.width = 16*dpi;
theCHART.height = 20*dpi;
}
break;
}
}
]]></mx:Script>

<mx:XML id="mybkgrnds" source="/php/filelist2.php"/>
<mx:Accordion id="accMyLists" x="9.05" y="9" width="200" height="582">
<mx:Canvas id="Layouts" width="201" height="583" enabled="true" label="Layouts" creationComplete="populateContainerWithImages(Layouts)">
</mx:Canvas>
<mx:Canvas id="Backgrounds" width="201" height="583" enabled="true" label="Backgrounds">
</mx:Canvas>
</mx:Accordion>
<mx:Canvas id="canvasZOOM" backgroundColor="#EEEEE8" x="228.85" y="11.65" width="550" height="438">
<mx:Canvas id="theCHART" borderColor="#B7BABC" backgroundColor="#FFFFFF" backgroundAlpha="1.0" width="480" height="320" horizontalCenter="0" verticalCenter="0" dragDrop="dragDropHandler(event)" dragEnter="dragEnterHandler(event)"/>
</mx:Canvas>
</mx:Application>

[Sly_cardinal]

Is there a reason why you are putting the images inside UIComponent instances?

You are able to add them directly to the canvas.

EDIT: To give a little more information - the UIComponent doesn't perform automatic layout of its size. You might need to set the size of the UIComponent before you can see the image or alternatively place the Image inside a container such as the Canvas, HBox or VBox that does perform automatic layout/resizing.

[khovorka]

Thanks for replying.
In reading other information people were stating a UIComponent was need to
place the images inside a Canvas and so I used it. I did try adding the Images
directly to the Accordion Canvas and it did not appear to work. The big issue is
that the UIComponent is not being added the the Canvas but apparently just to the application and the other issue is that the application is shifting down even though
I am setting the x and y properties of the UIComponent. I will try removing the UIComponent again and try adding the images directly to the Canvas and see if I can
get that to work.

[khovorka]

You were correct and I can add the images directly by just commenting out the UIComponent stuff now and changing the add child for the Canvas to add the image.
I am still have the problem with the whole application shifting for some reason however
that I don't see why it should happen. It is when I click on the Layouts canvas header.
If anyone can give insight on that from the code found below in a previous post.

[khovorka]

We'll I finally got things figured out and there was some pretty weird behavior in the Flex/Actionscript code that surprised me. In any case I have gotten my first item doing
pretty well. Thanks.

[Sly_cardinal]

Are you able to explain how you fixed the issue?