This content has been marked as final. Show 5 replies
maybe this is not best advice but just out of my head :
This is a really good question. Our default containers really don't fit your needs. You'd be better off writing one by extending Canvas. You can also write one from scratch by extending UIComponent and implementing the container view interface, but for a first pass using Canvas would be easier.
You've got a Collection (eg, ArrayCollection) of tags. Let's assume each "tag" has a label and a weight which will control its font size and font weight. The proper thing to do is create a class which will act as the itemRenderer for your new tag cloud class. So assume that your itemRenderer (let's call it TagRenderer) will have its measure() method calculate the proper size for the tag based on the label and font size/weight.
GIven that the itemRenderer will do its job the container needs to use the size of the itemRenderer instances to place them. A simple algorithm (use an override of updateDisplayList to do this) would be to place the first TagRenderer instance at (0,0). Then place the next one at (firstRenderer.x+firstRenderer.width,0). Do this until the first row is filled. Then move to the next row (firstRenderer.y+firstRenderer.height) to begin again.
If you haven't made components before you can visit my blog and search for "component" and you should find a few articles on doing it. And of course, the Flex documents.
Yes levancho, it was my first approach too! just wondering if there was a more automatized way to do it...
hey Pete, nice blog! I'll start with this component tutorials... if I get some result I'll let you know.
I gave this some more thought. Base your cloud container on Container and not UIComponent. Doing this will give you a real container to manage the children and will also automatically give you scrollbars and a clipping mask - if you want them. The algorithm would be the same.
I might use this example in a future blog post since it is a nice problem and relatively short.