YUI AS Component Documentation |
Class BoxLayout

Package | com.yahoo.astra.layout.modes
Class | public class BoxLayout
Inheritance | BoxLayout BaseLayoutMode flash.events.EventDispatcher
Implements | IAdvancedLayoutMode

Arranges a DisplayObjectContainer's children in a single column or row.

Example
The following code configures a BoxLayout instance and passes it to a container:

      var box:BoxLayout = new BoxLayout();
      box.direction = "vertical";
      box.verticalGap = 4;
      box.verticalAlign = VerticalAlignment.MIDDLE;

      var container:LayoutContainer = new LayoutContainer();
      container.layoutMode = box;
      this.addChild( container );

Advanced Client Options:

Optional client configuration parameters allow a developer to specify behaviors for individual children of the target container. To set these advanced options, one must call `addClient()` on the BoxLayout instance and pass the child to configure along with an object specifying the configuration parameters. Several client parameters are available to the BoxLayout algorithm:

`percentWidth` : Number
  The target's width will be updated based on a percentage of the width specified in the layout bounds.
`percentHeight` : Number
  The target's width will be updated based on a percentage of the width specified in the layout bounds.
`minWidth` : Number
  The minimum width value to allow when resizing. The default value is `0`.
`minHeight` : Number
  The minimum height value to allow when resizing. The default value is `0`.
`maxWidth` : Number
  The maximum width value to allow when resizing. The default value is `10000`.
`maxHeight` : Number
  The maximum height value to allow when resizing. The default value is `10000`.
`includeInLayout` : Boolean
  If `false`, the target will not be included in layout calculations. The default value is `true`.

The following code adds multiple clients to a BoxLayout instance:

      var box:BoxLayout = new BoxLayout();
      box.direction = "vertical";
      box.addClient( headerSprite, { percentWidth: 100 } );
      box.addClient( contentSprite,
      {
          percentWidth: 100,
          percentHeight: 100,
          minWidth: 640,
          minHeight: 480
      });
      box.addClient( footerSprite, { percentWidth: 100 } );

      var container:LayoutContainer = new LayoutContainer( box );
      container.width = 1024;
      container.height = 768;
      container.addChild( headerSprite );
      container.addChild( contentSprite );
      container.addChild( footerSprite );
      this.addChild( container );

See also

com.yahoo.astra.layout.LayoutContainer

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined by
--- | --- | ---
|  | direction : String The direction in which children of the target are laid out. | BoxLayout
|  | horizontalAlign : String The horizontal alignment of children displayed in the target. | BoxLayout
|  | horizontalGap : Number The number of pixels appearing between the target's children horizontally. | BoxLayout
|  | paddingBottom : Number The number of pixels displayed at the bottom of the target's children. | BaseLayoutMode
|  | paddingLeft : Number The number of pixels displayed at the left of the target's children. | BaseLayoutMode
|  | paddingRight : Number The number of pixels displayed at the right of the target's children. | BaseLayoutMode
|  | paddingTop : Number The number of pixels displayed at the top of the target's children. | BaseLayoutMode
|  | verticalAlign : String The vertical alignment of children displayed in the target. | BoxLayout
|  | verticalGap : Number The number of pixels appearing between the target's children vertically. | BoxLayout

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined by
--- | --- | ---
|  | BoxLayout() Constructor. | BoxLayout
|  | addClient(target:DisplayObject, configuration:Object = null):void Registers a specific display object with the layout algorithm. | BaseLayoutMode
|  | hasClient(target:DisplayObject):Boolean Returns true if a display object has been registered as a client. | BaseLayoutMode
|  | layoutObjects(displayObjects:Array, bounds:Rectangle):Rectangle The DisplayObjects in the input parameter will be positioned and sized based on a specified rectangle. | BoxLayout
|  | removeClient(target:DisplayObject):void Unregisters a specific display object from the layout algorithm. | BaseLayoutMode

Property detail

direction | property

`direction:String` [read-write]

The direction in which children of the target are laid out. Valid direction values include `"vertical"` or `"horizontal"`.

Implementation
`public function get direction():String`
`public function set direction(value:String):void`

horizontalAlign | property |

`horizontalAlign:String` [read-write]

The horizontal alignment of children displayed in the target.

Implementation
`public function get horizontalAlign():String`
`public function set horizontalAlign(value:String):void`

See also

HorizontalAlignment

horizontalGap | property |

`horizontalGap:Number` [read-write]

The number of pixels appearing between the target's children horizontally.

Implementation
`public function get horizontalGap():Number`
`public function set horizontalGap(value:Number):void`

verticalAlign | property |

`verticalAlign:String` [read-write]

The vertical alignment of children displayed in the target.

Implementation
`public function get verticalAlign():String`
`public function set verticalAlign(value:String):void`

See also

VerticalAlignment

verticalGap | property |

`verticalGap:Number` [read-write]

The number of pixels appearing between the target's children vertically.

Implementation
`public function get verticalGap():Number`
`public function set verticalGap(value:Number):void`
Constructor detail

BoxLayout | () | constructor

`public function BoxLayout()`

Constructor.

Method detail

layoutObjects | () | method

`public override function layoutObjects(displayObjects:Array, bounds:Rectangle):Rectangle`

The DisplayObjects in the input parameter will be positioned and sized based on a specified rectangle. There is no requirement that the display objects remain entirely within the rectangle.

Returns the actual rectangular region in which the laid out children will appear. This may be larger or smaller than the suggested rectangle. This returned value is expected to be used by container components to determine if scrollbars or other navigation controls are needed.

Parameters

| `displayObjects:Array` — An Array of DisplayObjects to be laid out.
| `bounds:Rectangle` — The rectangular region in which the display objects should be placed.

Returns

| `Rectangle` — The actual region in which the display objects are contained.