Creating a dynamically sized Flex list component

Question

I know there are a lot of questions about dynamic sizes for Flex components, but this one is quite specific and the other answers aren't a whole lot of help. Briefly, I need a List that resizes to exactly fit its content, unless that height exceeds its (dynamically sized) parent container. My requirements are as follows:

• The component extends List, or at least acts similarly.
• variableRowHeight and wordWrap both equal to true.
• The height of the list cannot be less than minHeight (roughly 32px for scrollbar arrows).
• The height of the list cannot be greater than the height of the parent container .
  • Note that the parent container can be resized dynamically.
• The height of the list should be updated as the size of both the contents and parent container changes.
  
  • Live updating would be preferable but not necessary.
• There should be no scrollbars if the content height is less than the parent container height (sounds obvious, but I've had trouble with this too).

The trouble is that with variableRowHeight and wordWrap, it's very hard to know the size of the content at any given time. If the parent container's width is reduced, a line wrap may occur in the list which will change the height of the content. I know I can measure the height of the list content using measureHeightOfItems() + viewMetrics.top + viewMetrics.bottom, but when should I calculate that? What events should I listen for? And the thing I've had the most trouble with - when should I calculate it to set the size initially (i.e. just as the content has finished populating)?

I've been tackling this for months now on and off, but can never find a solution (though I've come close with chunks of code of varying degrees of incomprehensibility). I'm not asking for someone to create a full component for me, I'm just hoping someone has the right pointers to let me know how I should go about determining and updating the size. I'm happy to do all the prototyping for you and discuss the results :).

Answer 1

Custom Flex components are definitely their own beast. You have a lot of dedication to spend months working on one!

If you haven't seen it already, you should certainly take a look at the Flex Component Lifecycle. This will answer your questions about where to execute code. I believe that measure() and commitProperties() are going to be important for your component.

I also find validateNow() to be a very useful function when managing components with dynamically sized children and/or parents. I have not yet figured out when the optimal times to call this function are but it seems to be necessary when calculating sizes of Flex components. There's an informative article about it at judah's blog.

Best of luck!

Update -- I stumbled upon a seemingly great article about Flex component lifecycle at DevelopmentArc that I'm adding to my own reading list.