O'Reilly logo

Programming Flex 2 by Joey Lott, Chafic Kazoun

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Putting It All Together

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.

Layout example that contains different nested container types and controls

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 width and 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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required