In a recent project of mine, I needed a container which would lay its child components out in a horizontal manner like an HBox, but unlike an HBox, it needed to wrap the child components into a new row when they exceeded the available width. If the available height was exceeded, the container should then grow downwards if the height property has not been set to a constrained value. If the height is constrained, then scrollbars should appear. I found two other flow layout Flex containers on the Internet, but both had issues with scrollbars appearing before they were required, and strange behavior after several rows of children were added. I also investigated using the Flex Tile component, but this has some bugs in the measure function which meant I couldn’t achieve the growing behavior I required. After spending much time trying to rework the code I had found, I decided to build my own flow layout container from scratch which I call the FlowBox.
The container works by creating several child HBox containers and adding the children of this container to the sub-container until it is full. When the sub-container is full, a new one is created to manage the next row. This approach has the advantage that I don’t have to deal with all the complicated layout code that the HBox container already implements, and with a bit of fiddling around I can almost completely hide these sub-containers from the outside.
My focus in building this component was to make the behavior as similar to the existing Box control as possible. Some of the key features include:
- Supports all of the properties and styles that the Flex Box container supports including alignment and child spacing
- Supports both horizontal and vertical directions
- Can add child components from both action script and MXML
- Full support for child manipulation including adding, removing and swapping children by item and by index
- Available under the MIT license
There are two known issues with the component at the time of release.
The first is that the numChildren property of the container is not implemented correctly. In order to make this function work as it should I would have to work with code inside the mx_internal namespace. When I attempted this I got large numbers of errors, I eventually decided that this wasn’t going to be a good option. Particularly with Flex 3 coming right around the corner. The simple work around is to instead use
Incidentally, this component has not been tested with Flex 3 at all, but in theory there’s no reason why it shouldn’t work.
The second issue, is that I wasn’t able to find a way to stop the add and remove child events firing as the hidden, internal containers are created and removed. Any event listeners that the component adds to itself fire are triggered too late to stop the events from propagating out. Again, if you have any ideas as to how this could be solved, let me know.
This is my first attempt at releasing a polished, reusable component so your comments and suggestions would be very much appreciated. This code is released under the MIT license, so feel free to use it in any way that helps you.