| | {section} |
| | {column:width=80%} |
| | |
| | h2. Designing a UI - Layout |
| | *Subtopics:* |
| | | [Application container | http://learn.adobe.com/wiki/display/Flex/Application+Container] |
| | [Box model | http://learn.adobe.com/wiki/display/Flex/Box+Model] |
| | [Canvas - absolute | http://learn.adobe.com/wiki/display/Flex/Canvas+-+absolute] |
| | [Canvas - relative | http://learn.adobe.com/wiki/display/Flex/Canvas+-+relative] |
| | [Combined layout | http://learn.adobe.com/wiki/display/Flex/Combined+Layout] |
| | [Form | http://learn.adobe.com/wiki/display/Flex/Form] |
| | [MXML vs. ActionScript 3.0 | http://learn.adobe.com/wiki/display/Flex/MXML+vs+ActionScript+3.0] |
| | [Panel | http://learn.adobe.com/wiki/display/Flex/Panel] |
| | | * [Application container | http://learn.adobe.com/wiki/display/Flex/Application+Container] |
| | * [Box model | http://learn.adobe.com/wiki/display/Flex/Box+Model] |
| | * [Canvas - absolute | http://learn.adobe.com/wiki/display/Flex/Canvas+-+absolute] |
| | * [Canvas - relative | http://learn.adobe.com/wiki/display/Flex/Canvas+-+relative] |
| | * [Combined layout | http://learn.adobe.com/wiki/display/Flex/Combined+Layout] |
| | * [Form | http://learn.adobe.com/wiki/display/Flex/Form] |
| | * [MXML vs. ActionScript 3.0 | http://learn.adobe.com/wiki/display/Flex/MXML+vs+ActionScript+3.0] |
| | * [Panel | http://learn.adobe.com/wiki/display/Flex/Panel] |
| | |
| | In this section, you will learn how to use Flex's built-in MXML components and containers as well as ActionScript 3.0 to layout your application. |
| | * *Components* (also called controls) are interface widgets that are either part of the Flex framework or are created using ActionScript 3.0. Examples include: Button, TextInput and Label |
| | ** You'll mostly use the built-in components and containers, but you can build your own. |
| | ** The language to use for most layout purposes is MXML. |
| | ** Use ActionScript 3.0 for custom components or specialized behavior |
| | ** Make use of the Flex Component Explorer application to see what the components do as well as view code code samples. |
| | * *Containers* are layout classes that position the interface widgets or data in the application. Examples includes: Application, VBox, Canvas |
| | ** Use Flex Builder's design view to lay out child components. |
| | ** Containers provide a hierarchical structure that lets you control the layout characteristics of child components. |
| | ** There are two types of containers: layout and navigator. |
| | ** Components defined within a container are called _children_ of the container. |
| | ** At the root of a Flex application is a single container, called the Application container |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Simple+UI+Event} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Application+Container} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {adbe-pod} |
| | |
| | h6. Learn more |
| | |
| | * What is the {adbe-popup:http://livedocs.adobe.com/flex/3/html/05_Display_Programming_02.html}display list?{adbe-popup} |
| | * Read the {adbe-popup:http://www.adobe.com/devnet/flex/}Flex Interface Guide{adbe-popup} |
| | * {adbe-popup:http://www.onflex.org/ted/2007/09/flex-3-beta-2-design-tools-learning.php}Flex 3 - Design Tools{adbe-popup} |
| | * {adbe-popup:http://www.adobe.com/devnet/flex/quickstart/layout_modes/}Positioning and laying out Flex components{adbe-popup} |
| | * {adbe-popup:http://www.adobe.com/devnet/flex/articles/architecture_print.html}Architecting Flex Applications{adbe-popup} |
| | * {adbe-popup:http://developer.yahoo.com/flash/articles/flex-layout.html}How to Use Flex Layout{adbe-popup} |
| | {adbe-pod} |
| | {column} |
| | {section} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Simple+UI+Event} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Application+Container} |
