How to have a native text field inside of a scrollview

Solar2D General Questions/Discussion
#1

Hey everyone!

Quick but important question.

I am creating a scroll view using the widgets library. Inside the scroll view I place a radio button (which scrolls properly) and a text field that does not. 

I have inserted my textField into the scroll view, but it does not work.

Here is my code for the textField

defaultField = native.newTextField( 100, 490, 300, tHeight ) defaultField.font = native.newFont( native.systemFontBold, inputFontSize ) defaultField:addEventListener( "userInput", fieldHandler( function() return defaultField end ) ) scrollView:insert( defaultField )

Any help would be greatly appreciated!

#2

There are limitations with native display objects. They are always on top of other display objects and they can not be added to groups. You could create a fake textField using display.newRect and display.newText and bring up a real native.textField when the rect is touched.

#3

Thanks for the help!

I managed to create both a textField and a fake text field (2 rects)

However I have having difficulty going from real to fake.

When the user click the two rectangles it turns into a text box, however when I scroll the scrollView I get an error.

Which function should I put the change from real to fake in?

#4

Does anybody have any code examples for creating a faux text box?

#5

Use display.newText() to create the text on screen that you want.  Then create your native.newTextField() in an off screen location.  Then in the event handler’s “editing” phase do something like:

       if event.phase == "editing" then            textOnScreen.text = textFieldOffScreen.text      end

This if course assumes you named your two text fields “textOnScreen” and “textFieldOffScreen”, adapt as necessary.

You might also want to have a small rectangle to act like a cursor and in that “editing” phase, position it just after the textOnScreen.width.

#6

Rob, do you mean placing the TextField offscreen like this?

When the TextField is out of the screen this does not work but if placed at y=479 it does work.

Can you explain how to make it work off screen?

Thanks,

Carlos

[lua]

local bg = display.newRect(0, 0, 320, 480)

bg:setFillColor(255,255,255)

local myTextField

local function onMyTextField(event)

    if event.phase == “began” then

        print(event.phase)

        local function onTF(event)

            local phase = event.phase

            local target = event.target

            if phase == “editing” then

                myTextField.text = target.text

                myTextField:setReferencePoint(display.CenterLeftReferencePoint)

                myTextField.x = 5

            end

        end

        local offTF = native.newTextField(0, 480, 320, 20)

        offTF:addEventListener( “userInput”, onTF )

        timer.performWithDelay(100, function() native.setKeyboardFocus(offTF) end, 1)

    end

end

myTextField = display.newText(“Click to enter text”, 5, 50, native.systemFont, 14)

myTextField:setTextColor(0,0,0)

myTextField:addEventListener(“touch”, onMyTextField)

[/lua]

#7

Ok so here is my code…

--Scroll View local function scrollListener( event ) if event.phase == "beganScroll" then defaultField:removeSelf() end return true end local function showRealText1(event) if showingFakeBox == true then showingFakeBox = false end defaultField = native.newTextField( 107, 640, 300, tHeight+6 ) defaultField.font = native.newFont( native.systemFontBold, inputFontSize ) defaultField:addEventListener( "userInput", fieldHandler( function() return defaultField end ) ) end local function showFakeText1(event) if showingFakeBox == true then if justStarted == false then defaultField:removeSelf() end faked1 = false end fakeTextOutside = display.newRect(100-4,490,300,tHeight+6) fakeTextOutside:setFillColor(150,150,150) fakeTextInside = display.newRect(100,494,300-8,tHeight-2) scrollView:insert( fakeTextOutside ) scrollView:insert( fakeTextInside ) fakeTextInside:addEventListener("touch", showRealText1) justStarted = false end

Note- I did not include nor make the text replacement as I could do that with ease.

When I click on the fake text box, the real one appears but is not in editing mode, so another click is required to edit. (This might be a problem for the user, but I do not think there is any possible solutions for this problem.)

The “real” problem is when my scroll view starts to move, I try to remove the real text field, but it does not work.

Any help would be much appreciated.

Summit Tech

#8

Anyone? I need to know how to do this!?!?

#9

Hi Summit Tech,

Can you add a “print” line for the “phase” in your ScrollView listener and confirm that the phase names are what you expect, as you move the scroll view around?

Brent

#10

There are limitations with native display objects. They are always on top of other display objects and they can not be added to groups. You could create a fake textField using display.newRect and display.newText and bring up a real native.textField when the rect is touched.

#11

Thanks for the help!

I managed to create both a textField and a fake text field (2 rects)

However I have having difficulty going from real to fake.

When the user click the two rectangles it turns into a text box, however when I scroll the scrollView I get an error.

Which function should I put the change from real to fake in?

#12

Ok, it did not print when my scroll was supposed to happen, but my other prints were shown.

#13

OK, thanks. Please check the conditional logic a bit more and see if you can get it all working. It seems that the basic code was fine, except for a tiny logic error.

Regards,

Brent

#14

Ok, thanks for the help! My scroll view listener logic is fixed :slight_smile:

Unfortunately, however, I am now in a pickle.

In my scroll code, I call a function that occurs below (showFakeText1) which causes and error.

So I move it above the listener code. Now that just creates another problem. In that code I add a rectangle to my scroll view… before it even exists. So I put my scroll view declaration above the showFakeText1 function, which is inheritly above the scroll view listeners which is not allowed.

Any fix for this puzzling problem?

Thanks

Summit Tech

#15

Hi Summit Tech,

Yes, the joy of scoping. :slight_smile:

You can probably solve this by up-referencing the lower function, and write it slightly different in syntax (just the opening line of the lower function) as follows:

[lua]

local lowerFunction

local function scrollListener( event )

   …

end

lowerFunction = function()

   …

end

[/lua]

In this way, the function “lowerFunction” is still local, but your listener function “scrollListener” can refer to it (despite it residing below) because you’ve up-referenced it above the listener function. Give this a try and see how it works for you…

Regards,

Brent

#16

Does anybody have any code examples for creating a faux text box?

#17

Use display.newText() to create the text on screen that you want.  Then create your native.newTextField() in an off screen location.  Then in the event handler’s “editing” phase do something like:

       if event.phase == "editing" then            textOnScreen.text = textFieldOffScreen.text      end

This if course assumes you named your two text fields “textOnScreen” and “textFieldOffScreen”, adapt as necessary.

You might also want to have a small rectangle to act like a cursor and in that “editing” phase, position it just after the textOnScreen.width.

#18

Great thanks for all the help!

If anyone needs code then just post below! I will be glad to give you mine!

#19

Rob, do you mean placing the TextField offscreen like this?

When the TextField is out of the screen this does not work but if placed at y=479 it does work.

Can you explain how to make it work off screen?

Thanks,

Carlos

[lua]

local bg = display.newRect(0, 0, 320, 480)

bg:setFillColor(255,255,255)

local myTextField

local function onMyTextField(event)

    if event.phase == “began” then

        print(event.phase)

        local function onTF(event)

            local phase = event.phase

            local target = event.target

            if phase == “editing” then

                myTextField.text = target.text

                myTextField:setReferencePoint(display.CenterLeftReferencePoint)

                myTextField.x = 5

            end

        end

        local offTF = native.newTextField(0, 480, 320, 20)

        offTF:addEventListener( “userInput”, onTF )

        timer.performWithDelay(100, function() native.setKeyboardFocus(offTF) end, 1)

    end

end

myTextField = display.newText(“Click to enter text”, 5, 50, native.systemFont, 14)

myTextField:setTextColor(0,0,0)

myTextField:addEventListener(“touch”, onMyTextField)

[/lua]

#20

Ok so here is my code…

--Scroll View local function scrollListener( event ) if event.phase == "beganScroll" then defaultField:removeSelf() end return true end local function showRealText1(event) if showingFakeBox == true then showingFakeBox = false end defaultField = native.newTextField( 107, 640, 300, tHeight+6 ) defaultField.font = native.newFont( native.systemFontBold, inputFontSize ) defaultField:addEventListener( "userInput", fieldHandler( function() return defaultField end ) ) end local function showFakeText1(event) if showingFakeBox == true then if justStarted == false then defaultField:removeSelf() end faked1 = false end fakeTextOutside = display.newRect(100-4,490,300,tHeight+6) fakeTextOutside:setFillColor(150,150,150) fakeTextInside = display.newRect(100,494,300-8,tHeight-2) scrollView:insert( fakeTextOutside ) scrollView:insert( fakeTextInside ) fakeTextInside:addEventListener("touch", showRealText1) justStarted = false end

Note- I did not include nor make the text replacement as I could do that with ease.

When I click on the fake text box, the real one appears but is not in editing mode, so another click is required to edit. (This might be a problem for the user, but I do not think there is any possible solutions for this problem.)

The “real” problem is when my scroll view starts to move, I try to remove the real text field, but it does not work.

Any help would be much appreciated.

Summit Tech