Extending MXML custom components via MXML

Question

What I'd like to do: create an MXML component with some children, then extend it via MXML to create a new component with more children, without losing the original set. In other words

create a component bc.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

    <s:Button id="b1" label="button1"/>
</s:BorderContainer>

and then extend it to a separate component mc.mxml

<?xml version="1.0" encoding="utf-8"?>
<borderContainerX:bc xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     xmlns:s="library://ns.adobe.com/flex/spark" 
                     xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:borderContainerX="borderContainerX.*">

    <s:Button id="b2" y="100" label="button2"/>
</borderContainerX:bc>

and get a component with 2 buttons.

I've seen various threads on how this is either not possible (1) or on workarounds to accomplish this (2, 3) and have been wondering if something has changed with the advent of Flex 4 or if we're still stuck with these workarounds the last reply in thread 3 seems to hint at Flex 4 fixing it all?

Inspectorate

Why not use a mix of MXML and ACtionScript? Create your second button in the createChildren() method of the second component? – Psychomancy

sure. I'm just surprised that pure mxml is still not going to work. Honestly, it's so nice to set up components through mxml, it seems so strange that this is not possible. – Inspectorate

Answer 1

In Flex 4, you will have to override your "mxmlContent" property setter in order to preserve your already defined children in a parent class

One of possible implementations of such a override is presented in the comment for this blog entry

Quick tip (Flex 4): Goodbye templates – hello mxmlContent

http://www.websector.de/blog/2009/10/02/quick-tip-flex-4-goodbye-templates-hello-mxmlcontent/

Upend

Also, in Flex 4 it is much more elegant to use Skin with multiple content areas defined to accompish the task of this type: Building Flex 4 Containers with Multiple Content Areas saturnboy.com/2010/07/multiple-content-area-containers – Upend

I tried this (including the setting of the mxmlContent, but it doesn't work for me. Any clue as to why would this be? – Nannienanning