Flex dynamic positioning of elements

Question

Hi,
I'm wondering how to dynamically position something on a canvas. I couldn't seem to find any resources on this when I used Google, so I apologise in advance if this topic has been kicked into the ground. To give an example, consider the following:
I have a canvas thats 100 in width; we'll call this canvas "myCanvas".
I have items coming out of my database which create checkboxes. Each checkbox has a description (the label field of the checkbox), and these vary in length (e.g. the first item might have a label thats 23 characters in length, the second may have a label thats 50). I'm currently accessing the length of the label by using "myCheckbox.label.length".
So to recap, we have "myCanvas", and many "myCheckbox" elements being added to the canvas.
I'm trying to make it so that myCheckbox will go from one side of the canvas to the other side, and if there's not enough room, it will dynamically drop down to the next available position in the y-axis (plus a spacer of 10px or so between the rows).
Can someone recommend a good example, blog posting, or article of this type of functionality please? I'm new to working with dynamic items in ActionScript, so I apologise again if this seems basic.
Thanks in advance.

Answer 1

Hey,
If you're coding to Spark you can try something like this ... sorry not sure how to format nice looking code in this thing
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="application1_creationCompleteHandler(event)" xmlns:local="*">
<fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   import spark.components.CheckBox;
   protected function application1_creationCompleteHandler(event:FlexEvent):void
    for (var i:uint=0; i<50; i++)
     var newCheckBox:CheckBox = new CheckBox();
     newCheckBox.label = i%2==1? "this is some text": "this is some longer text";    
     myGroup.addElement(newCheckBox);
  ]]>
</fx:Script>
<s:Scroller width="100%" height="100%" >
  <s:Group id="myGroup" width="100%" height="100%">
   <s:layout>
    <s:TileLayout horizontalGap="50" verticalGap="10" clipAndEnableScrolling="true"  />
   </s:layout> 
  </s:Group>
</s:Scroller>
</s:Application>