You create reusable components by using 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.

Flex components are implemented as a class hierarchy in ActionScript. Each component in your application is an instance of an ActionScript class. The following example shows just a portion of this hierarchy:

All Flex visual components are derived from the ActionScript UIComponent class. To create your own components, you can create a subclass from the UIComponent class or from any of its subclasses.

The class you choose to use as the superclass of your custom component depends on what you are trying to accomplish. For example, you might require a custom button control. You could create a subclass of the UIComponent class, and then recreate all of the functionality built into the Flex Button class. A better and faster way to create your custom button component is to create a subclass of the Flex Button class, and then modify it in your custom class.

Simple components are subclasses of existing Flex components that modify the behavior of the component, or add new functionality to it. For example, you might add a new event type to a Button control, or modify the default styles or skins of a DataGrid control.

You can also create advanced ActionScript components. Advanced ActionScript components might have one of the following requirements:

• Modify the appearance of a control or the layout functionality of a container
• Encapsulate one or more components into a composite component
• Subclass UIComponent to create components

For information on creating advanced ActionScript components, see Advanced Visual Components in ActionScript.

Example: Creating a simple component

When you define a simple component, you do not create a component yourself, but instead modify the behavior of an existing component. In this section, you create a customized TextArea control by extending the mx.controls.TextArea component. This component adds an event listener for the keyDown event to the TextArea control. The KeyDown event deletes all the text in the control when a user presses the Control+Z key combination.

package myComponents
{
    // as/myComponents/DeleteTextArea.as
    import mx.controls.TextArea;
    import flash.events.KeyboardEvent;
        
    public class DeleteTextArea extends TextArea {
        
        // Constructor
        public function DeleteTextArea() {
            // Call super().
            super();

            // Add event listener for keyDown event.
            addEventListener("keyDown", myKeyDown);     
        }       

        // Define private keyDown event handler.
        private function myKeyDown(eventObj:KeyboardEvent):void {   
            // Check to see if Ctrl-Z pressed. Keycode for Z is 90.         
            if (eventObj.ctrlKey && eventObj.keyCode == 90) 
                text = ""; 
        }
    }
}

The filename for this component is DeleteTextArea.as, and its location is the myComponents subdirectory of the application, as specified by the package statement. For more information on using the package statement and specifying the directory location of your components, see Custom ActionScript Components.

You can now use your new TextArea control in an application, as the following example shows:

<?xml version="1.0"?> 
<!-- as/MainDeleteTextArea.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">
  
    <MyComp:DeleteTextArea/>
  
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you first define the MyComp namespace to specify the location of your custom component. You then reference the component as an MXML tag by using the namespace prefix.

You can specify any inherited properties of the superclass in MXML, as the following example shows:

<?xml version="1.0"?> 
<!-- as/MainDeleteTextAreaProps.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">
  
    <MyComp:DeleteTextArea wordWrap="true" text="My Message"/>
  
</mx:Application>
The executing SWF file for the previous example is shown below:

You do not have to change the name of your custom component when you create a subclass of a Flex class. In the previous example, you could have named your custom component TextArea, and written it to the TextArea.as file in the myComponents directory, as the following example shows:

package myComponents
{
    import mx.controls.TextArea;
    import flash.events.KeyboardEvent;
        
    public class TextArea extends mx.controls.TextArea {
        ...
    }
}

You can now use your custom TextArea control, and the standard TextArea control, in an application. To differentiate between the two controls, you use the namespace prefix, as the following example shows:

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*" >
    <MyComp:TextArea/>
    <mx:TextArea/>
</mx:Application>