An Vbox arranges its child components vertically according to their desired size. If the size is is declared in percentage values, it will set the components bounds percentaged to the space left filled by fixed size components.
NOTE: percentaged values of child components are just handled if the desired size of the VBox was set explicitly.
For a detailed view on the component/container structure see AS3-Layout-Framework.
The following example demonstrates a basic usage of the VBox:
package { import com.addicted2flash.layout.component.Application; import com.addicted2flash.layout.component.VBox; /** * @author Tim Richter */ public class VBoxTest extends Application { public function VBoxTest() { super( Application.ABSOLUTE ); var box: VBox = new VBox(); box.add( new SimpleComponent( 100, 100 ) ); box.add( new SimpleComponent( 50, 100 ) ); box.add( new SimpleComponent( 100, 150 ) ); //-- add hbox to the application container container.add( box ); } } }
SimpleComponent.as
package { import com.addicted2flash.layout.core.Component; import flash.display.Graphics; import flash.text.TextField; import flash.text.TextFieldAutoSize; /** * @author Tim Richter */ public class SimpleComponent extends Component { private static var _id: int = 0; private var _tField: TextField; public function SimpleComponent( w: Number, h: Number ) { desiredWidth = w; desiredHeight = h; _tField = new TextField( ); _tField.autoSize = TextFieldAutoSize.CENTER; _tField.selectable = false; _tField.textColor = 0x999999; _tField.text = ( _id++ ).toString(); display.addChild( _tField ); } override public function arrange(): void { var g: Graphics = display.graphics; g.clear(); g.beginFill( 0xccff00 ); g.drawRect( 0, 0, width, height ); g.endFill(); _tField.x = ( width - _tField.textWidth ) * 0.5; _tField.y = ( height - _tField.textHeight ) * 0.5; } } }
) so I can swap out the layout.
