Base class for custom components

Question

In my flex app I have various custom components done with mxml or actionscript. I want all of them to extend a base-class where I can define properties/event listeners etc. Can someone give me an example how to create that base class and how I can extend it in mxml and actionscript components?

Answer 1

In the example below the component extends Form to create an address form .

Instead of form you can extend your own component .

When using actionscript i would suggest investigating flex components lifecycle for best performance : http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html

mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="*"

<mx:FormItem label="NameField">
    <mx:TextInput/>
</mx:FormItem>

<mx:FormItem label="Street">
    <mx:TextInput/>
</mx:FormItem>

<mx:FormItem label="City" > 
    <mx:TextInput/>
</mx:FormItem>

<mx:FormItem label="State" > 
    <MyComp:StateComboBox/>
</mx:FormItem>

The following application file references the AddressForm component in the

AddressForm tag:

mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="*"

<MyComp:AddressForm/>

/mx:Application

from http://livedocs.adobe.com/flex/3/html/help.html?content=mxmlcomponents_1.html

Answer 2

Creating the base class:

ActionScript

In BaseClass.as:

public class BaseClass
{
}

Extending from the base class:

ActionScript

public class SubClass extends BaseClass
{
}

MXML

In a file called SubClass.mxml:

<ns:BaseClass xmlns:ns="path.to.base.*">
</ns:BaseClass>

Answer 3

Maybe you could write a common interface for your components, just with the methods they need to implement

public interface ICustomComponent {

    function doSomething():void; 

    // more methods here

}

And then in your AS components you just implement the ICustomComponent interface (or however you named it)

public class CustomButton extends Button implements ICustomComponent {

    public function doSomething():void {

    }
}

You can do this in MXML components too :

<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="ICustomComponent">

    <mx:Script>
        <![CDATA[

            public function doSomething():void {
                // blah blah
            }               

        ]]>      
    </mx:Script>

</mx:Button>

Just an idea. Hope it helps Cheers