How can buttons (or textboxes) be accessed via an array (to change text colour etc)?

[davefinney]

I have some buttons and a variable. I want to change the text colour of the button according to a variable. Eg:

Box1 = app.CreateButton( "", width, Hieght, "Left" );;

Box2 = app.CreateButton( "", width, Hieght, "Left" );;

Box3 = app.CreateButton( "", width, Hieght, "Left" );;

ValueIs = 2;

I want to make the text Red of the Box according to the variable. I can do this by writing:

if ( ValueIs == 1 ) Box1.SetTextColor( "Red" );;

else if ( ValueIs == 2 ) Box1.SetTextColor( "Red" );;

else if ( ValueIs == 3 ) Box1.SetTextColor( "Red" );;

This works but is there a way to do this directly?

Something like;

Boxes = [ Box1, Box2, Box3 ];

Boxes[ ValueIs].SetTextColor( "Red" );;

Thanks.

[alex.symbroson]

//1)

for(var i=0; i<Boxes.length; i++) {
Boxes[i].SetTextColor(...);
}

//2)

for(var i in Boxes) {
Boxes[i].SetTextColor(...);
}

//3)

Boxes.forEach( function(box, index, array) {
box.SetTextColor(...);
});

[davefinney]

Thanks alex,

   That works.

   In the sample calculator, buttons are created and used in 3 functions.

   Is it possible to change the text colour of 1 of those buttons in a later function according to a variable?

   We can change the text colour just after the button is pressed, but can it be done without pressing the button 1st?

   The 3 calculator functions are:

//Create first row of buttons.

lay1st = app.CreateLayout( "linear", "Horizontal" );

for( i=0; i<4; i++ ) AddButton( lay1st, keys[i] );

layMain.AddChild( lay1st );

if( name=="=" ) w = 0.8; else w=0.2;

btn = app.CreateButton( name, w, 0.1, "Alum" );

btn.SetOnTouch( btns_OnTouch );

lay.AddChild( btn );

//Get button text.

btn = app.GetLastButton();

var txt = btn.GetText();

//Handle equals button.

if( txt=="=" ) CalcResult();

//Handle clear button.

else if( txt=="C" ) sum = "";

//Handle other buttons.

else sum += txt;

//Update display.

txtSum.SetText( sum );

Thanks,

   Dave.

[davefinney]

Sorry, didn't copy the 3 functions very well.

They are:

function OnStart()

{

//Create first row of buttons.

lay1st = app.CreateLayout( "linear", "Horizontal" );

for( i=0; i<4; i++ ) AddButton( lay1st, keys[i] );

layMain.AddChild( lay1st );

}

//Add a button to a given layout.

function AddButton( lay, name )

{

if( name=="=" ) w = 0.8; else w=0.2;

btn = app.CreateButton( name, w, 0.1, "Alum" );

btn.SetOnTouch( btns_OnTouch );

lay.AddChild( btn );

}

//Called when user presses number buttons.

function btns_OnTouch()

{

[davefinney]

If we make textboxes in a function, can we change the text colour later?

If not, can it be done with buttons?

eg, can we make the 3rd textbox have a Red colour text if a condition becomes true?

function OnStart()

{

for( var i = 0; i < 7; i ++ ) MakeTxtBoxes();

}

function MakeTxtBoxes()

{

var TxtBox = app.CreateText( "", 0.6, 0.1, "Left" );

TxtBox.SetTextSize( 24, "dip" );

TxtBox.SetOnTouchDown( UserSelect );

Layout.AddChild( TxtBox );

}

function UserSelect()

{

// What to write here to identify the txt box tapped?

}

function CheckTemp()

{

// How to make the text go Red in the 3rd box ?

// if ( Temp > 32 ) ??? .SetTextColor( "Red" );

]

[alex.symbroson]

If you save all the objects you're creating in an array - of course you can access them all later by just indexing them.
so you just have to create an array where you're pushing your text labels in.

ie

boxes = [];

...
    var txt = app.CreateText(...);
    boxes.push(txt);

[davefinney]

Excellent alex, is it really that simple?

So make the Textbox, then use "push" to put it into an array.

Haven't used push before so I'll read up on it.

And thanks for fast reply, didn't even have time to get a coffee ! !

[davefinney]

Thanks alex, that works, and it really simplifies things.

Only thing is, when a Textbox is pressed, it runs the function UserSelect().

But how do we know which Textbox was pressed?

[alex.symbroson]

when pushing smth into an array the array length changes. So you can add a property to your txt object like txt.index = bixes.length before appending it to the array. so some random box is boxes[randombox.index] == randombox
ot in the callback function: var box = boxes[this.index];

[davefinney]

Hi alex,

   That 1/2 works. setting the property = the number works fine, but I can't seem to pick it up in the function.

   ie, this works:

{

    var Box = app.CreateText( name, width, Hieght, "Left" );

    Box.Test = Boxes.length;

    Boxes.push(Box);

}

   IOW, If x is a number of a box, Boxes[ x ].Test does equal x

   In the function I had:

function UserSelect( ThisBox )

{

var test33 = ThisBox.Test;

var box = Boxs[ ThisBox.Test ];

}

   ThisBox is an Object, as I suspected, but test33 and box are both undefined;

   How do we pick up that property of the box in the function?

[alex.symbroson]

It is nearly correct. Look at this:

function UserSelect( ev ) {

this.SetText("touched"); //'this' works in most cases in callback functions

ev.source.SetText("touched"); //haven't seen that before but this works here too. But you need the 'source' property
}

[davefinney]

Hi alex,

   You were up late (or maybe not in UK)?

   Your 1st suggestion didn't work, but the 2nd does, ie this works:

function UserSelect( ev )

{

    var BoxNumber = ev.source.Test:

}

That gives the correct BoxNumber for the textbox touched.

Thanks for your help, I would not have figured that out. Cheers!