Custom Button Component, addChild adds behind button style

Question

Hello,
I'm making a custom button with a brandinglogo on it. The branding logo is an mc that changes logo depending on the area of the user.
<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" styleName="branding" addedToStage="addBranding()">
     <mx:Style source="styles/styles.css"/>
     <mx:Script>
          <![CDATA[
               import mx.core.UIComponent;
               import localisation.BrandingLogo;
               private var brandCont:UIComponent = new UIComponent();
               private var brandLogo:BrandingLogo = new BrandingLogo();
               private function addBranding():void
                    addChild( brandCont );
                    brandCont.addChild( brandLogo );
                    setChildIndex( brandCont, numChildren-1 );
          ]]>
     </mx:Script>
</mx:Button>
But for some reason it puts the logo behind the button. Any idea's?

Answer 1

"createChildren()" is one of the core lifecycle methods of UIComponent. It is called once when a component is first added to the display-list. You override this method if you want to add additional child objects to your component. It is described at the links below, but the best way to learn about how to use these core methods is by browsing the Flex SDK source code:
http://livedocs.adobe.com/flex/3/html/ascomponents_advanced_3.html
http://www.adobe.com/livedocs/flex/3/langref/mx/core/UIComponent.html#createChildren()
The layoutContents() method is an mx_internal method of Button. It isn't documented, so the only way to learn about it is by looking at the source code for the Button class.
The following code may help you get started:
package
import flash.display.DisplayObject;
import mx.controls.Button;
import mx.core.mx_internal;
use namespace mx_internal;
public class CustomButton extends Button
  private var extraLogo : Logo;
  protected override function createChildren() : void
   super.createChildren();
   extraLogo = new Logo();
   addChild( extraLogo );
  override mx_internal function layoutContents(
     unscaledWidth:Number,
     unscaledHeight:Number,
     offset:Boolean):void
      super.layoutContents( unscaledWidth, unscaledHeight, offset );
         if (currentSkin)
             setChildIndex(DisplayObject(currentSkin), numChildren - 1);
         if (currentIcon)
             setChildIndex(DisplayObject(currentIcon), numChildren - 1);
         if (extraLogo)
             setChildIndex(DisplayObject(extraLogo), numChildren - 1);   
         if (textField)
             setChildIndex(DisplayObject(textField), numChildren - 1);