Defining your own custom components has several benefits. One advantage is that components let you divide your applications into modules that you can develop and maintain separately. By implementing commonly used logic within custom components, you can also build a suite of reusable components that you can share among multiple Flex applications.

Also, you can extend the Flex class hierarchy to base your custom components on the set of predefined Flex components. You can create custom versions of Flex visual controls, as well as custom versions of nonvisual components, such as validators, formatters, and effects.

You can build an entire Flex application in a single MXML file that contains both your MXML code and any supporting ActionScript code. As your application gets larger, your single file also grows in size and complexity. This type of application would soon become difficult to understand and debug, and very difficult for multiple developers to work on simultaneously.

Using modules in application development

A common coding practice is to divide an application into functional units, or modules, where each module performs a discrete task. Dividing your application into modules provides you with many benefits, including the following:

Ease of development 

Different developers or development groups can develop and debug modules independently of each other.

Reusability 

You can reuse modules in different applications so that you do not have to duplicate your work.

Maintainability 

By developing your application in discrete modules, you can isolate and debug errors faster than you could if you developed your application in a single file.

In Flex, a module corresponds to a custom component, implemented either in MXML or in ActionScript. The following image shows an example of a Flex application divided into components:

This example shows the following relationships among the components:

• You define a main MXML file that contains the <mx:Application> tag.
• In your main MXML file, you define an ActionScript block that uses the <mx:Script> tag. Inside the ActionScript block, you write ActionScript code, or include external logic defined by an ActionScript file. Typically, you use this area to write small amounts of ActionScript code. If you must write large amounts of ActionScript code, you should include an external file.
• The main MXML file uses MXML and ActionScript to reference components supplied with Flex, and to reference your custom components.
• Custom components can reference other custom components.

The Flex class hierarchy

Flex is implemented as an ActionScript class hierarchy. That class hierarchy contains component classes, manager classes, data-service classes, and classes for all other Flex features. The following example shows a portion of the class hierarchy for the Flex visual components, such as controls and containers:

All visual components are derived from the UIComponent ActionScript class. Flex nonvisual components are also implemented as a class hierarchy in ActionScript. The most commonly used nonvisual classes are the Validator, Formatter, and Effect base classes.

You create custom components by extending the Flex class hierarchy using the MXML and ActionScript languages. Components inherit the properties, methods, events, styles, and effects of their superclasses.

Customizing existing Flex components

One reason for you to create a component is to customize an existing Flex component for your application requirements. This customization could be as simple as setting the label property of a Button control to Submit to create a custom button for all of your forms.

You might also want to modify the behavior of a Flex component. For example, a VBox container lays out its children from the top of the container to the bottom in the order in which you define the children within the container. Instead, you might want to customize the VBox container to lay out its children from bottom to top.

Another reason to customize a Flex component is to add logic or behavior to it. For example, you might want to modify the TextInput control so that it supports a key combination to delete all the text entered into the control. Or, you might want to modify a component so that it dispatches a new event type when a user carries out an action.

To create your own components, you create subclasses from the UIComponent class, or any other class in the Flex component hierarchy. For example, if you want to create a component that behaves almost the same as a Button component does, you can extend the Button class instead of recreating all the functionality of the Button class from the base classes.

Depending on the modifications that you want to make, you can create a subclass of a Flex component in MXML or ActionScript.

The relationship between MXML components and ActionScript components

To create a custom component in ActionScript, you create a subclass from a class in the Flex class hierarchy. The name of your class (for example, MyASButton), must correspond to the name of the ActionScript file; for example, MyASButton.as. The subclass inherits all of the properties and methods of the superclass. In this example, you use the <MyASButton> tag to reference it in MXML.

When you create a custom component in MXML, the Flex compiler automatically creates an ActionScript class. The name of the MXML file (for example, MyMXMLButton.mxml) corresponds to the ActionScript class name. In this example, the ActionScript class is named MyMXMLButton, and you use the <MyMXMLButton> tag to reference it in MXML.

The following example shows two components based on the Flex Button component, one defined in ActionScript and the other in MXML:

Both implementations create a component as a subclass of the Button class and, therefore, inherit all of the public and protected properties, methods, and other elements of the Button class. Within each implementation, you can override inherited items, define new items, and add your custom logic.

However, when you use MXML, the Flex compiler performs most of the overhead required to create a subclass of a component for you. This makes it much easier to create components in MXML than in ActionScript.

Deciding to create components in MXML or ActionScript

One of the first decisions that you must make when creating custom components is deciding whether to write them in MXML or in ActionScript. Ultimately, it is the requirements of your application that determine how you develop your custom component.

Some basic guidelines include the following:

• MXML components and ActionScript components both define new ActionScript classes.
• Almost anything that you can do in a custom ActionScript custom component, you can also do in a custom MXML component. However, for simple components, such as components that modify the behavior of an existing component or add a basic feature to an existing component, it is simpler and faster to create them in MXML.
• When your new component is a composite component that contains other components, and you can express the positions and sizes of those other components using one of the Flex layout containers, you should use MXML to define your component.
• To modify the behavior of the component, such as the way a container lays out its children, use ActionScript.
• To create a visual component by creating a subclass from UIComponent, use ActionScript.
• To create a nonvisual component, such as a formatter, validator, or effect, use ActionScript.
• To add logging support to your control, use ActionScript. For more information, see Logging.

For more information on custom MXML components, see Simple MXML Components. For more information on ActionScript components, see Simple Visual Components in ActionScript.

Creating new components

Your application might require you to create components, rather than modifying existing ones. To create components, you typically create them in ActionScript by creating a subclass from the UIComponent class. This class contains the generic functionality of all Flex components. You then add the required functionality to your new component to meet your application requirements.

For more information, see Advanced Visual Components in ActionScript.