Macromedia flex builder-using flex builder User Manual
Laying out your user interface with MXML containers
97
•
If you’re tweaking a layout, try working in Design view in Standard mode.
This environment provides the highest possible fidelity for your layout (short of compiling and
running the file). As such, the environment is well-suited for fine-tuning an MXML layout.
You can make small modifications to the size and position of elements by using a combination
of the mouse and the Tag inspector. You can select a nested component by clicking its tag in
the tag selector at the bottom of the page.
running the file). As such, the environment is well-suited for fine-tuning an MXML layout.
You can make small modifications to the size and position of elements by using a combination
of the mouse and the Tag inspector. You can select a nested component by clicking its tag in
the tag selector at the bottom of the page.
Laying out your user interface with MXML containers
You can use MXML containers to lay out the user interface of your Flex application, and then
insert controls in the containers.
insert controls in the containers.
To create a layout with MXML containers:
1.
Create an MXML application file by selecting File > New and double-clicking
MXML:Application in the New Document dialog box.
MXML:Application in the New Document dialog box.
Flex Builder creates a file that contains an
<mx:Application>
tag. This is the parent tag of all
MXML applications. All MXML elements, controls, containers, and components ultimately
reside in this tag.
reside in this tag.
2.
If you want, change the default size of the Application container by clicking it and dragging a
resize handle, or by clicking it and changing its width and height properties in the Attributes
panel of Tag inspector (Window > Tag Inspector).
resize handle, or by clicking it and changing its width and height properties in the Attributes
panel of Tag inspector (Window > Tag Inspector).
3.
If you want, drag other MXML containers from the Insert bar into the Application container.
Flex Builder inserts a graphical representation of each container vertically, starting in the upper
left corner of the Application container. The Application container automatically arranges
controls and containers in a vertical column.
left corner of the Application container. The Application container automatically arranges
controls and containers in a vertical column.
4.
If you want, remove the padding and border Flex Builder adds to containers by clicking the
Standard button on the Document toolbar.
Standard button on the Document toolbar.
By default, Flex Builder adds borders and padding around containers to help you manipulate
them at design time. The padding and border are not visible at runtime. For more
information, see
them at design time. The padding and border are not visible at runtime. For more
information, see
.
The following are some useful containers and their layout management rules:
VBox
automatically arranges components in a single column that stretches vertically to fit the
components.
HBox
automatically arranges components in a single row that stretches horizontally to fit the
components.
Canvas
supports absolute positioning. Similar to the Stage in Macromedia Flash, you can drag
and position components anywhere in this container.
Accordion
organizes information in a series of child panels, where one panel is active at any time.
Grid
is similar to an HTML table tag. You can use the GridRow and GridItem containers
together with the
rowSpan
and
colSpan
properties to specify the number of rows and grid cells.