« FlexLib sports a TreeGrid Announcing as3cards Google Code Project »

April 02, 2007

A FlowLayout Container for Flex 2

This morning I just checked in a FlowBox container for FlexLib. FlowBox implements a flow layout algorithm to fluidly lay out children, similar to an HBox but able to span multiple rows.

View the Example Application here.

Download the latest FlexLib distribution from here.

There's nothing really fancy or special about this component. The FloxBox itself pretty much does nothing other than instruct the layout manager to use a FlowLayout instead of a BoxLayout. The FlowLayout code isn't that complicated, but it gets the job done.

Some improvements would be to:

  • Write a better measure function. Because the FlowBox can adapt it's children for any width/height, I didn't do anything special with measure. I'm not sure what the preferred measurement should be (1 row for max width min height, 1 column for min width and max height, or somewhere in the middle?), so I just defaulted to the Box measurement.
  • The layout algorithm doesn't respect the includeInLayout property. This is a relatively easy change, maybe the next release will see it implemented.
  • Children with a percent width and height are probably not laid out like you think they would be. I'm not doing any checking here, so if you have to use percent layouts, FlowBox is probably not the right container for you.
  • The verticalAlign style applies on a row-by-row basis, as you can see from the example. When you set the align the "middle", the children in each row are placed in the middle of that row vertically. The entire contents of the container are not centered vertically in all of the available space.

I hope someone finds this useful. I've seen some people asking for a layout container like this, so I thought I'd whip it together this weekend and keep FlexLib growing.

Remember, if you'd like to contribute to FlexLib, see the HowToContribute page.

Enjoy!

,

Comments

  • Hi, this is a great container, thanks for making it... i threw together a little image gallery to show the power flex has for rapid application development. You can check it out here
    http://3r1c.net/gallery/gallery.swf
    It seems when i set the layout container to 100% that that it becomes a lot longer than the content that is within it.... you can notice it there in the example...regardless .. awesome component..

Post a comment

Remember personal info?