How to change Width of a native.newTextBox on button click?

Solar2D General Questions/Discussion
#1

Hey all!  I’ve created a native.newTextBox with a width of 800px.  I want to be able to dynamically move and change the width of this textbox to 400px when I click a button and then change it back to 800px when I click it again.  The problem is that the textbox keeps shrinking every time a click the button and never reverts back to the 800px.

My code for the button to control the textbox is as follows:

if ( “ended” == event.phase ) then

  if ButtonName == “Tab1” then

     print( “Button was pressed and released” )

     if (textBox.x>100) then

         transition.to( textBox, { x=50, width=860, time=200 } )

     else

         transition.to( textBox, { x=400, width=500, time=200 } )

     end

  end

end

How do I change the width of this native.newTextBox on fly?

Thanks!

#2

At this point, I don’t even need to transition it. I just need to change the x position (easy) and the width of the textbox on the fly… Help!

#3

Hi @zolnier,

I don’t think it’s possible to change the size post-creation, but you could remove the current box and replace it with a larger one, using the text content from the previous one to fill the new one.

Brent

#4

i could not do a code working when i changed the “width” like you did…but i managed to build a working version changing the xScale.

here’s the complete code:

local function inputListener( event ) if event.phase == "began" then elseif event.phase == "ended" then elseif event.phase == "editing" then end end local function createBox(x,y,width,height) local textBox = native.newTextBox( x, y, width, height ) textBox.text = "This is line 1.\nAnd this is line2" textBox.isEditable = true textBox:addEventListener( "userInput", inputListener ) textBox.anchorX=0 return textBox end local textBox=createBox(400,300,860,200) local button=display.newRect(100,100,100,100) local moving=false local function touch(self, event) if event.phase == "began" then display.getCurrentStage():setFocus( self, event.id ) self.isFocus = true print ("touch began") elseif self.isFocus then if event.phase == "moved" then elseif event.phase == "ended" or event.phase == "cancelled" then print( "Button was pressed and released" ) display.getCurrentStage():setFocus( self, nil ) self.isFocus = false if (textBox.x\>350) and moving==false then print ("reduce size") moving=true transition.to( textBox, { x=300, xScale=0.8, time=400, onComplete=function() if textBox then textBox:removeSelf() textBox=nil end textBox=createBox(300,300,860\*0.8,200) moving=false end} ) elseif (textBox.x\<=350) and moving==false then print ("enlarge size") moving=true transition.to( textBox, { x=400, xScale=1.25, time=400, onComplete=function() if textBox then textBox:removeSelf() textBox=nil end textBox=createBox(400,300,860,200) moving=false end} ) end end end return true end button.touch = touch button:addEventListener( "touch", button )
#5

Hi @carloscosta,

Thanks for posting this code, but can you confirm that it works on various devices? I’m not fully confident in scaling (xScale) a native text box object, since those are part of the native OS and they don’t behave exactly like typical Corona display objects. What happens to the text inside? Does it scale (stretch) also, or retain its natural appearance? Please do a little testing on this… I’m curious to hear the results, as I’ve never seen (and never tried) scaling native text boxes/fields.

Brent

#6

sorry, brent only today saw your post.

on android it reacts like it should be. the box grows and shrinks but text remains the same size and appearance. one “good” side effect was that while the box was growing the text inside of it reajust to the new size automatic. tested on nexus 7 2012 with loli 5.1.0

#7

if anyone wants to check it on an ios device heres the code i used it:

local function inputListener( event ) if event.phase == "began" then elseif event.phase == "ended" then elseif event.phase == "editing" then end end local function createBox(x,y,width,height) local textBox = native.newTextBox( x, y, width, height ) textBox.text = "This is line 1.\nAnd this is line2" textBox.isEditable = true textBox:addEventListener( "userInput", inputListener ) textBox.anchorX=0 return textBox end local widthBox=200 local heightBox=100 local originalPosX=50 local originalPosY=200 local textBox=createBox(originalPosX,originalPosY,widthBox,heightBox) local button=display.newRect(50,50,50,50) local moving=false local function touch(self, event) if event.phase == "began" then display.getCurrentStage():setFocus( self, event.id ) self.isFocus = true print ("touch began") elseif self.isFocus then print (textBox.width, widthBox, textBox.xScale) if event.phase == "moved" then elseif event.phase == "ended" or event.phase == "cancelled" then print( "Button was pressed and released" ) display.getCurrentStage():setFocus( self, nil ) self.isFocus = false if (textBox.xScale\>1) and moving==false then print ("reduce size") moving=true transition.to( textBox, { x=originalPosX, xScale=0.8, time=400, onComplete=function() --local width=textBox.contentWidth -- if textBox then -- textBox:removeSelf() -- textBox=nil -- end -- textBox=createBox(originalPosX,originalPosY,width,heightBox) moving=false end} ) elseif (textBox.xScale\<=1) and moving==false then print ("enlarge size") moving=true transition.to( textBox, { x=originalPosX, xScale=1.25, time=400, onComplete=function() -- local width=textBox.contentWidth -- if textBox then -- textBox:removeSelf() -- textBox=nil -- end -- textBox=createBox(originalPosX,originalPosY,width,heightBox) moving=false end} ) end end end return true end button.touch = touch button:addEventListener( "touch", button )

just copy past and build it. square is the button that makes text box enlarge or shrink.

#8

At this point, I don’t even need to transition it. I just need to change the x position (easy) and the width of the textbox on the fly… Help!

#9

Hi @zolnier,

I don’t think it’s possible to change the size post-creation, but you could remove the current box and replace it with a larger one, using the text content from the previous one to fill the new one.

Brent

#10

i could not do a code working when i changed the “width” like you did…but i managed to build a working version changing the xScale.

here’s the complete code:

local function inputListener( event ) if event.phase == "began" then elseif event.phase == "ended" then elseif event.phase == "editing" then end end local function createBox(x,y,width,height) local textBox = native.newTextBox( x, y, width, height ) textBox.text = "This is line 1.\nAnd this is line2" textBox.isEditable = true textBox:addEventListener( "userInput", inputListener ) textBox.anchorX=0 return textBox end local textBox=createBox(400,300,860,200) local button=display.newRect(100,100,100,100) local moving=false local function touch(self, event) if event.phase == "began" then display.getCurrentStage():setFocus( self, event.id ) self.isFocus = true print ("touch began") elseif self.isFocus then if event.phase == "moved" then elseif event.phase == "ended" or event.phase == "cancelled" then print( "Button was pressed and released" ) display.getCurrentStage():setFocus( self, nil ) self.isFocus = false if (textBox.x\>350) and moving==false then print ("reduce size") moving=true transition.to( textBox, { x=300, xScale=0.8, time=400, onComplete=function() if textBox then textBox:removeSelf() textBox=nil end textBox=createBox(300,300,860\*0.8,200) moving=false end} ) elseif (textBox.x\<=350) and moving==false then print ("enlarge size") moving=true transition.to( textBox, { x=400, xScale=1.25, time=400, onComplete=function() if textBox then textBox:removeSelf() textBox=nil end textBox=createBox(400,300,860,200) moving=false end} ) end end end return true end button.touch = touch button:addEventListener( "touch", button )
#11

Hi @carloscosta,

Thanks for posting this code, but can you confirm that it works on various devices? I’m not fully confident in scaling (xScale) a native text box object, since those are part of the native OS and they don’t behave exactly like typical Corona display objects. What happens to the text inside? Does it scale (stretch) also, or retain its natural appearance? Please do a little testing on this… I’m curious to hear the results, as I’ve never seen (and never tried) scaling native text boxes/fields.

Brent

#12

sorry, brent only today saw your post.

on android it reacts like it should be. the box grows and shrinks but text remains the same size and appearance. one “good” side effect was that while the box was growing the text inside of it reajust to the new size automatic. tested on nexus 7 2012 with loli 5.1.0

#13

if anyone wants to check it on an ios device heres the code i used it:

local function inputListener( event ) if event.phase == "began" then elseif event.phase == "ended" then elseif event.phase == "editing" then end end local function createBox(x,y,width,height) local textBox = native.newTextBox( x, y, width, height ) textBox.text = "This is line 1.\nAnd this is line2" textBox.isEditable = true textBox:addEventListener( "userInput", inputListener ) textBox.anchorX=0 return textBox end local widthBox=200 local heightBox=100 local originalPosX=50 local originalPosY=200 local textBox=createBox(originalPosX,originalPosY,widthBox,heightBox) local button=display.newRect(50,50,50,50) local moving=false local function touch(self, event) if event.phase == "began" then display.getCurrentStage():setFocus( self, event.id ) self.isFocus = true print ("touch began") elseif self.isFocus then print (textBox.width, widthBox, textBox.xScale) if event.phase == "moved" then elseif event.phase == "ended" or event.phase == "cancelled" then print( "Button was pressed and released" ) display.getCurrentStage():setFocus( self, nil ) self.isFocus = false if (textBox.xScale\>1) and moving==false then print ("reduce size") moving=true transition.to( textBox, { x=originalPosX, xScale=0.8, time=400, onComplete=function() --local width=textBox.contentWidth -- if textBox then -- textBox:removeSelf() -- textBox=nil -- end -- textBox=createBox(originalPosX,originalPosY,width,heightBox) moving=false end} ) elseif (textBox.xScale\<=1) and moving==false then print ("enlarge size") moving=true transition.to( textBox, { x=originalPosX, xScale=1.25, time=400, onComplete=function() -- local width=textBox.contentWidth -- if textBox then -- textBox:removeSelf() -- textBox=nil -- end -- textBox=createBox(originalPosX,originalPosY,width,heightBox) moving=false end} ) end end end return true end button.touch = touch button:addEventListener( "touch", button )

just copy past and build it. square is the button that makes text box enlarge or shrink.