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.
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.
Example 6-10. Code used to produce the layout in 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.
Example 6-11. Adding the application
<?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.
Example 6-12. Adding the Panel container
<?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.
Example 6-13. Adding the VDividedBox
<?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.
Example 6-14. Adding the Canvas to complete the example
<?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.