Hide an input text field under a picker wheel

Solar2D General Questions/Discussion
#1

Hi everybody,

this is my first topic on this forum, but I read your discussions every day.

This is my problem: I need to hide an input text field under a picker wheel. I try to put these two elements in a group but it doesn’t work.

This is the code: 

local pickerWheel = widget.newPickerWheel

{

    top =p-259,

    columns = columnData,

    sheet = pickerWheelSheet,

    overlayFrame = 1,

    overlayFrameWidth = b,

    left=c,

    overlayFrameHeight = 222,

    backgroundFrame = 2,

    backgroundFrameWidth = b,

    backgroundFrameHeight = 222,

    separatorFrame = 3,

    separatorFrameWidth = 8,

    separatorFrameHeight = 222,

    columnColor = { 0, 0, 0, 0 },

    fontColor = { 0.4, 0.4, 0.4, 0.5 },

    fontColorSelected = { 0.2, 0.6, 0.4 }

}

visual= display.newGroup()

y=7

ing_name2 = native.newTextField( display.screenOriginX+85, display.contentCenterY-225+(y-1)*40, 100, 35 )

ing_name2.font = native.newFont(“Calibri”, 13)

ing_name2.text=“prova”

visual:insert(ing_name2)

visual:insert(pickerWheel)

Help me please!!

#2

Hi @leta.davide,

Unfortunately, this is not possible. “Native” objects like input fields, map views, etc. are rendered by the OS, not by Corona’s graphics engine, and they always reside in front of normal display objects. So, because the widget picker wheel is part of the Corona engine, you can’t hide a native object behind it.

May I ask why you want to hide the text input field behind the picker? Typically, users will expect to interact with input fields, so it doesn’t serve much purpose to hide it, generally speaking…

Take care,

Brent

#3

Thank you Brent, I have learned another thing about Corona. 

I’ve solved my problem with the picker wheel using a scrollview, when the picker wheel comes out the input text field go up into the scrollview.

But I have another problem. In my app there are 4 input text fields, and if you don’t enter all required fields, an error window comes out. 

Also in this case the text input field reside in front of the error windows, and this is no good. 

Any suggestion to solve this situation?

Thanks to everybody for the support!! (and so sorry for my bad english)

#4

Hi @leta.davide,

This is a new issue that you describe, so we’ll need to see your current code and some specific error message to determine why you’re seeing the errors.

Take care,

Brent

#5

Sorry Brent, maybe I explained no good.

In my app there are 4 input text fields, and the user has to enter all required fields. If he don’t do that i decided that an error windows comes out.

The problem is: the window (when I have written “please enter all required fildes”) reside behind the input fields. 

Thanks for your patience.

#6

Hi @Davide,

How are you showing the “error window”? Can we see some code? Are you rendering it as a Corona display object/text? Or are you using a native alert box?

Brent

#7

Hi Brent,

this is an extract of the code.

[lua]
function alert_empty_field(title, message)
local alertBox2 = display.newRect( display.screenOriginX+160, display.screenOriginY+300, 180, 100 )
alertBox2.x = display.contentCenterX
alertBox2.y = display.contentCenterY - 1
alertBox = display.newRect( display.screenOriginX+160, display.screenOriginY+300, 180, 100 )
local line2 = display.newLine( display.contentCenterX-90, display.contentCenterY-25, display.contentCenterX+90, display.contentCenterY-25)
alertBox.x = display.contentCenterX
alertBox.y = display.contentCenterY - 1
titoloMessaggio = display.newText(title, 0, 0, “Impact”, 32)
titoloMessaggio.xScale = 0.5
titoloMessaggio.yScale = 0.5
titoloMessaggio.x = display.contentCenterX
titoloMessaggio.y = display.contentCenterY - 38
testoMessaggio = display.newText(message, 0, 0, “Calibri”, 24)
testoMessaggio.xScale = 0.5
testoMessaggio.yScale = 0.5
testoMessaggio.x = display.contentCenterX
testoMessaggio.y = display.contentCenterY-5
local ok = display.newText(“OK”, 0, 0, “Calibri”, 40)
ok.xScale = 0.5
ok.yScale = 0.5
ok.x = display.contentCenterX
ok.y = display.contentCenterY+30
ok_rect=display.newRect( display.contentCenterX, display.contentCenterY+30 , 28, 24 )
add_bg:removeEventListener( “tap”, add_ing )
end

b=320
nb = display.newText( “1”, display.screenOriginX+20, display.screenOriginY+300, “Calibri”, 15)
nb_bg1=display.newRect( display.screenOriginX+20, display.screenOriginY+300, 30, 30 )
nb_bg1:setFillColor( 255, 255, 255,0.3 )
ing_name = native.newTextField( display.screenOriginX+90, display.screenOriginY+300, 100, 35 )
ing_name.font = native.newFont(“Calibri”, 13)
ing_wei = native.newTextField(display.screenOriginX+165, display.screenOriginY+300,42, 35 )
ing_wei.font = native.newFont(“Calibri”, 13)
ing_wei.inputType = “number”
ing_uni = native.newTextField(display.screenOriginX+210, display.screenOriginY+300,42, 35 )
ing_uni.font = native.newFont(“Calibri”, 13)
ing_cal = native.newTextField( display.screenOriginX+256, display.screenOriginY+300, 42, 35 )
ing_cal.font = native.newFont(“Calibri”, 13)
ing_cal.inputType = “number”
add = display.newText( “+”, display.screenOriginX+b-20, display.screenOriginY+300, “Calibri”, 25)
add_bg=display.newRect( display.screenOriginX+b-21, display.screenOriginY+300, 30, 30 )
add_bg:setFillColor( 255, 255, 255,0.3 )

function add_ing()
native.setKeyboardFocus( nil )
if field1==nil or field2==nil or field3==nil or field4==nil or field1=="" or field2=="" or field3=="" or field4=="" then
title=“Empty Field”
messagge=“Please enter all required fields”
alert_empty_field(title, messagge)
end
end

add_bg:addEventListener( “tap”, add_ing )[/lua]

#8

Hi @Davide,

OK, I see you’re using normal non-native objects to make the alert field. These will appear below the text input fields, as mentioned.

There are two possible solutions to this:

  1. Hide or move the text input fields when the alert shows. This week’s tutorial shows one method for this:

http://coronalabs.com/blog/2014/11/18/tutorial-moving-native-textfieldtextbox-objects/

  1. Use a native alert box which (should) appear in front of the text input fields:

http://docs.coronalabs.com/api/library/native/showAlert.html

Take care,

Brent

#9

Hi Brent,

thank you very much for your advices. I solved the problem using  a native alert box.

The last question is: can I customize (color, dimension, font etc.) it?

Take care.

Davide 

#10

Hi Davide,

Sorry, but no, you can’t “stylize” the native alert box. If you want a stylized box, you will need to follow my alternative suggestion of moving or hiding the text inputs and then show a graphical (Corona display objects) alert on the screen.

Take care,

Brent

#11

Thanks a lot Brent,

now everything is clear. The community needs person like you.

Davide

#12

Hi @leta.davide,

Unfortunately, this is not possible. “Native” objects like input fields, map views, etc. are rendered by the OS, not by Corona’s graphics engine, and they always reside in front of normal display objects. So, because the widget picker wheel is part of the Corona engine, you can’t hide a native object behind it.

May I ask why you want to hide the text input field behind the picker? Typically, users will expect to interact with input fields, so it doesn’t serve much purpose to hide it, generally speaking…

Take care,

Brent

#13

Thank you Brent, I have learned another thing about Corona. 

I’ve solved my problem with the picker wheel using a scrollview, when the picker wheel comes out the input text field go up into the scrollview.

But I have another problem. In my app there are 4 input text fields, and if you don’t enter all required fields, an error window comes out. 

Also in this case the text input field reside in front of the error windows, and this is no good. 

Any suggestion to solve this situation?

Thanks to everybody for the support!! (and so sorry for my bad english)

#14

Hi @leta.davide,

This is a new issue that you describe, so we’ll need to see your current code and some specific error message to determine why you’re seeing the errors.

Take care,

Brent

#15

Sorry Brent, maybe I explained no good.

In my app there are 4 input text fields, and the user has to enter all required fields. If he don’t do that i decided that an error windows comes out.

The problem is: the window (when I have written “please enter all required fildes”) reside behind the input fields. 

Thanks for your patience.

#16

Hi @Davide,

How are you showing the “error window”? Can we see some code? Are you rendering it as a Corona display object/text? Or are you using a native alert box?

Brent

#17

Hi Brent,

this is an extract of the code.

[lua]
function alert_empty_field(title, message)
local alertBox2 = display.newRect( display.screenOriginX+160, display.screenOriginY+300, 180, 100 )
alertBox2.x = display.contentCenterX
alertBox2.y = display.contentCenterY - 1
alertBox = display.newRect( display.screenOriginX+160, display.screenOriginY+300, 180, 100 )
local line2 = display.newLine( display.contentCenterX-90, display.contentCenterY-25, display.contentCenterX+90, display.contentCenterY-25)
alertBox.x = display.contentCenterX
alertBox.y = display.contentCenterY - 1
titoloMessaggio = display.newText(title, 0, 0, “Impact”, 32)
titoloMessaggio.xScale = 0.5
titoloMessaggio.yScale = 0.5
titoloMessaggio.x = display.contentCenterX
titoloMessaggio.y = display.contentCenterY - 38
testoMessaggio = display.newText(message, 0, 0, “Calibri”, 24)
testoMessaggio.xScale = 0.5
testoMessaggio.yScale = 0.5
testoMessaggio.x = display.contentCenterX
testoMessaggio.y = display.contentCenterY-5
local ok = display.newText(“OK”, 0, 0, “Calibri”, 40)
ok.xScale = 0.5
ok.yScale = 0.5
ok.x = display.contentCenterX
ok.y = display.contentCenterY+30
ok_rect=display.newRect( display.contentCenterX, display.contentCenterY+30 , 28, 24 )
add_bg:removeEventListener( “tap”, add_ing )
end

b=320
nb = display.newText( “1”, display.screenOriginX+20, display.screenOriginY+300, “Calibri”, 15)
nb_bg1=display.newRect( display.screenOriginX+20, display.screenOriginY+300, 30, 30 )
nb_bg1:setFillColor( 255, 255, 255,0.3 )
ing_name = native.newTextField( display.screenOriginX+90, display.screenOriginY+300, 100, 35 )
ing_name.font = native.newFont(“Calibri”, 13)
ing_wei = native.newTextField(display.screenOriginX+165, display.screenOriginY+300,42, 35 )
ing_wei.font = native.newFont(“Calibri”, 13)
ing_wei.inputType = “number”
ing_uni = native.newTextField(display.screenOriginX+210, display.screenOriginY+300,42, 35 )
ing_uni.font = native.newFont(“Calibri”, 13)
ing_cal = native.newTextField( display.screenOriginX+256, display.screenOriginY+300, 42, 35 )
ing_cal.font = native.newFont(“Calibri”, 13)
ing_cal.inputType = “number”
add = display.newText( “+”, display.screenOriginX+b-20, display.screenOriginY+300, “Calibri”, 25)
add_bg=display.newRect( display.screenOriginX+b-21, display.screenOriginY+300, 30, 30 )
add_bg:setFillColor( 255, 255, 255,0.3 )

function add_ing()
native.setKeyboardFocus( nil )
if field1==nil or field2==nil or field3==nil or field4==nil or field1=="" or field2=="" or field3=="" or field4=="" then
title=“Empty Field”
messagge=“Please enter all required fields”
alert_empty_field(title, messagge)
end
end

add_bg:addEventListener( “tap”, add_ing )[/lua]

#18

Hi @Davide,

OK, I see you’re using normal non-native objects to make the alert field. These will appear below the text input fields, as mentioned.

There are two possible solutions to this:

  1. Hide or move the text input fields when the alert shows. This week’s tutorial shows one method for this:

http://coronalabs.com/blog/2014/11/18/tutorial-moving-native-textfieldtextbox-objects/

  1. Use a native alert box which (should) appear in front of the text input fields:

http://docs.coronalabs.com/api/library/native/showAlert.html

Take care,

Brent

#19

Hi Brent,

thank you very much for your advices. I solved the problem using  a native alert box.

The last question is: can I customize (color, dimension, font etc.) it?

Take care.

Davide 

#20

Hi Davide,

Sorry, but no, you can’t “stylize” the native alert box. If you want a stylized box, you will need to follow my alternative suggestion of moving or hiding the text inputs and then show a graphical (Corona display objects) alert on the screen.

Take care,

Brent