5 Replies Latest reply on Mar 26, 2008 6:51 AM by peterent

    Which container to use to implement a tag cloud?

    marcbc Level 1
      Hi there!
      I'd like to implement a tag cloud like the ones frequently seen in blogs... but I don't know in which container I should put the Labels I create. I was trying to use a Tile or a TileList... but they all always use equal size cells, don't? The funny think of the tag cloud is to make each tag different in size deppending into its relevance, so my cells should have different sizes. Which container could I use then?

      thanks in advance,

      Marc
        • 1. Re: Which container to use to implement a tag cloud?
          levancho Level 3
          maybe this is not best advice but just out of my head :

          <hbox>
          <vbox>row 1</vbox>
          <vbox>row 2</vbox>
          <vbox>row 3</vbox>
          </hbox>
          • 2. Re: Which container to use to implement a tag cloud?
            peterent Level 2
            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.
            • 3. Which container to use to implement a tag cloud?
              marcbc Level 1
              Yes levancho, it was my first approach too! just wondering if there was a more automatized way to do it...
              • 4. Re: Which container to use to implement a tag cloud?
                marcbc Level 1
                hey Pete, nice blog! I'll start with this component tutorials... if I get some result I'll let you know.
                thanks!
                • 5. Re: Which container to use to implement a tag cloud?
                  peterent Level 2
                  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.