When creating components, you will often want to declare some sort of public API. It is typically advisable that you create properties rather than methods with components. Doing so will allow component properties to be set more naturally within MXML as attributes, because methods are not declaratively called within MXML.

You create a public property in a custom component by creating a getter/setter. For the StatusIcon component, one feature you might want to have is the ability to set the status of the component. The status could be a public property that you can set and whose value you could retrieve. Also, the property should be bindable. To create the property you first declare the getter/setter function and make it bindable via [Bindable] metadata:

public static const STATUS_AVAILABLE:String = "available";
public static const STATUS_BUSY:String = "busy";
public static const STATUS_IDLE:String = "idle";

private var _status:String;
private var statusChanged:Boolean = false;

[Bindable]
public function set status(value:String):void
{
    _status = value;
    statusChanged = true;
    invalidateProperties();
}

public function get status():String
{
    return _status;
}

Next, you will need to update the commitProperties() method to support the new property. You first declare public constant values for the different values that the setter supports. Although ActionScript 3 does not support enumerations, declaring public properties for valid values is a good practice when a setter can accept only a limited set of values. Then you should check for a change in the statusChanged value. If the value evaluates to true, you handle the new status as follows:

override protected function commitProperties():void
{
    //code omitted for brevity

    if(statusChanged)
    {
        statusChanged = false;
        removeChild(currentIcon);

        switch (_status)
        {
            case STATUS_AVAILABLE:
                currentIcon = new IconAvailable();
                break;
            case STATUS_BUSY:
                currentIcon = new IconBusy();
                break;
            case STATUS_IDLE:
                currentIcon = new IconIdle();
                break;
        }
        addChild(currentIcon);
    }
}

With the property added and set to bindable, users can manipulate the value and data-bind to the new property easily.

One other common need may be to dispatch an event whenever the status is changed. You can dispatch events within components using the same techniques we discussed throughout this book. Remember that UIComponent inherits from EventDispatcher, which implements the event system.

To create an event, you first should create a custom event class:

package com.oreilly.programmingflex.events
{
    import flash.events.Event;

    public class StatusChangeEvent extends Event
    {
        public static const STATUS_CHANGE:String = "statusChange";
        public var status:String;

        public function StatusChangeEvent(status:String,bubbles:Boolean = false,
cancelable:Boolean = false)
        {
            super(STATUS_CHANGE,bubbles,cancelable);
            this.status = status;
        }

        public override function clone():Event
        {
            return new StatusChangeEvent(status, bubbles, cancelable );
        }
    }
}

Next, you can dispatch the new event for when the status value is set. Here is the updated status setter function:

[Bindable(event="statusChanged")]
public function set status(value:String):void
{
    _status = value;
    statusChanged = true;
    invalidateProperties();
    dispatchEvent(new StatusChangeEvent(value))
}

When developing custom components, it is a good practice to create events that you think your users may find useful. This helps to promote good application design principles and helps to decouple a component from an application.