Flex resizing Canvas where to put such code ? (diagram inside)

Question

I have two Canvas A and B, A is the child of B. A can be resized by some user actions like adding some UI components to its base. A is bounded by an other Parent canvas B which should show scolling handles if its child A gets too large.

I would like A to have the same width and height of B (or really close) while the calculated width and height of A is smaller than those of B.

If w or h of A get larger than those of B then A should grow and B will show scrolling. I hope it is kind of clear.

My question is where and how could i do such logic ?

canvas diagram http://www.picimg.com/uploads/18cd2277adde7d50da2bc708075f4fac.png

Answer 1

The UIComponent class from which Canvas inherits has a minHeight and a minWidth property. You can bind A's minHeight/Width to the width and height of B, so whenever B is resized, the minimum dimensions of A also change. Binding to an expression is also supported (see example below). B will automatically show scrollbars when A grows too large to be shown all at once, you just need to supply a fixed height and width (or some other size constraint). A also automatically resizes once you add children.

<mx:Canvas id="B" width="..." height="...">
    <mx:Canvas id="A" minHeight="{B.height-20}" minWidth="{B.width-20}">
        <!-- your content widgets -->
    </mx:Canvas>
</mx:Canvas>

Answer 2

All you need is to set the scroll policy on B to be auto. This way, if A get's too large, B will have scroll bars. This should be done in the MXML.

<mx:Canvas name="B" width=100 height=100 scrollPolicy="auto">
    <mx:Canvas name="A" width=90 height=90>
        ...
    </mx:Canvas>
</mx:Canvas>