How can I define custom 'contentGroups' in a custom Flex 4 component?

Question

The spark panel component for example can be written like this

<Panel title="Skinny">
  <child components ... />
  <controlBarGroup>
    <child control bar components ... />
  </controlBarGroup>

</Panel>

And its skin file will handle layout of the contentGroup, controlBarGroup, and titleDisplay. Notice, however that the contentGroup is doesn't appear in the code above and that the controlBarGroup accepts child mxml components.

Now say I want to create a custom component that defines various required and non-required skinparts, such as 'headerGroup', 'navigationGroup', and 'accountPreferencesGroup'. I'd like to write this custom component like this

<MyComp>
<headerGroup>
   <child components .../>
</headerGroup>
<navigationGroup>
   <child components .../>
</navigationGroup>
<accountPreferencesGroup>
   <child components .../>
</accountPreferencesGroup>
</MyComp>

The motivation here is that I can now create a couple different skin files to change the look and layout of those subgroups. Reading source of the spark panel, there are some calls within the mx_internal namespace such as getMXMLContent() which is a method of the spark group component, but which I have no access to.

Does the description above make sense? How can I create custom 'contentGroups' in my custom Flex4 component that can use nested mxml child components? Should I approach this a different way?

Answer 1

I ran across this blog post recently. It gives a pretty good explanation of what you speak of, I believe.

http://saturnboy.com/2010/07/multiple-content-area-containers/