Simulate includeInLayout=false in pure Actionscript code

Question

If you know Flex, you probably know what the property "includeInLayout" does. If not, this property make the parent of your component disregard the bounds (like width and height) of your component in render their own bounds.

Description in reference below:

Specifies whether this component is included in the layout of the parent container. If true, the object is included in its parent container's layout and is sized and positioned by its parent container as per its layout rules. If false, the object size and position are not affected by its parent container's layout.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html#includeInLayout

In Flex, for example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                creationComplete="application1_creationCompleteHandler(event)">
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function application1_creationCompleteHandler( event:FlexEvent ):void
            {
                trace( container.width, container.height ); // output: 200 200
            }
        ]]>
    </mx:Script>
    <mx:Canvas id="container">
        <mx:Button label="Test"
                   width="100"
                   height="100" />
        <mx:Button label="Test2"
                   width="200"
                   height="200" />
    </mx:Canvas>
</mx:Application>

Now if I set includeInLayout="false" in second button:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                creationComplete="application1_creationCompleteHandler(event)">
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function application1_creationCompleteHandler( event:FlexEvent ):void
            {
                trace( container.width, container.height ); // output: 100 100
            }
        ]]>
    </mx:Script>
    <mx:Canvas id="container">
        <mx:Button label="Test"
                   width="100"
                   height="100" />
        <mx:Button label="Test2"
                   width="200"
                   height="200"
                   includeInLayout="false" />
    </mx:Canvas>
</mx:Application>

I know of all framework architecture involved to implement this property and know than this property is a property from Flex Framework. What I wanna is this behavior in pure actionscript. For example:

import flash.display.Shape;

var myBox:Shape = new Shape();

myBox.graphics.beginFill(0xFF0000);
myBox.graphics.drawRect(0, 0, 100, 100);
myBox.graphics.endFill();

addChild(myBox);

trace(width, height); // output: 100 100

var myAnotherBox:Shape = new Shape();

myAnotherBox.graphics.beginFill(0xFF00FF, .5);
myAnotherBox.graphics.drawRect(0, 0, 200, 200);
myAnotherBox.graphics.endFill();

addChild(myAnotherBox);

trace(width, height); // output: 200 200

Is there some equivalent implementation in pure Actionscript to reproduce this behavior on "myAnotherBox"?

I already tried:

• Change transform matrix;
• Change transform pixelBounds;
• Change scrollRect;
• Apply masks;

And no successful.

Cheers...

Answer 1

If you look up in the UIComponent source code, you'll find, that flag includeInLayout is used in invalidation mechanism (exatcly in size invalidation). If includeInLayout of the component is false, then its parent's size and its size is not recalculated. Invalidation is native flex framework mechanism, which does not exist in pure AS projects.

Answer 2

You need to override width and height in your container:

override public function get width() : Number {
    // place your code here
    return 100;
}

override public function get height() : Number {
    // place your code here
    return 100;
}

Answer 3

You are trying to compare to different things. In the first example, the width and height are from the UIComponent class, which actually represents a "measured" value, as provided by the Flex Framework.

In the second case, the width and height are the actual size of the rendered shape, as provided by the Flash Player.

If you open the UIComponent's implementation, you will notice that it is actually hiding the original meaning of width and height into $width and $height and provide their own implementation to it.

So to answer your question, you cannot achieve what you want working directly with Shapes (pure Flash components) Every time you draw something in a graphics context, the width and height will update accordingly.

You options:

1. draw the first one in one graphics, and the second one in another graphics and measure only the first shape

2. compute the width and height yourself. This is what actually the containers do, and just skip the includeInLayout=false child components.