Creating ActionScript components -- Flex 2.01

You create ActionScript components by defining ActionScript classes. You can create the following types of components in ActionScript:

User-interface, or visual, components User-interface components contain both processing logic and visual elements. You create custom user-interface components to modify existing behavior or add new functionality to the component. These components usually extend the Flex component hierarchy. You can extend from the UIComponent class, or any of the Flex components, such as Button, ComboBox, or DataGrid. Your custom ActionScript component inherits all of the methods, properties, events, styles, and effects of its superclass.

Nonvisual components Nonvisual components define nonvisual elements. Flex includes several types of nonvisual components that you can create, including formatters, validators, and effects. You create nonvisual components by creating a subclass from the Flex component hierarchy. For validators, you create subclasses of the Validator class; for formatters you create subclasses of the Formatter class; and for effects, you create subclasses of the Effect class.

For example, you can define a custom button component based on the Flex Button class, as the following example shows:

package myComponents
{
    // intro/myComponents/MyButton.as
    import mx.controls.Button;

    public class MyButton extends Button {
    
        // Define the constructor. 
        public function MyButton() {
            // Call the constructor in the superclass. 
            super();
            // Set the label property to "Submit".
            label="Submit";
        }
    }
}

You must define your custom components within an ActionScript package. The package reflects the directory location of your component in the directory structure of your application. Typically, you put custom ActionScript components in directories that are in the ActionScript classpath, subdirectories of your application, or for Flex Data Services, in the WEB-INF/flex/user_classes directory. In this example, the package statement specifies that the MyButton.as file is in the myComponents subdirectory of your Flex application.

In the MXML file that references the custom component, you define the namespace and reference it in an MXML file as the following example shows:

<?xml version="1.0"?>
<!-- MyApplicationASComponent.mxml -->

<!-- Include the namespace definition for your custom components. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <!-- Use the filename as the MXML tag name. -->
    <MyComp:MyButton/>

</mx:Application>

In this example, you first define the MyComp namespace that specifies 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.