| | {section} |
| | {column:width=80%} |
| | |
| | h2. 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 |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Application+Container} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Canvas+-+absolute} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {column} |
| | {section} |
| | |
| | h2. VBox example |
| | |
| | The following example code demonstrates the default layout method used by the VBox container (vertical). |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | 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> |
| | {code} |
| | |
| | h2. Rendered Sample |
| | |
| | | {test-flash:400|350|Use_E_VBox.swf}Use_E_VBox{test-flash} |
| | | {test-flash:350|400|Use_E_VBox.swf}Use_E_VBox{test-flash} |
| | |
| | h2. HBox Example |
| | |
| | The following example code demonstrates the default layout method used by the HBox container (horizontal). |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | 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> |
| | {code} |
| | |
| | h2. Rendered Sample |
| | |
| | {test-flash:350|650|Use_F_HBox.swf}Use_F_HBox{test-flash} |
| | |
| | h2. 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. |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | 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> |
| | {code} |
| | |
| | h2. Rendered Sample |
| | |
| | {test-flash:300|575|Use_G_BoxModel.swf}Use_G_BoxModel{test-flash} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Application+Container} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Canvas+-+absolute} |
