Viewing Native Text Input field in the Corona Simulator

Working with the native.newTextField() tonight and I needed a way to see the field in the simulator for easy positioning.  Out of the box this is not available within the Corona SDK simulator, but thanks to this post by Jon Beebe it got me thinking... Can we just "overload" the native.newTextField() method and Hi-Jack it when we are in the simulator and instead draw a rounded edge rectangle on the screen for the sake of viewing and positioning things?  Well, yes we can!

Let me walk you through it...  I threw a simple example together to demonstrate this. (I'll keep it as small as possible, you will also need the ui.lua file from Corona examples to run this example, the other two files you need are at the bottom of the post)

In the main.lua file we simply add a label and a text input field (which will not display in the simulator without requiring in the "hijacks.lua" file)

The magic is in overloading the native.newTextField) method to do something different when we are in the simulator, but I want it to behave as normal when running on a device.  Don't let the box.setTextColor declaration in the hijacks file scare you, this is just a placeholder basically because I happen to be setting the text color in my main.lua file for the text input field.  This declaration accommodates this working in simulator mode as well as a device build without me having to toggle things or comment out things, etc.  Of course, there's other tricks for capturing text input as this still won't do that, it's just for visual representation and positioning of things.  For my release build I will just comment out the requires("hijacks") line and away I go!


main.lua
<code>

require("hijacks")
local ui = require("ui")

local function init()

local g = display.newGroup()
local background = display.newRect(0,display.screenOriginY, display.contentWidth, display.contentHeight-display.screenOriginY)
background:setFillColor(111, 111, 255)

g:insert(background)

-- Handler for the native keyboard
   local fieldHandler = function( event )
-- Hide keyboard when the user clicks "Return" in this field
  if ( "submitted" == event.phase ) then
    native.setKeyboardFocus( nil )
  end
 end

local label = display.newText( "Location: ", 10, 252, native.systemFont, 18)
label:setTextColor(255,255,255)
g:insert(label)

-- A native text input field (requires XCode Simulator build or device build)
inputField = native.newTextField( 100, 252, 200, 24, fieldHandler )
inputField.font = native.newFont( native.systemFont, 20 )
inputField.text = "Papillion, NE" -- example of searchable location
inputField:setTextColor( 45, 45, 45 )
g:insert(inputField)

end

init()

</code>


hijacks.lua
<code>

module(..., package.seeall)

local priorNativeNewTextField = native.newTextField
native.newTextField = function(left, top, width, height, listener)

  local box
 
  if system.getInfo( "environment" ) == "simulator" then

     box = display.newRoundedRect(left, top, width, height, 12)
     box.setTextColor = function(...)
     end
  else
     box = priorNativeNewTextField(left, top, width, height, listener)
  end

  return box
end

</code>