Basic lesson for text field

Nate112 · August 28, 2012, 2:27pm

Hello!
So I need to implement one lined text Fields in my app and I need to work with the data the user inputs into these fields. Sometimes the user will enter alphabetical data, other times it will be numerical (I’ll have different fields for each). Can someone tell me how to implement formulas and such so that the app will show a certain formula-obtained value in a separate textField or designated area based off the values the user entered?

I’ve heard about the toNumber(), but I’m not sure I understand it well enough.

Thanks for all your help! [import]uid: 35535 topic_id: 30343 reply_id: 330343[/import]

peach_pellen · August 28, 2012, 7:47pm

Are you thinking of something like a calculator/converter? (Just trying to figure this out so I can hopefully steer you in the right direction :-)) [import]uid: 52491 topic_id: 30343 reply_id: 121594[/import]

Nate112 · August 28, 2012, 8:53pm

Yes, something along those lines. I’ll have two text fields that the user will submit numbers into and I need them to somehow go through a formula and the new value to be appear somewhere else on the screen. Does that make sense? [import]uid: 35535 topic_id: 30343 reply_id: 121603[/import]

peach_pellen · August 29, 2012, 5:57pm

OK, in this case you would indeed use tonumber.

If you are on a Mac this sample will be plug and play, if on a PC it wont work as the textfields wont show up in the simulator so you will need to test on a device;

[lua]local field1 = native.newTextField(10, 10, 100, 20)
local field2 = native.newTextField(10, 40, 100, 20)

local totalText = display.newText("", 160, 25, native.systemFont, 12)

local button = display.newRect( 10, 80, 40, 20 )

local function addNumbers()
local total = tonumber(field1.text) + tonumber(field2.text)
totalText.text = total
end
button:addEventListener(“tap”, addNumbers)[/lua]

That’s just off the top of my head, very basic and will need error-proofing but it should give you something solid to go on.

Peach [import]uid: 52491 topic_id: 30343 reply_id: 121763[/import]

Nate112 · August 29, 2012, 9:21pm

Thanks so much for that, you helped me out so much already! Just a couple of more questions if you can help me out:

I have a lot of textfields that look bad against my dark background. Is there anyways to adjust their color? I think I read somewhere that textbox colors can be adjusted, but I want to limit the user to only entering one line of data.
For the empty textfields I have set up (before user input), how can I give instructions to the user (within the textfield) such as “enter ___ value here” and have it disappear when the user touches the textfield to enter his data. When I tried it out, my instructions had to be deleted in the simulator to enter a new user value.
is it possible to have lets say two textfields automatically add up as the user inputs data without the need for a listener?

And thanks so much for your help again Peach! You’re always there to save the day! [import]uid: 35535 topic_id: 30343 reply_id: 121789[/import]

CraftyDeano · August 30, 2012, 4:10am

Not sure about the first 2 questions, but I have edited Peach’s code above to have the calculation complete once both fields are filled out.

Not 100% sure if it works or not, but you should get the general idea.

More info on the API page: http://developer.coronalabs.com/node/2600

[lua]local field1 = native.newTextField(10, 10, 100, 20, addNumbers )
local field2 = native.newTextField(10, 40, 100, 20, addNumbers )

local totalText = display.newText("", 160, 25, native.systemFont, 12)

local button = display.newRect( 10, 80, 40, 20 )

local function addNumbers(getObj)
if field1.text == “” or field2.text == “” then
print “waiting for both fields to be filled out”
elseif event.phase == “ended” then
local total = tonumber(field1.text) + tonumber(field2.text)
totalText.text = total
end
end[/lua]

edit: syntax error on line11 fixed. [import]uid: 62706 topic_id: 30343 reply_id: 121825[/import]

Naomi · August 30, 2012, 9:43am

@Nate112, about your first question, take a look at this blog post, which gives you tips on how you may get it to look the way you want: http://www.coronalabs.com/blog/2012/02/07/tutorial-text-input-with-native-ui/

About your second question, you can use [text]placeholder[/text] property. (Edit: this placeholder property has been available since the stable release build 840.) It would do what you are looking for (like so myTextFieldObject.placeholder = “enter ___ value here”). That said, you can also implement a workaround by using the code snippet posted here: https://developer.coronalabs.com/forum/2012/08/21/empty-contents-textfield-when-you-begin-typing#comment-121064

I hope this helps.

Naomi [import]uid: 67217 topic_id: 30343 reply_id: 121852[/import]

Nate112 · August 30, 2012, 4:12pm

Thanks for all the help guys! I’ll start implementing everything as soon as I can! [import]uid: 35535 topic_id: 30343 reply_id: 121923[/import]

peach_pellen · August 28, 2012, 7:47pm

Are you thinking of something like a calculator/converter? (Just trying to figure this out so I can hopefully steer you in the right direction :-)) [import]uid: 52491 topic_id: 30343 reply_id: 121594[/import]

Nate112 · August 28, 2012, 8:53pm

Yes, something along those lines. I’ll have two text fields that the user will submit numbers into and I need them to somehow go through a formula and the new value to be appear somewhere else on the screen. Does that make sense? [import]uid: 35535 topic_id: 30343 reply_id: 121603[/import]

peach_pellen · August 29, 2012, 5:57pm

OK, in this case you would indeed use tonumber.

If you are on a Mac this sample will be plug and play, if on a PC it wont work as the textfields wont show up in the simulator so you will need to test on a device;

[lua]local field1 = native.newTextField(10, 10, 100, 20)
local field2 = native.newTextField(10, 40, 100, 20)

local totalText = display.newText("", 160, 25, native.systemFont, 12)

local button = display.newRect( 10, 80, 40, 20 )

local function addNumbers()
local total = tonumber(field1.text) + tonumber(field2.text)
totalText.text = total
end
button:addEventListener(“tap”, addNumbers)[/lua]

That’s just off the top of my head, very basic and will need error-proofing but it should give you something solid to go on.

Peach [import]uid: 52491 topic_id: 30343 reply_id: 121763[/import]

Nate112 · August 29, 2012, 9:21pm

Thanks so much for that, you helped me out so much already! Just a couple of more questions if you can help me out:

I have a lot of textfields that look bad against my dark background. Is there anyways to adjust their color? I think I read somewhere that textbox colors can be adjusted, but I want to limit the user to only entering one line of data.
For the empty textfields I have set up (before user input), how can I give instructions to the user (within the textfield) such as “enter ___ value here” and have it disappear when the user touches the textfield to enter his data. When I tried it out, my instructions had to be deleted in the simulator to enter a new user value.
is it possible to have lets say two textfields automatically add up as the user inputs data without the need for a listener?

And thanks so much for your help again Peach! You’re always there to save the day! [import]uid: 35535 topic_id: 30343 reply_id: 121789[/import]

CraftyDeano · August 30, 2012, 4:10am

Not sure about the first 2 questions, but I have edited Peach’s code above to have the calculation complete once both fields are filled out.

Not 100% sure if it works or not, but you should get the general idea.

More info on the API page: http://developer.coronalabs.com/node/2600

[lua]local field1 = native.newTextField(10, 10, 100, 20, addNumbers )
local field2 = native.newTextField(10, 40, 100, 20, addNumbers )

local totalText = display.newText("", 160, 25, native.systemFont, 12)

local button = display.newRect( 10, 80, 40, 20 )

local function addNumbers(getObj)
if field1.text == “” or field2.text == “” then
print “waiting for both fields to be filled out”
elseif event.phase == “ended” then
local total = tonumber(field1.text) + tonumber(field2.text)
totalText.text = total
end
end[/lua]

edit: syntax error on line11 fixed. [import]uid: 62706 topic_id: 30343 reply_id: 121825[/import]

Naomi · August 30, 2012, 9:43am

@Nate112, about your first question, take a look at this blog post, which gives you tips on how you may get it to look the way you want: http://www.coronalabs.com/blog/2012/02/07/tutorial-text-input-with-native-ui/

About your second question, you can use [text]placeholder[/text] property. (Edit: this placeholder property has been available since the stable release build 840.) It would do what you are looking for (like so myTextFieldObject.placeholder = “enter ___ value here”). That said, you can also implement a workaround by using the code snippet posted here: https://developer.coronalabs.com/forum/2012/08/21/empty-contents-textfield-when-you-begin-typing#comment-121064

I hope this helps.

Naomi [import]uid: 67217 topic_id: 30343 reply_id: 121852[/import]

Nate112 · August 30, 2012, 4:12pm

Thanks for all the help guys! I’ll start implementing everything as soon as I can! [import]uid: 35535 topic_id: 30343 reply_id: 121923[/import]