98
Chapter 4: Building a Flex User Interface Visually
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:
1.
Make sure the active file is an MXML file.
Components can only be inserted in MXML files.
2.
In Design view (View > Design View), drag the component from the Insert bar to a container
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 96
.
Related topics
•
“Inserting controls and containers in an MXML file” on page 117
•
“Laying out your user interface with MXML containers” on page 97
.
•
“Repositioning Flex components” on page 99
•
“Resizing Flex components” on page 100
•
“Cutting, copying, and pasting Flex components” on page 100
Summary of Contents for FLEX BUILDER-USING FLEX BUILDER
Page 1: ...Using Flex Builder...
Page 116: ...116 Chapter 4 Building a Flex User Interface Visually...
Page 144: ...144 Chapter 6 Working with Data...
Page 154: ...154 Appendix A Basic Flex Concepts...
