What's a good way to make a Flex component with placeholders in it?

Question

I want to create a component that has a couple of "holes" that are to be filled in differently on each use. Currently, I'm doing it like this (using the Flex 4 framework in this example --- it would look almost the same for Flex 3):

public var fooComponent : IVisualElement;
public var barComponent : IVisualElement;

override protected function createChildren() : void
{
  super.createChildren();

  fooContainer.addElement(fooComponent);
  barContainer.addElement(barComponent);
}

<Group id="fooContainer"/>
<!-- ... other components ... -->
<Group id="barContainer"/>

This works well, but it's kind of a lot of code to write for something so simple.

What I'd like is something like this:

[Bindable] public var fooComponent : IVisualElement;
[Bindable] public var barComponent : IVisualElement;

<Placeholder content="{fooComponent}"/>
<!-- ... other components ... -->
<Placeholder content="{barComponent}"/>

Now, I could implement the Placeholder component myself, but I can't help wondering if there isn't a better way to do this using the existing tools in the Flex framework.

Theoretically, with the proper compiler support, it could even be boiled down to something like this:

<Placeholder id="fooComponent"/>
<!-- ... other components ... -->
<Placeholder id="barComponent"/>

Answer 1

We just need to use any of standard containers as the placeholder. And we could use the addChild() and removeChild() methods to add, remove controls in that container.