| | {section} |
| | {column:width=80%} |
| | |
| | h2. Application Container |
| | |
| | At the root of a Flex application is a single container, called the Application container, that holds all other containers and components. The Application container lays out all its children vertically by default (when the layout property is not specifically defined). Ther are 3 possible values for the Application's layout property: |
| | * vertical - lays out each child component vertically from the top of the application to the bottom in the specified order. |
| | * horizontal - lays out each child component horizontally from the left of the application to the right in the specified order. |
| | * absolute - Absolute positioning does no automatic layout and requires you to explicitly define the location of each child component. |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/3c.+Designing+a+UI+-+Layout} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Box+Model} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {column} |
| | {section} |
| | If the Application's layout is absolute, each child component must have an x and y coordinate defined otherwise it will be displayed in the 0,0 position. |
| | |
| | The Application container can also be formatted using any of the many style parameters such as backgroundGradientColors and verticalGap. |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | backgroundGradientColors="[#FFFFFF, #FFDE00]" |
| | verticalGap="15" |
| | layout="horizontal"> |
| | |
| | <mx:Image source="assets/animals03.jpg" /> |
| | |
| | <mx:Label text="Photographed by Elsie Weil" |
| | fontSize="15" fontWeight="bold" /> |
| | |
| | </mx:Application> |
| | {code} |
| | |
| | h2. Rendered sample |
| | |
| | | {test-flash:575|275|Use_A_4_Application_Format.swf}Use_A_4_Application_Format{test-flash} |
| | | {test-flash:275|575|Use_A_4_Application_Format.swf}Use_A_4_Application_Format{test-flash} |
| | |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/3c.+Designing+a+UI+-+Layout} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Box+Model} |
