AS3 - Menu with textfields

0
votes

I could not come up with a better name for the title, I am sorry if it is not that declarative. I am trying to make a menu (for my server program) that adds a textbox with the ip each time a client connects to it, and remove the textbox of the client when the client disconnects.

When nobody has connected: when nobody has connected

When people has connected: when people have connected

The big problem is that I want all the other ip's below the one that disconnected to move up. How can I do that in AS3?

2
actionscript-3flashactionscript
Do you want to remove the textfiled of a removed IP ? If you know the ip associated to a textfield, you have just to remove that textfield when client disconnect. - akmozo
Yeah, but let's say that number 499 disconnects (see the second Picture), when I remove that textfield, all the ip's under it will remain in the same position, which is not what I want. I want all the textfields below the one I removed to move up to fill the gap. - Erik W
I put an answer, take a look. - akmozo

2 Answers

1
votes

After removing your TextField, you can re-position all other text fields like this : 

// the menu items container
var menu:MovieClip = new MovieClip()
    addChild(menu);

for(var i=0; i<5; i++){
    var txt:TextField = new TextField();
        txt.x = 20;
        txt.y = 26*i + 20;
        txt.height = 24;
        txt.width = 120;
        txt.text = 'client : ' + i.toString();
        txt.border = true;
        txt.addEventListener(
            MouseEvent.CLICK,
            function(e:MouseEvent):void {               
                var parent:DisplayObjectContainer = e.target.parent; // which is the "menu" movieclip here
                e.target.parent.removeChild(e.target);
                set_objects(parent);        
            }
        )
    menu.addChild(txt)
}

function set_objects(container:DisplayObjectContainer){ 

    var j:int = 0;
    for(var i:int = 0; i < container.numChildren; i++){
        var child:DisplayObject = container.getChildAt(i);

        // if the child is a TextFiled, set its new position
        if(child is TextField){         
            child.y = 26*j + 20;
            j++;
        }       
    }   
}

Of course, this code is jut to show a manner how to do what you want, you should improve it and adapt it to your needs. You can this code working here.

Hope all that can help you.

1
votes

If you don't want to move all of them, just keep a list of your TextFields, then when you get a disconnect, find the index, and move all the subsequent ones up. Something like:

private var m_textFields:Vector.<TextField> = new Vector.<TextField>(); // all our textfields
private var m_ipToTextField:Object          = new Object;               // an object to make it easier to find our textfield

public function addIP( ip:String ):void
{
    var tf:TextField    = this._createTextField( ip );          // create, style, and add your textfield
    tf.y                = tf.height * this.m_textFields.height; // assuming they're all the same height

    // add it to our storage objects
    this.m_textFields.push( tf );
    this.m_ipToTextField[ip] = tf;
}

public function removeIP( ip:String ):void
{
    // get our textfield and remove it
    var tf:TextField = this.m_ipToTextFields[ip];
    tf.parent.removeChild( tf );

    // get our index of the textfield in the vector
    var index:int = this.m_textFields.indexOf( tf );

    // move all subsequent textfields up by the height of the textfield that we removed
    var len:int     = this.m_textFields.length;
    var h:Number    = tf.height;
    for( var i:int = index + 1; i < len; i++ )
        this.m_textFields[i].y -= h;

    // remove the textfield from our storage objects
    this.m_textFields.splice( index, 1 );
    this.m_ipToTextField[ip] = null;
    delete this.m_ipToTextField[ip];
}