As shown in the UML diagram in Figure 9.1, the VBox and HBox components are extended from a superclass named Box.

The Box, VBox, and HBox components place their nested child visual components using two logical passes through the containership. In the first pass, the quantity and size of the nested child objects are collected. In the second pass, the nested objects are placed on the screen. Each time the Box component is resized, it re-executes this sizing and placement task.

Figure 9.1. The inheritance hierarchy for Box, VBox, and HBox

The VBox container

The VBox container behaves like the Application component when its layout is set to vertical: It lays out nested visual components in a single column from top to bottom. The application in Listing 9.1 uses a VBox to lay out three Textlnput controls.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical">
    <mx:Style>
    TextInput { font-size:24 }
    </mx:Style>
    <mx:VBox
    borderStyle="solid" borderColor="#000000" borderThickness="4"
    horizontalAlign="center"
    paddingBottom="10" paddingLeft="10" paddingRight="10"
      paddingTop="10">
    <mx:TextInput text="TextInput 1"/>
    <mx:TextInput text="TextInput 2"/>
    <mx:TextInput text="TextInput 3"/>
    </mx:VBox>
</mx:Application>

Figure 9.2 shows the resulting application running in the Web browser.

Figure 9.2. An application using the VBox container

The HBox container

The HBox container behaves like the Application component when its layout is set to horizontal: It lays out nested visual components in a single column from top to bottom. The application in Listing 9.2 uses an HBox to lay out three Textlnput controls.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical">
    <mx:Style>
    TextInput { font-size:24 }
    </mx:Style>
    <mx:HBox
    borderStyle="solid" borderColor="#000000" borderThickness="4"
    horizontalAlign="center"
    paddingBottom="10" paddingLeft="10" paddingRight="10"
      paddingTop="10">
    <mx:TextInput text="TextInput 1"/>
    <mx:TextInput text="TextInput 2"/>
    <mx:TextInput text="TextInput 3"/>
    </mx:HBox>
</mx:Application>

Figure 9.3 shows the resulting application running in the Web browser.

Figure 9.3. An application using the HBox container

The Canvas container behaves like the Application component when its layout is set to absolute. As shown in Figure 9.4, the Canvas container extends the Container class directly.

Objects that are nested within a Canvas determine their positions in one of these ways:

Visual components that are nested in a Canvas can use the following properties to set their positions relative to the Canvas containers top-left corner:

The following code declares a Label component nested in a Canvas. The Label control's top-left corner is 10 pixels from the top and left of the Canvas:

<mx:Canvas>
    <mx:Label x="10" y="10" text="Hello World!"/>
</mx:Canvas>

Figure 9.4. The inheritance hierarchy of the Canvas container

One benefit of the Canvas, Application, and other containers that support absolute positioning is the ability to layer objects on top of each other. Paired with alpha styles that control transparency, you can create visual effects where one object appears "behind" another, but shows through the "top" object.

The code in Listing 9.3 declares a Canvas container wrapped around three Textlnput controls and three VBox containers. The VBox containers are arranged so that they overlap each other, and the backgroundAlpha setting of . 5 creates a 50 percent transparency effect.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical">
    <mx:Style>
    TextInput { font-size:24 }
    </mx:Style>
    <mx:Canvas borderStyle="solid" borderColor="#000000"
      borderThickness="4"
    width="400" height="313">
    <mx:TextInput text="TextInput 1"/>
    <mx:TextInput text="TextInput 2" x="71" y="47"/>
    <mx:TextInput text="TextInput 3" x="141" y="97"/>

    <mx:VBox width="100" height="100" backgroundColor="#FFFFFF"
      backgroundAlpha=".5" x="224" y="144"/>

<mx:VBox width="100" height="100" backgroundColor="#666666"
      backgroundAlpha=".5" x="249" y="169"/>
    <mx:VBox width="100" height="100" backgroundColor="#000000"
      backgroundAlpha=".5" x="274" y="194"/>
    </mx:Canvas>

</mx:Application>

Figure 9.5 shows the resulting application displayed in a browser. Notice the overlapping objects and the borders that show through.

Figure 9.5. A Canvas container with overlapping objects

The VBox and HBox containers support styles that help to determine placement of nested objects. These styles, described in Table 9.1, control the alignment and the area around and between objects nested within the container.

The application in Listing 9.4 places nested visual components within a VBox container that sets gap, border, and padding styles using CSS syntax and MXML style attributes.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical"
    backgroundColor="#eeeeee">
    <mx:Style>
    TextInput {
      font-size:24;
      border-style:solid;
      border-color:black;
      border-thickness:4;

}
    </mx:Style>
    <mx:Spacer height="20"/>
    <mx:VBox
    borderStyle="solid" borderColor="#000000" borderThickness="4"
    horizontalAlign="center"
    paddingBottom="20" paddingLeft="20" paddingRight="20"
      paddingTop="20"
    verticalGap="20" backgroundColor="white">
    <mx:TextInput text="TextInput 1"/>
    <mx:TextInput text="TextInput 2"/>
    <mx:TextInput text="TextInput 3"/>
    </mx:VBox>
</mx:Application>

The diagram in Figure 9.6 shows the placement of gap and padding styles in a VBox container.

Figure 9.6. Using gap and padding styles

The Panel shares many properties with the Application and Box containers.

Using the layout property

Like the Application component, it supports the layout property and allows the Panel container's nest components to be laid out with vertical, horizontal, or absolute positioning. As with Application, the default value is vertical.

Using title and status

The Panel container has two properties that place labels in the container's header region:

The code in Listing 9.5 declares a Panel with a title and a status property, and contains a set of Label controls.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical"
    backgroundColor="#cccccc">
    <mx:Panel title="My Panel" status="A test panel" width="200">
    <mx:Label text="Label 1"/>
    <mx:Label text="Label 2"/>
    <mx:Label text="Label 3"/>
    </mx:Panel>
</mx:Application>

Figure 9.7 shows a Panel containing the three Label controls and displaying the title and status values in the Panel header.

Figure 9.7. A Panel with title and status properties

The Panel container supports all the Box styles described previously and adds other styles that are specific to its functions and abilities.

The Panel container and transparency

The Panel container has a borderAlpha style that controls the level of transparency in the container's title bar, control bar, and sides. Alpha values in Flex are set to a range of 0 to 1, where 0 is fully transparent and 1 is fully opaque. The default borderAlpha for a new Panel is .4, meaning that it has an opaqueness of 40 percent and the background color or image can show through the panel's outside area.

The code in Listing 9.6 displays three Panel containers with borderAlpha settings of 0, .4 (the default), and 1.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#333333" layout="horizontal">
    <mx:Panel title="borderAlpha=0" width="200" borderAlpha="0"
      color="#ffffff">
    ... nested labels ...
    </mx:Panel>
    <mx:Panel title="borderAlpha=.4" width="200" borderAlpha=".4">
    ... nested labels ...
    </mx:Panel>
    <mx:Panel title="borderAlpha=1" width="200" borderAlpha="1">
    ... nested labels ...
    </mx:Panel>
</mx:Application>

Figure 9.8 shows the three Panel containers with the differing levels of transparency against a dark Application background.

Figure 9.8. Panel containers with differing borderAlpha settings

Controlling Panel corners

By default, a Panel presents rounded corners in the header and square corners in the footer. To instead present round corners for both the header and footer, set roundedBottomCorners to true, like this:

<mx:Panel title="My Panel" roundedBottomCorners="true">
       ...nested content...
     </mx:Panel>

The Panel container also supports the cornerRadius style, which determines the amount of curve in the containers corners. The default cornerRadius is 4 pixels. Setting this value to 0 results in square corners at the top and bottom of the container; increasing the value creates a softer curve.

The code in Listing 9.7 creates a Panel container with rounded corners at both top and bottom and a cornerRadius of 15.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="A panel with rounded corners" width="200"
    roundedBottomCorners="true" cornerRadius="15">
    <mx:Label text="Label 1"/>
    <mx:Label text="Label 2"/>
    <mx:Label text="Label 3"/>
    </mx:Panel>
</mx:Application>

Figure 9.9 shows the application with a Panel with rounded top and bottom corners and a cornerRadius of 15.

Figure 9.9. A Panel with rounded top and bottom corners

The ControlBar container is designed to be nested as the last component within a Panel or a TitleWindow. This container mimics the behavior of the HBox container, laying out its nested components horizontally, and creates a footer region below the other Panel containers nested objects with a style that matches the title bar. In addition to providing a container for objects in the Panel containers footer, it rounds the Panel containers bottom corners in the same manner as the roundedBottomCorners style. The code in Listing 9.8 creates a Panel with a ControlBar.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical"
    backgroundColor="#cccccc">
    <mx:Panel title="A Panel with a ControlBar">
    <mx:Label text="Label 1"/>
    <mx:Label text="Label 2"/>
    <mx:Label text="Label 3"/>
    <mx:ControlBar>
      <mx:Button label="Button 1"/>
      <mx:Button label="Button 2"/>
      <mx:Button label="Button 3"/>
    </mx:ControlBar>
    </mx:Panel>
</mx:Application>

Figure 9.10 shows the resulting application. Notice that the Button controls in the ControlBar lay out horizontally.

Figure 9.10. A Panel with a ControlBar

To separate controls within a ControlBar so that they "glue" themselves to the far left and right edges, add a Spacer control between the controls with a width of 100:

<mx:ControlBar>
    <mx:Button label="Button 1"/>
    <mx:Spacer width="100%"/>
    <mx:Button label="Button "/>
</mx:ControlBar>

Figure 9.11 shows that the component after the Spacer is pushed to the far right edge of the ControlBar.

Figure 9.11. A ControlBar with a Spacer

Flex Builders Design view has tools that can create constraint properties through a combination of selecting options in the Flex Properties view and dragging an object with anchors in the Design view editor. Figure 9.12 shows the Constraints interface in the Flex Properties view. This interface appears whenever a component in a container with absolute layout is selected in Design view.

Figure 9.12. The Constraints interface in the Flex Properties view

Follow these steps to create an application a text logo that's anchored to the application's bottom-right corner:

You should see in the Constraints interface that the number of pixels from each anchor changes as you drag the Label control in Design view.

Figure 9.14. The Constraints interface

Each visual component supports six constraint properties. Each of the properties is data typed as a Number and indicates the number of pixels from the named anchor:

The following code is generated by Design view as the user sets properties in the Constraints interface and drags the component around the screen:

<mx:Label text="My Logo" right="10" bottom="10"
       fontWeight="bold" fontsize="18 " />

The right and bottom properties are set to values of 10 pixels each. As shown in Figure 9.15, each time the user resizes the application, the Label control changes its position relative to the applications bottom-right corner.

Figure 9.15. A Label's position controlled by constraint-based properties

Content-based sizing means that a container or control expands to accommodate its contents. In the absence of any other sizing properties, this happens automatically. With containers, this means that the container sizes itself to accommodate and display its nested contents. With controls, this means that the control sizes itself to display its internal objects. For example, if you don't set a Button control's height or width properties, it sizes itself to display its full label and icon.

Default dimensions

Each container has a default height and width. For example, if you create a Panel with this code, it has no nested components and no title property that would affect its height or width:

<mx:Panel>
     </mx:Panel>

Then Panel container's default dimensions are driven by the size of its default border, gap, and padding styles. On my test system, the Panel container's default height is 40 pixels and its default width is 52 pixels.

Other containers have different default dimensions. In the absence of nested content, the VBox, HBox, and Canvas set their height and width to 0.

Minimum and maximum dimensions

You can set properties to constrain content-based sizing. These properties set minimum and maximum dimensions to place limits on a container's ability to dynamically grow and shrink:

This VBox container has a minimum width and height of 200 pixels each:

<mx:Panel minWidth="2 00" minHeight="2 00">
     ... nested components ...
     </mx:Panel>

The container can still expand if its contents require more space, but it can't contract to less than 200 pixels in either dimension.

Absolute sizing means that you set a component's width and height properties in absolute pixel values. This Panel container is always displayed as 200 pixels high by 200 pixels wide, regardless of its nested contents:

<mx:Panel width="200" height="200">
     </mx:Panel>

When you use absolute sizing and a container is too small to display its nested contents, by default it displays scrollbars that allow the user to scroll to see the contents. Figure 9.16 shows a Panel container with nested Label components. Because nested components can't be displayed in the container's available space, it displays both vertical and horizontal scrollbars.

Figure 9.16. A Panel with scrollbars

Percentage sizing means that you set a dimension as a percentage of available space. When you set a component's size in MXML, you can declare percentage sizing with either the height and width properties or with percentHeight and percentWidth.

Percentage sizing with height and width

When you set percentage sizing with the height and width properties, you declare the values with a percentage expression, such as 50%. This Label control's width is 50 percent of the available space within its container:

<mx:Label text="A sample Label" width="50%"/>

Percentage sizing with percentHeight and percentWidth

When you set percentage sizing with the percentHeight and percentWidth properties, you use numeric expressions such as 50. This Label control's width is also 50 percent of the available space within its container:

<mx:Label text="A sample Label" percentWidth="50"/>

Using percentage ratios

When you declare multiple components within a container and set sizes by percentage, you can declare a total percentage of greater than 100 percent. This VBox contains three Textlnput controls, each with a width property of 100 percent:

<mx:HBox width="450" borderStyle="solid" borderColor="#000000"
    paddingBottom="10" paddingLeft="10"
    paddingRight="10" paddingTop="10">
    <mx:TextInput width="100%"/>
    <mx:TextInput width="100%"/>
    <mx:TextInput width="100%"/>
</mx:HBox>

It might seem that this means the total width of the nested component is 300 percent and would exceed the available space. Instead, the Flex framework adds up the total percentage values and uses the ratio of the control's declared percentage value divided by the total to assign an actual percentage based on available space:

100% + 100% + 100% = 300% (the total)
For each component: 100% / 300% = 33.33%

Figure 9.17 shows the resulting display. Each Textlnput control's width is set dynamically to 33.33% of the available horizontal space.

Figure 9.17. Using percentage ratios

Constraint properties also can be used to control a components size. When a component is nested in a container with absolute layout and two constraint properties in the vertical or horizontal dimension are set, the component "stretches" at runtime to keep its edges the correct distance from the two anchors. Listing 9.9 creates a Text control with right and left properties that keep its edges 50 pixels from each of the Application containers horizontal edges.

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

      <mx:Text id="myTextArea"
     left="50" right="50" top="20" textAlign="center"
     height="100%">
    <mx:text>
    <![CDATA[...text...]]>
    </mx:text>
    </mx:Text>

</mx:Application>

Figure 9.18 shows the resulting display When the user resizes the application, the Text control expands and contracts to keep its edges the correct distance from the constraint anchors.

Figure 9.18. A control with constraint-based sizing

You create rows and columns using MXML declarations. To divide a container vertically first declare an <mx: constraintRows> tag set, then nest multiple ConstraintRow instances. Be sure to assign an id property to each ConstraintRow.

The first ConstraintRow always starts at the top of the container, and subsequent ConstraintRow instances are placed below the first. Each ConstraintRow instances height property can be set to either an absolute numeric value indicating its height in pixels or a percentage value indicating its value in terms of percentage of available vertical space.

This code declares two ConstraintRow instances, each using 50 percent of the Application component's available vertical space:

<mx:constraintRows>
    <mx:ConstraintRow id="row1" height="50%"/>
    <mx:ConstraintRow id="row2" height="50%"/>
</mx:constraintRows>

Similarly, if you want to divide a container horizontally, you use ConstraintColumn instances wrapped in the constraintColumns property. Each column starts at the left edge of the container, and each subsequent column is added to its right. The following code sets up three columns, each filling 100 pixels of width:

<mx:constraintColumns>
    <mx:ConstraintColumn id="column1" width="100"/>
    <mx:ConstraintColumn id="column2" width="100"/>
    <mx:ConstraintColumn id="column3" width="100"/>
</mx:constraintColumns>

You place or size components with constraint rows and columns using the same constraint properties described previously: top, bottom, left, right, verticalCenter, and horizontalCenter. Instead of assigning the property values with a simple numeric expression (as you would with simple constraints), you use a compound expression consisting of a constraint row or column id and a numeric value, separated with a colon. This declaration of the bottom constraint property means that a component should be placed 10 pixels from the bottom of a ConstraintRow with an id of rowl:

bottom="rowl:10"

Just as with simple constraints, you can use multiple constraint properties to control a components size and make it stretch as a row or column expands. Listing 9.10 declares two constraint rows, each taking 50 percent of the applications available vertical space. Each of the VBox components sizes itself vertically, using the top and bottom constraint properties and anchoring itself to one of the constraint rows.

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#eeeeee" layout="absolute">

    <mx:constraintRows>
    <mx:ConstraintRow id="row1" height="50%"/>
    <mx:ConstraintRow id="row2" height="50%"/>
    </mx:constraintRows>

    <mx:VBox top="row1:20" bottom="row1:20" horizontalCenter="0"
      width="50%"
    borderStyle="solid" backgroundColor="#666666"/>
    <mx:VBox top="row2:20" bottom="row2:20" horizontalCenter="0"
      width="50%"
    borderStyle="solid" backgroundColor="#999999"/>
</mx:Application>

Figure 9.19 shows the resulting display. Each of the VBox containers uses width for horizontal sizing and horizontalCenter for horizontal placement, and sizes and places itself vertically with top and bottom properties that reference advanced constraint rows.

Figure 9.19. An application using advanced constraints