How to implement a custom delimited container in Flex 4?

Question

I want to implement a custom HDividedBox using the Flex 4 API. The separator should be a dynamic part of the skin. I can not find any examples of controls where the position of the skin parts should be calculated depending on the number of children and their sizes. It seems that this type of control does not fit into the standard Flex 4 model: Skin, Control, Layout. Can someone please give me some advice on this?

Answer 1

In our last project, we had to implement Splitter , but we approached it from a slightly different point of view. We decided that the creation of the HDividedBox component is not flexible enough - imagine the case when you need to expand the user interface with an additional splitter so that you have 3 areas divided into 2 splitters ... the separator must be somehow separated from the actual containers separated by him.

I will try to generalize 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 relatively simple behavior - depending on how you drag it, you update the height of the container1.

, , -. , .