Question

I have the following setup:

<mx:Canvas>
 <mx:ViewStack width="800" height="600">

  <mx:Canvas width="100%" height="100%">
   <s:BorderContainer width="100%" height="100%">
    <mx:Canvas x="80" y="46" width="640" height="480">
      <custom:CustomComponent width="640" height="480" />
    </mx:Canvas>
   </s:BorderContainer>
  </mx:Canvas>

 </mx:ViewStack>
</mx:Canvas>

The <custom:CustomComponent /> is something I can’t change. It’s something that displays videos. However, for some reason, something (a container I guess) gets the size 800x 600. So I get scrollbars inside the <custom:CustomCompnent />.

Is there a way I can force all children of a certain container not to get beyond a certain width/heigth.

Answer 1

You could just override the addChildAt()-method of your custom container. (this also covers the addChild()-method, because addChild() calls for addChildAt()). There you can check the width and height and add changeWatchers to check every time the width/height of a component changes. the changewatchers should be used because DisplayObject does not have a maxWidth/maxHeight-property (else it would be even easier).

override public function addChildAt(child:DisplayObject, index:int):DisplayObject
{
    super.addChildAt(child, index);

    if(child.width > 640)child.width = 640;
    if(child.height > 480)child.height = 480;

    ChangeWatcher.watch(child, "width", function():void{child.width = (child.width > 640) ? 640 : child.width;});
    ChangeWatcher.watch(child, "height", function():void{child.height = (child.height > 480) ? 480 : child.height;});
}

EDIT

When you want to use this code, just create a new class that extends the Canvas-class, like so:

package com
{
    import mx.containers.Canvas

    public class CustomCanvas extends Canvas
    {
        public function CustomCanvas():void
        {
            super();
        }

        override public function addChildAt(child:DisplayObject, index:int):DisplayObject
        {
            super.addChildAt(child, index);

            if(child.width > 640)child.width = 640;
            if(child.height > 480)child.height = 480;

            ChangeWatcher.watch(child, "width", function():void{child.width = (child.width > 640) ? 640 : child.width;});
            ChangeWatcher.watch(child, "height", function():void{child.height = (child.height > 480) ? 480 : child.height;});
        }
    }
}

In order to then add this using simple mxml, you can just do something like this. This will have all functionalities a Canvas would have, extended with your own adchild()-functionality.

<com:CustomCanvas someproperty="somevalue"></com:CustomCanvas>