ActionScript 3 Distributing TextFields

Question

Actionscript 3

I have been wrecking my head most today on the best way of going about this, but i end up over complicating what i would believe to be a simple task.

I have some TextFields lined up next to each other all fixed width, i.e ( [ width ])

      tf1         tf2       tf3      tf4        tf5
[     80     ][   50   ][   50   ][  50   ][    70   ]

What i want to do is be able to select which detail i want to show, and then redistribute the width of the removed TextField to the rest (note you can only remove from the right), so if i was to show up to "tf3", 120 (70+50) would need to be evenly distributed to the other boxes:

[      80 + 50 + 50 = 180                 ]
           tf1
[80/180*120 + 80 = 133.3]
                       tf2
               [50/180*120 + 50 = 83.3]
                                  tf3
                         [50/180*120 + 50 = 83.3]

Then line them up again (x + width etc):

 [      133.3       ][     83.3      ][     83.3     ]

Any ideas of a better method, i sure there is some nice easy functions i can use to do this.

I probably have overcomplicated the question too now, but ill give it a try, anyone have any ideas?

Answer 1

Am I mis-understanding something, or wouldn't it be as simple as:

boxWidth = (availableWidth - (padding + margins)) / numberOfFieldsShown

Answer 2

So, let me get this straight, you have N text fields of differing widths and you want to remove 1 or more of them, rearranging the remaining M text fields, redistributing their widths proportionally (i.e. so if text field T₁ was twice the width of text field T₂, it would still be after they are rearranged)?

This isn't actually a very simple problem, but I've taken a stab at it below. You pass it the array of your text fields (from left to right), the number you want to keep, and an optional X-offset.

Note: I haven't done AS3 in months so consider the below to be pseudocode--you will have to edit it to make it work.

function arrangeTextFields(textFields:Array, keep:int, xOffset:Number = 0) {
  // we can't keep more fields than are provided
  keep = Math.min(keep, textFields.length);

  var totalWidth    = 0, // the total width of all textfields
      keptOrigWidth = 0, // the total combined widths of the ones you're keeping
      origNum:int   = textFields.length;

  // calculate the above values by addition in a loop
  // (because AS3 lacks an inject/reduce method)
  for(var i:int, i++, i < origNum) {
    totalWidth += textFields[i].width;

    if(i < take) {
      keptOrigWidth += textFields[i].width;
    }
  }

  var ratio:Number = totalWidth / takenOrigWidth, // the ratio we'll resize each field by to keep them proportional
      currentX:int = 0; 

  textFields = textFields.slice(0, keep - 1); // throw away the fields we're not keeping

  for(int i = 0; i < take; i++) {
    textFields[i].width = textFields[i].width * ratio; // resize it
    textFields[i].x     = currentX + xOffset;          // move it

    currentX += textFields[i].width;
  }  
}

Note: This code doesn't actually remove the "unkept" text fields from view; you'll have to add that or do it elsewhere.