Professional Adobe® Flex® 3

Chapter 18. Extending Flex Components

The previous chapters provide a taste for how components can be made. This chapter takes a more in-depth look at component development by extending existing Flex components and creating custom container components.

A Look at Composite Components

Perhaps the best example of a composite component is the Flex RichTextEditor control. This control is made up of existing Flex controls — it does not extend UIComponent but rather mx.containers.Panel. The RichTextEditor uses TextArea, ButtonBars, TextInput, and other existing controls to form a new component. This is a composite control.

One of the challenges of a composite control is making it behave seamlessly. For example, the RichTextEditor has both a text and an htmlText property. These properties are not normal for a Panel (the base class for RichTextEditor); they are properties of the TextArea child. You could imagine the designer of the control instructing you to use the RichTextEditor like this:

<mx:RichTextEditor id="rte" />
...
rte.textArea.htmlText = "Hello";

But this syntax has several drawbacks:

• First, you would not be able to access the TextArea child's text property from MXML and use data binding.

• Second, the developer of the control might choose to rename the TextArea child from "textArea" to something else; then your code would no longer work.

The way to set the text of a RichTextEditor control is to use its text or htmlText property, for example:

<mx:RichTextEditor id="rte" htmlText="{data.description}" ...