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.
Getting Started: Layout Containers for Flash CS3
Similar to other Flash components, you can create a layout container by placing an instance on the stage or by using ActionScript to create an instance dynamically.
Initializing a HBoxPane on Stage
The easiest way to create a layout container is to drag one of them (an HBoxPane, for instance), from the Components panel to the stage. This will immediately create a instance of the container and add it to the display list. To add children to the container, or to change the way its layout mode behaves, you must use ActionScript. The following example demonstrates how to create a toolbar using an HBoxPane container.
Download the Toolbar example files on the Layout Containers Examples page to see the full source code.
Initializing an HBoxPane with ActionScript
To add a layout container to your application with ActionScript, you must first include one of the components in your library. Drag an HBoxPane from the Components panel directly to the library, or drag an instance to the stage and delete it (the component will stay in your library). Additionally, you must import the following package in your class or frame script.
com.yahoo.astra.fl.containers.* contains the main classes you will access when using layout containers in your applications. Importing the entire package is completely optional, and you may instead opt to import only the classes that you intend to use within your project. Depending on your project's needs, you may also want to import classes from the
com.yahoo.astra.layout.* package as well.
Like any other Flash display object, you must add a layout container to the display list by passing it to the
addChild() method on the intended parent. The following ActionScript code instantiates an
HBoxPane with the same properties as the HBoxPane in the previous example where we simply dragged the component to the stage.
As you can see, layout containers can be used like any other components in Flash. This code demonstrates how to change the container's position and resize the container. Additionally, in the Toolbar example, we customize a few of the container's properties.
The padding on the top and left edges of the toolbar is set to put some space between the edge and the buttons in the toolbar, and the
horizontalGap property makes the layout algorithm put a couple pixels of space between each button as they're positioned horizontally. Finally, we use a custom background skin from the library to complete the appearance of our toolbar container.
We use the standard
addChild() method to add the buttons to the container.
Visit the Layout Containers Examples page and download the Toolbar project files to see the full source code for this example.
For additional topics, please read Using Layout Containers, or take a look at the other examples. 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.