Adding Flex Components To The User Interface - MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

For more information, see "Introducing Containers" and "Using Layout Containers" in
Developing Flex Applications Help.
Related topics
•
"Repositioning Flex components" on page 99
•
"Resizing Flex components" on page 100
•
"Cutting, copying, and pasting Flex components" on page 100

Adding Flex components to the user interface

You can visually add MXML controls and Flash components to your user interface. Your ability
to position them depends on the layout management rules of the container. For example, if you
drag a control into a VBox container, the control will snap into a position above or below the
other controls in the container. However, if you drag a control into a Canvas container, which has
absolute positioning, you can position it anywhere in the container. For more information on a
container's layout management rules, see "Using Layout Containers" in Developing Flex
Applications Help.
To add a component to your user interface:
Make sure the active file is an MXML file.
1.
Components can only be inserted in MXML files.
In Design view (View > Design View), drag the component from the Insert bar to a container
2.
in the file.
The insertion point (the cursor) changes depending on the layout management rules of the
container:
If you drag a component into a container with automatic positioning (such as an
Application or Form container), a line appears to indicate where the component will be
positioned.
If you drag a component into a Canvas container, which has absolute positioning, a cross-
hair appears to indicate where the component will be positioned. Alignment guides appear
as well to help you with positioning. When you release the mouse button, the component is
inserted with its upper left corner positioned on the cross-hair.
You can also click inside the container first, and then select the component from the Insert bar or
Insert menu. Flex Builder inserts the component at the insertion point in the container. If you
can't easily click inside a container to insert the control, click the Expanded button on the
Document toolbar to add padding around the container. For more information, see
"Customizing the Document window" on page
Related topics
•
"Inserting controls and containers in an MXML file" on page 117
•
"Laying out your user interface with MXML containers" on page
•
"Repositioning Flex components" on page 99
•
"Resizing Flex components" on page 100
•
"Cutting, copying, and pasting Flex components" on page 100
98 Chapter 4: Building a Flex User Interface Visually
96.
97.