The building blocks of Flex user interfaces are MXML containers and controls. A control is a user interface component such as a Button, TextArea, or ComboBox. A container is a rectangular region of the Flash Player drawing surface that you use to organize and lay out controls, other containers, and custom components.

Flex applications typically consist of an MXML application file (a file with an <mx:Application> parent tag), and one or more components defined in separate MXML files, ActionScript files, or Flash component files (SWC files). You can insert containers and controls directly in the MXML application file, or you can insert them in separate MXML files to create custom components and then insert the custom components in the application file.

Generally, it is best to structure the main portions of your application inside Panel containers. Most of the Flex controls were not designed to be used directly on the dark application background.

The following example shows a simple structure for a Flex application. The containers and controls are inserted directly into the MXML application file.

The following example shows a component-based structure for a Flex application. You group the controls of the user-interface elements in separate custom component files, which you then insert into the MXML application file.

A component-based structure is useful when your user interface consists of distinct functional elements. For example, your layout could have an element that retrieves and displays a product catalog, another element that retrieves and displays details about any product that the user clicks in the catalog, and an element that lets the user add the selected product to a shopping cart. This user interface could be structured as three custom components, as in the previous example, or as a mixture of custom components and controls inserted directly into the layout.

For more information about components, see Using Flex Visual Components in the Adobe Flex 3 Developer Guide.