The Box class
- The Box class is the base class for the VBox and HBox classes.
- VBox container renders all child display objects vertically.
- HBox container renders all child display objects horizontally.
- Application object behaves like a VBox by default (vertical layout), but can also be set to use absolute or horizontal layout.
- VBox and HBox flows like HTML, only in one direction
|
rate-5767274-95047
| User rating? |
|
|
|
VBox example
The following example code demonstrates the default layout method used by the VBox container (vertical).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http:
backgroundColor="#FFFFFF"
backgroundAlpha="0">
<mx:VBox>
<mx:Button label="< prev"
left="10" top="120" />
<mx:Image source="assets/animals03.jpg"
horizontalCenter="0" top="30"/>
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250"/>
<mx:Button label="next >"
right="10" top="120"/>
</mx:VBox>
</mx:Application>
Rendered Sample
HBox Example
The following example code demonstrates the default layout method used by the HBox container (horizontal).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http:
backgroundColor="#FFFFFF"
backgroundAlpha="0">
<mx:HBox>
<mx:Button label="< prev"
left="10" top="120" />
<mx:Image source="assets/animals03.jpg"
horizontalCenter="0" top="30"/>
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250"/>
<mx:Button label="next >"
right="10" top="120"/>
</mx:HBox>
</mx:Application>
Rendered Sample
Box Model: Using both VBox and HBox to achieve the desired layout
The following code nests an HBox inside a VBox demonstrating that container controls can have other containers as children.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http:
backgroundColor="#FFFFFF"
backgroundAlpha="0">
<mx:VBox horizontalAlign="center"
verticalGap="15">
<mx:HBox verticalAlign="middle"
horizontalGap="15">
<mx:Button label="< prev"
left="10" top="120" />
<mx:Image source="assets/animals03.jpg"
horizontalCenter="0" top="30"/>
<mx:Button label="next >"
right="10" top="120"/>
</mx:HBox>
<mx:Label text="Photographed by Elsie Weil"
horizontalCenter="0" top="250"/>
</mx:VBox>
</mx:Application>
Rendered Sample
