Programming Flex 3

Component Implementation

Now that you have a good understanding of the component life cycle, we will discuss how to implement a component.

Throughout this chapter, you will develop a custom instant messenger status icon component (StatusIcon) that uses many of the features of the component framework. Figure 19-4 shows the finished component.

Figure 19-4. Finished StatusIcon component

StatusIcon allows the user to set a name, status (available, busy, idle), and font color. It also should automatically resize to display the entire name and let the user data-bind to the value of the username, dispatch an event when the status is changed, and set icons for the different statuses.

Implementing the Constructor

The first step in building a component is to decide on the base class and constructor. For this component, we will use UIComponent. The UIComponent class gives us a basic implementation for writing a custom component and allows us to build on top of it as we please. Here are the beginnings of the component:

package com.oreilly.programmingflex.controls
{
    import mx.core.UIComponent;

    public class StatusIcon extends UIComponent
    {
        public function StatusIcon()
        {
            super();
        }
    }
}

Note

In this chapter, you'll develope custom components using ActionScript. Although it's possible to build the same components in MXML, you will find that for custom components, you'll often opt to use ActionScript.

In this ...