Where to begin with 'composite component'?

Question

Hi everyone.  I'm having a hard time understanding how to build a basic composite component.  There is some online documentation on this, but for some reason, I just cannot follow it.  Honestly, I'm not trying to get someone here to do my work for me, but I'm hoping that if described a very simplified version of what I need to do, that someone could show me how to do it through code.
Here's what I'm essentially trying to do (build a control that is a combobox with a button on the side of it):
<hbox>
     <combobox/>
     <button/>
</hbox>
Doing something like above is easy enough.  But what I really need is for the root control to be a combobox so that all properties and events of the combobox are available to its owner without me having to re-implment/proxy all of them.
Hopefully this will illustrate the concept:
<combobox>
     <button/>
</combobox>
I see from the doc that I need an AS class and have to override updateDisplayList, createChildren, etc.  But for some reason, I just cannot understand the doc enough to do something even this simple.  I think if someone showed me how to do this example, then it would be a good starting point for me to go back to the doc and hopefully it'll make more sense!
Thanks in advance!

Answer 1

I think the o.p is loking for an example of composition that starts by extending some component like ComboBox, and then adds another control to it.  the benefit of this is that the new control can be treated as  a ComboBox, with all of its functionality.  Here is an example.  You will need to find your own image to use for the button, or change it to a regular button.
Test application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="*"
    layout="absolute"
    creationComplete="init()" >
<mx:Script><![CDATA[
  import mx.collections.ArrayCollection;
  import mx.controls.Alert;
  [Bindable]private var _acDP:ArrayCollection;
  public function init():void
    _acDP = new ArrayCollection([{label:"one", value:1},{label:"two", value:2},{label:"three", value:3}])
  private function onButtonClick(event:Event):void
    Alert.show(ComboButton(event.currentTarget).selectedLabel);
]]></mx:Script>    
<ComboButton dataProvider="{_acDP}" labelField="label" comboButtonClick="onButtonClick(event)" />
</mx:Application>
ComboButton.as
package
  import flash.events.Event;
  import flash.events.MouseEvent;
  import mx.controls.ComboBox;
  import mx.controls.Image;
  [Event(name="comboButtonClick", type="flash.events.Event")]
  public class ComboButton extends ComboBox
    [Embed(source="assets/help.gif")]
    private var buttonImage:Class;
    private var _imgButton:Image;
    //Constructor
    public function ComboButton()
     super();
    /** instantiates the button and adds it to the displaylist */
    override protected function createChildren():void
      super.createChildren();                // Call to the superclass for necessary processing.
      if(!_imgButton) {                       // Create the button component.
        _imgButton = new Image();
        _imgButton.source = buttonImage;
        _imgButton.toolTip = "Click Me";
        _imgButton.addEventListener(MouseEvent.CLICK, onClickButton);
        addChild(_imgButton);
    /** Positions and sizes the image button */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      super.updateDisplayList(unscaledWidth, unscaledHeight);
        var buttonHeight:Number =  unscaledHeight;
        var buttonWidth:Number = buttonHeight; 
        var nbuttonX:Number = unscaledWidth + 5;
        var nbuttonY:Number = 0;
        _imgButton.height = buttonHeight;
        _imgButton.width = buttonWidth;
        _imgButton.move(nbuttonX, nbuttonY);
    }//updateDisplayList 
    /** dispatches event on button click */
    private function onClickButton(event:MouseEvent):void
      dispatchEvent( new Event("comboButtonClick", false));
  }//public class ComboButton
}//package
Tracy Spratt