You use Flex Builder to add, size, position, edit, or delete Flex components, as well as custom components defined in separate MXML and ActionScript files.

Add components in MXML Design mode

You add standard Flex containers and controls to your user interface in MXML Design mode. You drag and drop components from the Components view to the Design area of the MXML file and position them according to the layout rule of the container. You can also add custom components that you define in separate MXML and ActionScript files and save in the current project or in the source path of the current project.

1. In the MXML editor's Design mode, open the MXML file in which you want to insert the component.

   An MXML file must be open in Design mode to use the Components view. The MXML file can be the main application file (a file with an Application container) or a custom MXML component file.

2. In the Components view, locate the component that you want to add.

   If the Components view is not open, select Window > Components.

   

   The components are organized by categories in the view.

   The Custom category lists all the custom components that you define in separate MXML and ActionScript files and save in the current project or in the source path of the current project. For example, if you create a component file called EmployeeView.mxml and save it in your project, the EmployeeView component appears in the Custom category. For more information, see Creating Custom MXML Components.

   Note: The Components view lists only visible custom components (components that inherit from the UIComponent class). For more information, see Adobe Flex Language Reference in Help.

3. Drag a component from the Components view into the MXML file.

   The component is positioned in the layout according to the layout rule of the parent container.

   The default layout rule of an Application, Panel, or TitleWindow container can be overridden by specifying a layout="absolute" property. You can then drag and position the component anywhere in the container. If you create an application or a Panel or TitleWindow component file with Flex Builder, the layout="absolute" property is included by default.

Add components in complex layouts

1. Drag a component over to the design area in the layout where you want to insert it, and then press the Control key.
2. Drop the component into the highlighted container, or hover over a different area and press the Control key again to see the target container.

Add components by writing code

You can use code hinting to add standard Flex containers and controls to your user interface. In Flex Builder, as in Eclipse, code hinting is called Content Assist.

1. Open an MXML file in the MXML editor's Source mode.

   The MXML file can be the main application file (a file with an Application container) or a custom MXML component file.

2. Place the insertion point in the parent container tag.

   For example, to insert a VBox container inside an HBox parent container, place the insertion point after the opening <mx:HBox> tag:

   <mx:HBox>
       insertion point here
   </mx:HBox>
   
   

3. Enter the component tag.

   As you enter the tag, a pop-up menu appears suggesting possible entries.

4. If necessary, use the arrow keys to select your tag from the menu, then press Enter.

   

   In addition to the standard Flex components, the pop-up menu lists the custom components you defined in separate MXML and ActionScript files and saved in the current project or in the source path of the current project. For more information, see Creating Custom MXML Components.

Adding Flash components (SWC files)

You can add Flash components (SWC files) to your user interface either visually or by writing code.

1. Ensure that the Flash component is saved in the library path of the current project.

   The library path specifies the location of one or more SWC files that the application links to at compile time. The path is defined in the Flex compiler settings for the project. In new projects the libs folder is on the library path by default.

   To set or learn the library path, select the project in the Flex Navigator view and then select Project > Properties. In the Properties dialog box, select the Flex Build Path category, and then click the Library Path tab. For more information, see Building projects manually.

   The library path can also be defined in the flex-config.xml configuration file in Adobe LiveCycle Data Services ES.

2. Open an MXML file and add a Flash component in one of the following ways:
   • In the MXML editor's Design mode, expand the Custom category of the Components view and drag the Flash component into the MXML file. For documents that are already open, click the Refresh button (the green circling arrows icon) to display the component after you insert it.
   • In Source mode, enter the component tag and then use Content Assist to quickly complete the tag.