How to implement custom container with separators in Flex 4?

I want to implement custom HDividedBox using Flex 4 API. Splitter should 开发者_如何学Pythonbe dynamic skin part. I can't find any examples of controls where skin parts position should be calculated depending on the number of children and their sizes. Seems like this kind of controls does not fit into the standard Flex 4 model: Skin, Control, Layout. Can somebody please give me some tips on this?

In our last project we had to implement a Splitter, but we approached this from a bit different perspective. We decided that creating a HDividedBox component is not flexible enough - imagine the case where you'll need to extend the UI with an additional splitter, so that you have 3 areas divided by 2 splitters... The splitter should be somehow decoupled from the actual containers that are split by it.

I'll try to summarize our solution:

<s:VGroup>
    <components:Container1 id="container1"/>
    <components:Splitter id="splitter" 
        topComponent="{container1}" 
        bottomComponent="{container2}" />
    <components:Container2 id="container2"/>
</s:VGroup>

The Splitter component is a component with a relatively simple behavior - depending on how you drag it, you update the height of container1.

I know I'm not addressing your technical question, but sometimes it is more feasible to restate the problem and to address it in a bit different way. This often leads to a more elegant solution as in the case above.