How can I extend a Flex component that is not a container (RadioButton, for example)?

Question

I want to extend the RadioButton component in Flex 3, adding a text input line to it in place of the label. Is it possible to do this?

Alternately, is it possible to have a container -- such as an HBox -- delegate all properties to an internal component -- such as a RadioButton -- so that I could create a composite component that 'acts like' a radio button?

Answer 1

If you extend the RadioButton class in an Actionscript class, (rather than an mxml file - is there a better way of saying that?), you should be able to add a text input, ie:

package components
{
    import mx.controls.RadioButton;

    public class Test extends RadioButton
    {
     public function Test()
     {
      super();
     }

    }
}

You might find this - http://www.adobe.com/devnet/flex/quickstart/building_components_in_as/ of help, particularly the section titled creating composite actionscript components. If this is your first custom component, you'll also probably want to read up on the Flex Component Lifecycle (http://weblog.mrinalwadhwa.com/2009/02/17/understanding-the-flex-component-lifecycle/ - although i can never find a good link for that stuff). The flex component lifecycle is a bit complex and you'll want to make sure you understand it so your component isn't needlessly redrawing things constantly.

You'll want to add the textInput in the create children function, the textField itself is created in Button's (which RadioButton subclasses) createChildren() method.

/**
 *  @private
 */
override protected function createChildren():void
{
    super.createChildren();

    // Create a UITextField to display the label.
    if (!textField)
    {
        textField = IUITextField(createInFontContext(UITextField));
        textField.styleName = this;
        addChild(DisplayObject(textField));
    }

}