About the structure of Flex user interfaces

The Adobe Flex framework is a component-based system for building rich Internet applications. A Flex application typically consists 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).

Flex gives you several options for structuring your user interface. 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.

TIP

 

Generally, it's 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.


Structure of a simple Flex application

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.


Component-based Flex application

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.

Related topics


Flex 2.01

Take a survey