1.5. Extending Flex

The Flex framework is a feature-rich and robust framework for enterprise RIA development and is often sufficient off the shelf for many simple development tasks. However, it also derives power from the fact that it can be extended and customized with ease.

1.5.1. Creating Custom Components

Creating custom components is likely to be one of the most frequent tasks you will indulge in the moment you start building complex and enterprise-grade RIAs. Sometimes, the motivation behind custom component development is to create reusable pieces of code for productivity enhancements and sometimes it is for feature enhancement and modified component behavior.

The simplest use case for custom components is the aggregation of specific components at one place or the aggregation of certain component types and data. For example, you may see benefit in creating a component that includes a ComboBox that has East, West, and Central as its values. Such a custom ComboBox could be used readily in sales and marketing applications that classify data by regions within the United States. The code for this kind of a ComboBox would be as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="0xFFFFFF">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var regions:ArrayCollection = new ArrayCollection(
                [ {label:"East", data:1},
                  {label:"West", data:2},
                  {label:"Central", data:3} ]);

        ]]>
    </mx:Script>
    <mx:ComboBox dataProvider="{regions}" width="250"/>

</mx:Application>

Another use case is to create a reusable contact form that validates email addresses and makes sure that the name field is mandatorily filled in. There are many more uses like this.

Sometimes it may make sense to add new features to existing components and use AS3 to extend the control classes. One such case is to extend the Button class and add a property to keep count of the number of times a button has been clicked. The code for such a custom button is:

package as3classes
{
        import mx.controls.Button;

        public class ButtonWithClickCount extends Button
        {
               public function ButtonWithClickCount()
               {
                   super();
               }

               [Bindable]
               private var _clickCount:int=0;

               public function set clickCount(value:int):void {
                   clickCount = value;
               }

               public function get clickCount():int {
                   return clickCount;
               }
        }
}

If extending an existing control does not get the job done, then a control could be written from scratch by extending the UIComponent class. You could also use and learn from the many open source custom components available online. The flexlib project is such a collection (http://code.google.com/p/flexlib).

In addition to aggregating and extending components, custom events can be added and propagated.

1.5.2. Creating and Propagating Custom Events

Events are the primary drivers of interactivity in a Flex application. All Flex controls dispatch events at various points of user interaction. Event handlers act on these triggers and respond to user inputs. In addition to the standard events, the framework also allows for the creation and dispatching of custom events.

Custom events can be created as follows:

package as3classes
{
       import flash.events.Event;

        public class CustomEvent extends Event
        {
            public function CustomEvent(type:String,
                bubbles:Boolean=false, cancelable:Boolean=false)
            {
                super(type, bubbles, cancelable);
            }

        public static const CUSTOM_EVENT:String = "customEvent";
    }
}

Then this custom event can be instantiated like this:

new Event(CustomEvent.CUSTOM_EVENT)

Such instantiation also ensures type checking. Events, both standard and custom, can be dispatched and propagated using the dispatchEvent method. This is all as far as the bare essentials of custom events are concerned. Since discussion of custom events is an advanced topic, the current coverage will suffice.

By now you are well versed in the essentials of the Flex framework. I am sure you are enthused to learn more and are maybe disappointed by the brief coverage of many topics that may have intrigued your interest. Our focus is on integration, and as we explore that thoroughly in the many chapters to come, you will continue to learn bits of Flex. However, if Flex itself is something you want to sharpen your skills on, then you are better off reading one of the books specifically on that topic and browsing through the Adobe Flex language reference, which is available at http://livedocs.adobe.com/flex/3/langref.