Creating ActionScript components

You can create reusable components that use ActionScript and reference these components in your Flex applications as MXML tags. Components created in ActionScript can contain graphical elements, define custom business logic, or extend existing Flex components. They can inherit from any components available in Flex.

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

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

For example, you can define a custom button, derived from the Button control, in the myControls package, as the following example shows:

package myControls { 
    import mx.controls.Button;
    public class MyButton extends Button {
        public function MyButton() {
            ...
        }
        ...
    }
}

In this example, you write your MyButton control to the MyButton.as file, and you store the file in the myControls subdirectory of the root directory of your Flex application. The fully qualified class name of your component reflects its location. In this example, the component's fully qualified class name is myControls.MyButton.

You can reference your custom Button control from a Flex application file, such as MyApp.mxml, as the following example shows:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cmp="myControls.*">
    <cmp:MyButton label="Jack"/>
</mx:Application>

In this example, you define the cmp namespace that defines the location of your custom component in the application's directory structure. You then reference the component as an MXML tag using the namespace prefix.

Typically, you put custom ActionScript components in directories that are in the source path. These include any directory that you specify in the <source-path> tag in the flex-config.xml file.

You can also create custom components using MXML. For more information, see Creating and Extending Adobe Flex 3 Components.

Types of custom components

You can create the following types of components in ActionScript:

User-interface components

User-interface components contain both processing logic and visual elements. These components usually extend the Flex component hierarchy. You can extend from the UIComponent classes, or any of the Flex components, such as Button, ComboBox, or DataGrid. Your custom ActionScript component inherits all of the public methods, along with public and protected properties of its base class.

Nonvisual components

Nonvisual components define no visual elements. A nonvisual component is an ActionScript class that does not extend the UIComponent class. They can provide greater efficiency at run time.

Adobe Flex 3 Help

Creating ActionScript components