Chapter 13. Layout Strategies
This chapter covers the many ways you can position Flex components. Once you have chosen the components you need, you have to place them on the page. Flex offers a variety of ways to do that, from using explicit coordinates to alignment relative to other components. Flex comes with a set of container components to help you lay out your application. Some containers help you align your components, whereas others let you position them as you see fit. Keeping in mind the nesting nature of Flex, you'll find that the container components (e.g., Canvas, VBox
) can be placed inside of each other for more complex layouts.
Coordinate Positioning
The simplest way to position a component is to use (x,y) coordinates. All Flex components have x and y properties. The container determines if these properties will be honored, so you need to either use a Canvas
container or set the layout
property of Panel, Application
, or TitleWindow
to "absolute" when you want to use (x,y) positioning.
Here is an example of placing a TextInput
and a Label
, using their x and y properties:
<mx:Panel layout="absolute"> <mx:Label text="Your Name:" x="10" y="25" /> <mx:TextInput x="70" y="25" /> </mx:Panel>
Coordinate positioning is fine for a small number of components. It is also best done using Flex Builder's Design View because you can drag the components to position them. When the number of components increases, it becomes time-consuming to reposition them to change the layout. Flex has ...
Get Professional Adobe® Flex® 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.