2 Replies Latest reply on May 7, 2009 12:03 PM by Gregory Lafrance

    zooming a tag cloud.

    srgama

      I'm trying to create a tag cloud and want it to fit within a given canvas.

      The idea is to create a tag cloud using the snippet below, and then scale it to fit within the enclosing canvas.

       

       

      <mx:Canvas>

      <flexlib:FlowBox id="tagContainer"

                   width="100%" height="100%"

                   horizontalScrollPolicy="off"

                   creationComplete="extentsCheck()">

      <mx:Repeater dataProvider="{dataArray}" id="tag_list">

          <mx:LinkButton fontWeight="normal"

                        label="{tag_list.currentItem.label}"

                         fontSize="{tag_list.currentItem.size}"

                         click="tagClickHandler(event)"

                         creationComplete="tagAdded(event)"

                         dataChange="tagAdded(event)"             

                         />

      </mx:Repeater>

      </flexlib:FlowBox>

      </mx:Canvas>

       

      I'm limiting the number of tags to gain some control of the layout. However, approx 1-1.5 rows of tags

      is getting clipped, depending on the tags. I'd like to scale this to fit within a given height (200 px - of the parent layout).

       

      I'm however having a hard time caculating the needed scaling factor. The creationComplete and dataChange events

      seem to have a height/width of 0. The linkButtons are not being rendered on the screen either until the repeater has finished it's business.

       

      Wondering what I am missing and how a zoom factor can be computed dynamically.

       

      My searches on Google and these forums did not yield anything useful.

       

      Thanks in advance for any help.

      -sr

        • 1. Re: zooming a tag cloud.
          srgama Level 1

          Not receiving any responses, I'll attempt to clarify the problem.

           

           

          The intent is to size a linkButton based on fontsize.

          I'd like to however determine the dimensions of the created linkButton.

          Each linkButton represents a tag and the set is contained inside a FlowBox, representing my tagcloud.

          The flowbox itself is contained inside a canvas of fixed dimensions.

           

          Depending on the exact tags and associated frequencies, I'm seeing trouble with tags being clipped.

           

          To prevent this, the intent is to figure the unclipped dimensions of the FlowBox and zoom is out enough to fit

          the containing canvas.

           

          Initially the thought was that the creationComplete event would be a good place to do the necessary math to figure the zoom ratio.

          Not so it seems - the x/y/height/width dimensions are 0 when trapped here.

           

          I've not been able to find a reliable way of computing the rendered height/width of the linkButton irrespective of which event I tried.

          dataChange/Show/Render.

           

          Hopefully this provides a better idea of my intentions and I'll find some help on the forum

           

          thanks,

          -sr

          • 2. Re: zooming a tag cloud.
            Gregory Lafrance Level 6

            Try using the measuredHeight and measuredWidth, as they are the true width and height in this case.