Prototyping TextFields !?

[mindfriction]

Hi,

Im creating many textfields dynamically and I dont want to have to repeat the same code over and over for each field. Currently I have something like below which deosnt work. Any ideas? Am I even close?



labelFormat = new TextFormat();
labelFormat.font = "Verdana";
labelFormat.size = 5;
labelFormat.color = 0xFFFFFF
labelFormat.bold = true;
labelFormat.leftMargin = 0
labelFormat.rightMargin = 0
labelFormat.indent = 0
labelFormat.leading = 0
labelFormat.align = "center";

TextField.prototype.buildLabel = function(tempText) {
trace("prototype buildLabel");
this.border = false;
this.type = "input";
this.text = tempText;
this.maxChars = "2";
this.setTextFormat(labelFormat);
}


With the main script I call the porotype like so


this._parent[newName].createTextField("myTextBox", i+1000, this[newName]._x-7, this[newName]._y-5, 15, 10).buildLabel(i);

[eyezberg]

I'm not into prototyping much (not yet), but the last line looks to me as if you're applying the method/proto you created for textfield (buildLabel) to the clip method createTextField, and not to the created textfield itself (myTextbox);
try removing that from the end, then add a line
myTextBox.buildLabel(i);
afterwards, once the textfield exists...get the path right!
here's an example in german:
// beliebter Schreibmaschineneffekt
TextField.prototype.typeWriter = function(str, ms) {
var me = this, i = 0;
var itv = setInterval(function () {
me.text = str.substring(0, i);
i++;
if (i > str.length) {
clearInterval(itv);
}
updateAfterEvent();
}, ms);
};
//
// NUR ZUM TESTEN
mystring = "kleiner typewriter, viel spass damit";
_root.createTextField("mytext", 1, 20, 20, 100, 100);
mytext.multiline = true;
mytext.wordWrap = true;
// usage:
mytext.typeWriter(mystring, 50);

[lostinbeta]

Eyez, you can attach it to the end like that. I do it all the time. Like when I have my clip draw something. Lets say I have a prototype called drawSquare that uses the drawing API to draw a square shape. I could easily just do...
_root.createEmptyMovieClip("container", 1).drawSquare();
and it will draw the square in the clip "container"



I don't know the exact problem in this case, and I don't have time to figure it out right now.

[mindfriction]

Yeah Lost I think it was from you that I picked up the whole 'attaching it to the end bit' method. Hmm I have a feeling its something to do with: this._parent[newName]. reference. Anyway thanks guys, if you come up with anything else I would be glad to know :)

[mindfriction]

well no such luck with creating a prototype of TextField, but I figured since createTextField makes the textfield the 'child' of the movie clip maybe I could initialise TextFields with a MovieClip prototype as below



MovieClip.prototype.buildLabel = function(i) {
this.createTextField("myTextBox", i+1000, _parent._x-7, _parent._y-5, 15, 10);
trace("prototype buildLabel");
this.myTextBox.border = true;
this.myTextBox.type = "input";
this.myTextBox.text = "2345";
this.myTextBox.maxChars = "4";
this.myTextBox.setTextFormat(labelFormat);
}



It works, but is it possible to do the same with a TextField type prototype. :-\

[lostinbeta]

Hmm, Eyez was right actually.

I guess the daisychaining only works with MovieClip prototypes!

labelFormat = new TextFormat();
labelFormat.font = "Verdana";
labelFormat.size = 10;
labelFormat.color = 0xFF0000;
labelFormat.bold = true;
labelFormat.leftMargin = 0;
labelFormat.rightMargin = 0;
labelFormat.indent = 0;
labelFormat.leading = 0;
labelFormat.align = "center";
TextField.prototype.buildLabel = function(tempText) {
trace("prototype buildLabel");
this.border = true;
this.type = "input";
this.text = tempText;
this.maxChars = "2";
this.setTextFormat(labelFormat);
};
this.createTextField("myTextField", 1, 275, 200, 25, 15);
myTextField.buildLabel(1);

That works fine for me.

[mindfriction]

Thanks Lost :). I dont know if you remember the drawing thing I was doing with the circles.Im using this to fix the 'bug' where the mouse seems to snap to the middle and turn into a cursor when dragging the circle. I figure if I do below then replace textfield with contents on release it may fix it! :)


function newPress() {
trace("function newPress()")

if(circleMode==true)
{
tempText = this._parent.myTextBox.text;
trace("tempText: " + tempText);
this._parent.removeTextField();

//increase swapDepths() variable to switch to a higher depth
_root.z += 2;
//swapDepths() to the higher depth
this._parent.swapDepths(_root.z);
//startDrag(this, true);
//instead of startDrag I just used the _xmouse and _ymouse position
//reason: new method wouldn't work with startDrag()
//if the mouse is over the canvas
this.onEnterFrame = function() {

//if the mouse is over the canvas
//if (canvas.hitTest(this._xmouse, this._ymouse, true)) {
if(canvas.hitTest(_parent._parent._xmouse, _parent._parent._ymouse, true)) {//25/3

//"drag" the clip

this._parent._x += (this._xmouse-_parent._parent._x)/2;//25/3
this._parent._y += (this._ymouse-_parent._parent._y)/2;//25/3

}
};

}

}

[lostinbeta]

Well as long as that textbox is in the center I don't think there is a way to get rid of that cursor. I don't think there is a useTextCursor for textboxes option like the useHandCursor option they have for buttons.

[mindfriction]

well I'll give my idea a whirl and will post the results. Its just a small usability issue, I mean after playing with it there seems only a very small hit area that can be pressed before the cursor comes up. I had someone else play they too commented on how annoying it was , oh well back to it

[lostinbeta]

Thats why in the original version I created I allowed them to write their own label and then I applied it to the newly created clip via an unselectable dynamic text box.

But give your idea a whirl and let me know how it goes.

[mindfriction]

Ok well here's my solution, it stops the 'snapping to cursor'. All I need to do is tighten the textbox, and make sure all indents=0 I guess.

My prototype


var tempText="";

MovieClip.prototype.buildLabel = function(addText) {
this.createTextField("myTextBox", i+1000, _parent._x-7, _parent._y-5, 15, 10);
trace("prototype buildLabel");
this.myTextBox.border = true;
this.myTextBox.type = "input";
this.myTextBox.text = addText;
this.myTextBox.maxChars = "4";
this.myTextBox.setTextFormat(labelFormat);
}


My press and release functions


function newPress() {
trace("function newPress()")

if(nodeMode==true)
{
tempText = this._parent.myTextBox.text;
this._parent.myTextBox.removeTextField();//store text in temp var to use later when reinitilise textfield


_root.z += 2;
//swapDepths() to the higher depth
this._parent.swapDepths(_root.z);

this.onEnterFrame = function() {

//if the mouse is over the canvas
//if (canvas.hitTest(this._xmouse, this._ymouse, true)) {
if(canvas.hitTest(_parent._parent._xmouse, _parent._parent._ymouse, true)) {//25/3

//"drag" the clip

this._parent._x += (this._xmouse-_parent._parent._x)/2;//25/3
this._parent._y += (this._ymouse-_parent._parent._y)/2;//25/3

}
};

}

}
function newRelease() {

trace("function newRelease()");

this._parent.buildLabel(tempText);//call prototype and pass temp var which has stored text

//delete the onEnterFrame used in the onPress
//increase swapDepths() variable to switch to a higher depth
_root.z += 2;
//bring circlei to the higher depth (used _parent as talking about whole clip)
this._parent.swapDepths(_root.z);
delete this.onEnterFrame;

}