Macromedia flex 2 Manual

16

Creating Flex Components

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 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.