Now that we have covered the many concepts related to managing layout within Flex, let's dig a bit deeper and learn how to put it all together. The layout shown in Figure 6-12 contains a fixed left region for two
List components that are stacked with a draggable divider, and a
Canvas region that expands and repositions the Save button as needed to keep it at the bottom right.
Figure 6-12. Layout example that contains different nested container types and controls
In Figure 6-12, the application is contained within a
Panel and the
height properties are set to
resize to maximize the application area. When resizing occurs, the left
DividedBox continues to have the same width, but it expands to fill up the maximum vertical space. The
Canvas on the right expands to fill the entire region, which allows the children to be laid out with the
Canvas using constraint-based layout techniques (discussed earlier). Example 6-9 shows the code used to produce Figure 6-12.
Example 6-9. Code used to produce the layout in Figure 6-12
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel layout="horizontal" width="100%" height="100%" title="Putting it all Together"> <mx:DividedBox direction="vertical" width="200" height="100%"> <mx:List width="100%" height="200"> </mx:List> <mx:List width="100%"> </mx:List> </mx:DividedBox> ...