Astra Layout Containers
HBoxPane, VBoxPane, FlowPane, TilePane and BorderPane are a set of containers that position and resize their children using several different layout modes. These components are built with the Layout Utility in the Astra Utilities library.
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:
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.
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:
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
percentHeight properties allow you to specify that a child should be sized to a percentage of the container's width or height.
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
percentHeight work with Flex UIComponents. In fact, it uses most of the same open source code!
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.