Professional Adobe® Flex® 3

Chapter 16. Custom ActionScript Components

Every Flex application is filled with components. Any time you use an MXML tag, you are using a component. MXML tags are ActionScript classes (although you will see in the next chapter how you can write custom components in MXML, too).

Suppose that you want your company's logo to appear in a number of places within your application. Perhaps the logo appears on every pop-up in the upper-left corner. The easiest way to make that happen is to create a custom component that draws or shows your company's logo and then place that component into every pop-up.

The process of creating custom components follows a formula based on the Flex framework life cycle. Success at writing components comes from understanding how Flex components come into being and how they operate while the application is running.

The following steps, illustrated with a couple of examples, are the blueprint for writing components entirely in ActionScript.

• Instantiation — An instance of a component class (for example, mx.controls.Button) is created, using the ActionScript new operator.

• Setting properties — The component instance has its properties set. For example, if you have the tag, <mx:Button label="Submit" />, the Button's label property is set with the string, "Submit."

• Creating child components — The component instance may have parts that are used to make the component work. The RichTextEditor is a good example of this, where the RichTextEditor, a subclass of Panel, has Button ...