Have Geek Brain

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

I have two canvases A and B, A is child B. A can be modified through some user action, such as adding some UI components to its base. A is limited to another canvas B of the parent, which should show a scolling handle if its child A gets too large.

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

If w or h from A is greater than B's numbers, then A should grow and B will show scrolling. Hope this will be clear.

My question is where and how can I do this kind of logic?

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

0


a source to share


2 answers


The UIComponent class that Canvas inherits from has a minHeight and minWidth property. You can bind A's minHeight / Width to B's width and height, so when B changes, A's minimum dimensions change as well. Expression binding is also supported (see example below). B will automatically show scrollbars when A gets too big to display all at once, you just need to specify a fixed height and width (or some other size constraint). It also automatically resizes after adding 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>
+1


a source


All you have to do is set the auto-scrolling policy to B. That way, if A is too large, B will have scrollbars. This must be done in MXML.



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


a source






More articles:


All Articles