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
• Using
• Examples
• ActionScript 3 Class Reference
• Back to Astra Flash Components

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 an HBoxPane on Stage
• Initializing an HBoxPane with ActionScript

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.

import com.yahoo.astra.fl.containers.*;

The package 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.

var toolbar:HBoxPane = new HBoxPane();
toolbar.x = 25;
toolbar.y = 28;
toolbar.width = 450;
toolbar.height = 28;
this.addChild( toolbar );

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.

//add some padding between the buttons and the edge of the toolbar
toolbar.paddingLeft = 6;
toolbar.paddingTop = 3;

//make sure there's some spacing between the buttons
toolbar.horizontalGap = 2;

//set the skin from the FLA file's library
toolbar.setStyle( "skin", "ToolbarSkin" );

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.

toolbar.addChild( button );

Visit the Layout Containers Examples page and download the Toolbar project files to see the full source code for this example.

Learning More

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.