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-13 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-13. Layout example that contains different nested container types and controls

In Figure 6-13, 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 VDividedBox continues to have the same width, but it expands to fill 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-10 shows the code used to produce Figure 6-13.

<?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:VDividedBox width="200" height="100%">
            <mx:List width="100%" height="200"/>
            <mx:List width="100%"/>
        </mx:VDividedBox>
        <mx:Canvas width="100%" height="100%">
            <mx:Button bottom="10" right="10" label="Save"/>
        </mx:Canvas>
    </mx:Panel>
</mx:Application>

Now let’s walk through the code. First, we declared the application, as shown in Example 6-11. Our intent is not to use the Application layout rules because the entire application is contained within a Panel that will serve as the root container.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Application>

Next, we added the Panel container and set the width and height to 100% to ensure that the interface expands as needed. This also ensures that the interface’s children get the maximum possible real estate available to the application. As shown in Example 6-12, the layout value of Panel is set to horizontal, as you want the children to be positioned horizontally, one next to the other, using the box layout rule.

<?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:Application>

Next, we added the two List controls within a VDividedBox, as shown in Example 6-13.

<?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:VDividedBox width="200" height="100%">
            <mx:List width="100%" height="200"/>
            <mx:List width="100%"/>
        </mx:VDividedBox>
    </mx:Panel>
</mx:Application>

The VDividedBox’s direction is set to vertical by default, so there is no need to set a direction value. The VDividedBox’s width property is set to a fixed pixel value of 200. This ensures that the VDividedBox always has a 200-pixel width—no more and no less. The height is set to 100% to ensure that the panel expands as the canvas is resized. The VDividedBox expands too, and its children get to take advantage of the extra space.

Next, we placed two List controls. Each List control has a width of 100%. You could achieve the same result by setting the List controls to occupy 200 pixels rather than 100%. However, we’ve found that setting the value to 100% makes it easier in the future to resize the parent container (in this case, the VDividedBox) without having to change the behavior of the children. The height of the first List control is set to an explicit 200 pixels to ensure that on initial load, the top List control is given at least 200 pixels of real estate, both in height and in width, for displaying content to the user. (Omit this if you don’t have a preference on its size.) After the initial load, if the user decides there's no need for the space, he can resize the VDividedBox children interactively.

Finally, we added the Canvas container with a Button, as shown in Example 6-14.

<?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:VDividedBox width="200" height="100%">
            <mx:List width="100%" height="200"/>
            <mx:List width="100%"/>
        </mx:VDividedBox>
        <mx:Canvas width="100%" height="100%">
            <mx:Button bottom="10" right="10" label="Save"/>
        </mx:Canvas>
    </mx:Panel>
</mx:Application>

The Canvas container’s width and height properties are set to 100% to ensure that the Canvas container grows as needed. The container’s x and y properties aren’t set, so x and y both take the default value of 0. The Canvas container is a child of the Panel, which uses the horizontal BoxLayout rule. This ensures that the canvas is positioned to the right of the VDividedBox.

Within the Canvas container, the Button is positioned using constraint-based layout rules to anchor it to the bottom right. To achieve that, the bottom and right style properties are set to 10. That ensures that the Button is always 10 pixels away from the bottom-right corner of the Canvas container, even when the user resizes the Canvas container.

The techniques covered in this section will help you achieve many different layouts. It’s important to keep in mind that you can mix many containers together to attain a desired layout. Deciding when to use more containers is a skill that varies widely, although as a general rule, completing a layout with fewer containers is better. With the power of the canvas-based layout rule along with constraint functionality, you often can achieve your application layout with fewer containers.