This section provides a brief overview of how to create reusable components using ActionScript. Later in this book, you will build more complex components using MXML and ActionScript.
Custom components can contain graphical elements, define some kind of business logic, or extend existing components in the Flex framework. Defining your own components in ActionScript has several advantages:
-
Divide your application into individual models that can be developed and maintained separately.
-
Implement commonly used logic within the components.
-
Build a collection of components that can be reused among all your Flex applications.
When creating custom components, you may find it useful to extend the component from the Flex class hierarchy. This allows you to inherit functionality already built into the Flex components.
As shown in the following example, you can define a custom TextInput and derive it from the Flex TextInput control:
package myComponents { public class MyTextInput extends TextInput { public function MyTextInput() { ... } ... } }
The filename of the control MyTextInput must be in a filename called MyTextInput.as and stored at the root of your Flex application in a subdirectory name myComponents. As you may have already picked up, the package name reflects the location of the component, myComponents.
To use the custom component in your Flex application, you will need to write the following MXML:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="myComponents.*" > <components:MyTextInput label="Adobe Flex 2"/> </mx:Application>
The code xmlns:components=”myComponents.*” defines a namespace called components that points to the subdirectory myComponents. You can then reference the component as an MXML tag using the namespace prefix.
