Using Layout Containers in Flash CS3

A developer has many options available for customizing and manipulating layout containers. The following topics describe a few important functionalities:

• Advanced Configurations
• The includeInLayout Parameter
• BoxPane with percentWidth and percentHeight

Advanced Configurations

For the following demonstratations, we'll be looking at the Feed Reader example for the Layout Containers.

This application features the BorderPane control, which works a bit differently than other containers. Children aren't added with the usual addChild() function, but instead through a configuration property that allows a developer to specify extra parameters that will affect the layout.

var config:Array = [ {target: this.header, constraint: BorderConstraints.TOP}, {target: this.feedsList, constraint: BorderConstraints.LEFT}, {target: this.resizeHandle, constraint: BorderConstraints.LEFT}, {target: this.feedViewer, constraint: BorderConstraints.CENTER}, {target: this.loadingDialog, includeInLayout: false} ]; this.configuration = config;

A configuration is specified with an Array of Object values. The target property refers to the child that will be added to the container. In the case of a BorderPane, the constraint property informs the BorderPane the edge to which it should constrain the target child. For instance, the application's header is constrained to the top edge and the list of feeds that may be read is constrained to the left edge.

Each layout container defines its own configuration properties, so be sure to check the documentation for the specific container you intend to use to see what's available. As stated previously, the BorderPane requires a configuration Array. With other layout containers, like HBoxPane or VBoxPane, the configuration Array is completely optional and the standard addChild() method can be used to add children to the container as well. If a child is defined in the configuration, it will be added to the display list automatically.

The includeInLayout Parameter

All layout containers in the Astra library of Flash components define the includeInLayout configuration property. You may have noticed it being used in the example above with the BorderPane:

{target: this.loadingDialog, includeInLayout: false}

The loadingDialog window is displayed while a feed is being downloaded. It fades in centered on the stage on top of all other display objects. Though it's a child of the main application BorderPane, we don't want it stretching and fitting to one of the constraints. If includeInLayout is set to false, like it is above, the layout algorithm will completely ignore a child and you will be free to position it manually.

The Feed Reader application uses includeInLayout in two use-cases. The first, as we've seen, is to allow a dialog to be centered onscreen outside the main layout. For the other use-case, click the "Find" button in the toolbar above the DataGrid that displays the feed items. A special search form will appear below the DataGrid. Click the button again, and it disappears. By combining includeInLayout and the form's visible property, we easily create a form that can be toggled as needed.

BoxPane with percentWidth and percentHeight

Two important configuration properties used by the HBoxPane and VBoxPane containers are worth noting. The percentWidth and percentHeight properties allow you to specify that a child should be sized to a percentage of the container's width or height.

this.upperContentContainer.configuration = [ {target: this.feedToolbar, percentWidth: 100}, {target: this.feedItemsGrid, percentWidth: 100, percentHeight: 100}, {target: this.filterToolbar, percentWidth: 100, includeInLayout: false} ];

In the com.yahoo.example.views.FeedViewer class included with the Feed Reader application, we specify percentage sizes for the toolbar, the DataGrid, and the filter form. All three controls fill 100% of the width, and the DataGrid will fill 100% of the remaining height after the default toolbar height values are taken into account. This algorithm works very much like percentWidth and percentHeight work with Flex UIComponents. In fact, it uses most of the same open source code!

Next Steps

For additional information, please take a look at the Layout Containers Examples section for functional demonstrations or return to Getting Started for a quick start introduction to layout containers. The ActionScript Class Reference for the Astra library of Flash components contains full details on every property, method, and style available to the layout containers.

Be sure to take a look at Layout Utility too because it provides much of the core functionality used by the Flash layout containers.