4 Replies Latest reply on May 20, 2010 7:47 PM by Miggl

    Flex dynamic positioning of elements

    nIvelyx Level 1

      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.

        • 1. Re: Flex dynamic positioning of elements
          Miggl Level 1

          You might want to try setting the layout mode of your "myCanvas" to horizontal layout. That way they should wrap automatically. (I'm just pulling things from the top of my head here, don't actually have FlexBuilder at the ready to test this out.)

           

          Let me know if this helps, if not I'll check back later when I get home and can run a few tests.

           

          ~Mike

          • 2. Re: Flex dynamic positioning of elements
            jp77

            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>

             

             

            • 3. Re: Flex dynamic positioning of elements
              Ansury Level 3

              It sounds like you're using the wrong component.  Looks like a case for a VBox rather than a Canvas if I understand correctly.  You can set the verticalGap to 10 for ten pixel spacing, and set vertical and/or horizontal alignment if you prefer, which isn't possible at all on a Canvas.

               

              The aspect I'm confused about is how you seem to want the occasional checkboxes directly adjacent to one another, side by side.  This would be difficult with a VBox (doable if you write code to add sub-rows via HBox, and conditionally add checkboxes to each row (or move to the next row) depending on space remaining on the row...but yikes!)

               

              If at all possible I would simply line up your checkboxes vertically in a VBox, if only for the sake of good UI design.  It may not be immediately clear which "box" goes with which label if they are placed side by side (if you don't have enough gap in between), but above/below of course is fine.  Vertical only would look more professional too, IMO.

              • 4. Re: Flex dynamic positioning of elements
                Miggl Level 1

                Try this:

                 

                 

                
                <s:BorderContainer width="294" height="200">
                
                <s:layout>
                
                <s:TileLayout/>
                
                </s:layout>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                <s:CheckBox label="test1"></s:CheckBox>
                
                </s:BorderContainer>