And then ... updated main.lua taking advantage of the inputText tutorial code :
display.setStatusBar( display.HiddenStatusBar )
--import the widget library
local widget = require( "widget_newTextField" )
local widget = require( "widget" )
-- create a constant for the left spacing of the row content
local LEFT_PADDING = 10
--Set the background to white
display.setDefault( "background", 1, 1, 1 )
--Create a group to hold our widgets & images
local widgetGroup = display.newGroup()
-- The gradient used by the title bar
local titleGradient = {
type = 'gradient',
color1 = { 189/255, 203/255, 220/255, 255/255 },
color2 = { 89/255, 116/255, 152/255, 255/255 },
direction = "down"
}
local inputFontSize = 18
local searchField
local list
local fieldHandler
local searchBarActiveImage
local tableViewYDelta = 30
local searchBarVisible = false -- Boolean used to track searchBar state
local backButton, resetSearchButton, cancelButton
local rowTitles = {}
local eraseInitText = true
-- Create toolbar to go at the top of the screen
local titleBar = display.newRect( display.contentCenterX, 0, display.contentWidth, 32 )
titleBar:setFillColor( titleGradient )
titleBar.y = display.screenOriginY + titleBar.contentHeight * 0.5
-- create embossed text to go on toolbar
local titleText = display.newEmbossedText( "My List", display.contentCenterX, titleBar.y, native.systemFontBold, 20 )
-- create a shadow underneath the titlebar (for a nice touch)
local shadow = display.newImage( "shadow.png" )
shadow.anchorX = 0; shadow.anchorY = 0 -- TopLeft anchor
shadow.x, shadow.y = 0, titleBar.y + titleBar.contentHeight * 0.5
shadow.xScale = 320 / shadow.contentWidth
shadow.alpha = 0.45
--Text to show which item we selected
local itemSelected = display.newText( "You selected", 0, 0, native.systemFontBold, 24 )
itemSelected:setFillColor( 0 )
itemSelected.x = display.contentWidth + itemSelected.contentWidth * 0.5
itemSelected.y = display.contentCenterY
widgetGroup:insert( itemSelected )
-- Handle row rendering
local function onRowRender( event )
local phase = event.phase
local row = event.row
local isCategory = row.isCategory
-- in graphics 2.0, the group contentWidth / contentHeight are initially 0, and expand once elements are inserted into the group.
-- in order to use contentHeight properly, we cache the variable before inserting objects into the group
local groupContentHeight = row.contentHeight
if row.id == "searchBar" then
local searchBarImage = display.newImageRect( row, "searchBar.png", 320, 44 )
searchBarImage.anchorX = 0
searchBarImage.anchorY = 0
searchBarImage.x = 0
searchBarImage.y = 0
else
local rowTitle = display.newText( row, rowTitles[row.index], 0, 0, native.systemFontBold, 16 )
-- in Graphics 2.0, the row.x is the center of the row, no longer the top left.
rowTitle.x = LEFT_PADDING
-- we also set the anchorX of the text to 0, so the object is x-anchored at the left
rowTitle.anchorX = 0
rowTitle.y = groupContentHeight * 0.5
rowTitle:setFillColor( 0, 0, 0 )
if not isCategory then
local rowArrow = display.newImage( row, "rowArrow.png", false )
rowArrow.x = row.contentWidth - LEFT_PADDING
-- we set the image anchorX to 1, so the object is x-anchored at the right
rowArrow.anchorX = 1
-- we set the image anchorX to 1, so the object is x-anchored at the right
rowArrow.y = groupContentHeight * 0.5
end
end
end
--
-- Set up a function to handle the editing events and dismiss the keyboard when done.
--
local function textFieldHandler( event )
--
-- event.text only exists during the editing phase to show what's being edited.
-- It is **NOT** the field's .text attribute. That is event.target.text
--
if event.phase == "began" then
-- user begins editing textField
print( "Begin editing", event.target.text )
-- check if we are supposed to clear the initial text supplied to the widget
if eraseInitText then
event.target.text = ""
eraseInitText = false
end
elseif event.phase == "ended" or event.phase == "submitted" then
-- do something with defaulField's text
print( "Final Text: ", event.target.text)
native.setKeyboardFocus( nil )
searchTextSubmitted( event.target.text )
elseif event.phase == "editing" then
print( event.newCharacters )
print( event.oldText )
print( event.startPosition )
print( event.text )
end
end
local function searchBarActivate()
--
-- Create an instance of the widget.
--
searchField = widget.newTextField({
width = 183,
height = 24,
text = "Search",
fontSize = 18,
font = "HelveticaNeue-Light",
cornerRadius = 0,
strokeWidth = 1,
inputType = "default",
keyboardType = "search",
autoPopKeyboard = true,
--eraseInitText = true,
listener = textFieldHandler,
})
--searchField.anchorX = 0; searchField.anchorY = 0
searchField.x = 125
searchField.y = 22
searchField.alpha = 0
--eraseInitText = true
-- Move tableView up by number of pixels specified in tableViewYDelta variable
transition.to( list, { y= (-1 * tableViewYDelta), time = 150, delta = "true" } )
-- Make the hidden Search UI elements visible gradually
transition.to( searchBarActiveImage, { time=200, alpha=1 } )
transition.to( searchField, { time=200, alpha=1 } )
transition.to( cancelButton, { time=200, alpha=1 } )
transition.to( resetSearchButton, { time=200, alpha=1 } )
-- Bring keyboard up without waiting for user tap into Search text box
native.setKeyboardFocus( searchField )
-- Lock the tableView so it does not respond to scrolling
list._view._isVerticalScrollingDisabled = true
searchBarVisible = true
end
-- Hande row touch events
local function onRowTouch( event )
local phase = event.phase
local row = event.target
if "press" == phase then
print( "Pressed row: " .. row.index )
elseif "release" == phase then
-- Update the item selected text
print( "Tapped and/or Released row: " .. row.index )
-- tap & release occured on 1st row which happens to be the search box.
if row.index == 1 then
-- Check if search box is already active
if searchBarVisible == false then
searchBarActivate()
end
else
itemSelected.text = "You selected: " .. rowTitles[row.index]
--Transition out the list, transition in the item selected text and the back button
-- The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object's contentWidth
--transition.to( list, { x = - list.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
transition.to( list, { x = - list.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
transition.to( itemSelected, { x = display.contentCenterX, time = 400, transition = easing.outExpo } )
transition.to( backButton, { alpha = 1, time = 400, transition = easing.outQuad } )
end
end
end
-- Create a tableView
list = widget.newTableView
{
top = 32,
width = 320,
height = 448,
onRowRender = onRowRender,
onRowTouch = onRowTouch,
}
searchBarActiveImage = display.newImageRect( widgetGroup, "searchBarEditing.png", 320, 44 )
searchBarActiveImage.anchorX = 0
searchBarActiveImage.anchorY = 0
searchBarActiveImage.x = 0
searchBarActiveImage.y = 0
searchBarActiveImage.alpha = 0
widgetGroup:insert( searchBarActiveImage )
--Insert widgets/images into a group
widgetGroup:insert( list )
widgetGroup:insert( titleBar )
widgetGroup:insert( titleText )
widgetGroup:insert( shadow )
widgetGroup:insert( searchBarActiveImage )
local function searchTextSubmitted(searchText)
print("Search text submitted " .. searchText)
-- Hide keyboard
native.setKeyboardFocus( nil )
-- Hide searchBox
searchField.alpha = 0
searchBarActiveImage.alpha = 0
cancelButton.alpha = 0
resetSearchButton.alpha = 0
-- Move tableView down by number of pixels specified in tableViewYDelta variable
transition.to( list, { y= tableViewYDelta, time = 200, delta = "true" } )
-- release the scroll lock on tableView
list._view._isVerticalScrollingDisabled = false
searchBarVisible = false
-- Remove the native.textField so that it does not cause mischief
--[[] if searchField then
searchField:removeSelf()
searchField = nil
end
]]--
--searchField:removeSelf()
end
--Items to show in our list
local listItems = {
{ title = "Breakfast", items = { "Coffee", "Bagel", "Cereal", "Toast" } },
{ title = "Lunch", items = { "Sandwich", "Taco", "Noodles", "Soup", "Fries" } },
{ title = "Dinner", items = { "Pizza", "Burger", "Steak", "Beef", "Lamb" } },
{ title = "Desert", items = { "Apple Pie", "Ice Cream", "Cake", "Chocolate" } },
}
--Handle the back button release event
local function onCancelRelease()
-- Hide Keyboard
native.setKeyboardFocus( nil )
-- Hide searchBox
searchBarActiveImage.alpha = 0
cancelButton.alpha = 0
resetSearchButton.alpha = 0
searchField.text = ""
searchField.alpha = 0
-- Move tableView down by number of pixels specified in tableViewYDelta variable
transition.to( list, { y= tableViewYDelta, time = 200, delta = "true" } )
-- release the scroll lock on tableView
list._view._isVerticalScrollingDisabled = false
searchBarVisible = false
-- Remove the native.textField so that it does not cause mischief
if searchField then
searchField:removeSelf()
searchField = nil
end
end
--Create the Cancel search button
cancelButton = widget.newButton
{
width = 50,
height = 56,
label = "Cancel",
--labelYOffset = - 1,
onRelease = onCancelRelease
}
cancelButton.alphaX, cancelButton.alphaY = 0, 0
cancelButton.alpha = 0
cancelButton.x = 284
cancelButton.y = 21
widgetGroup:insert( cancelButton )
--Handle the back button release event
local function onResetRelease()
print("Search field reset")
searchField.text = ""
end
--Create the Cancel search button
resetSearchButton = widget.newButton
{
width = 24,
height = 24,
label = "",
defaultFile = "resetSearch.png",
overFile = "resetSearch.png",
--labelYOffset = - 1,
onRelease = onResetRelease
}
resetSearchButton.alphaX, resetSearchButton.alphaY = 0, 0
resetSearchButton.alpha = 0
resetSearchButton.x = 234
resetSearchButton.y = 22
widgetGroup:insert( resetSearchButton )
--Handle the back button release event
local function onBackRelease()
--Transition in the list, transition out the item selected text and the back button
-- The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object's contentWidth
transition.to( list, { x = list.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
transition.to( itemSelected, { x = display.contentWidth + itemSelected.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
transition.to( backButton, { alpha = 0, time = 400, transition = easing.outQuad } )
end
--Create the back button
backButton = widget.newButton
{
width = 298,
height = 56,
label = "Back",
labelYOffset = - 1,
onRelease = onBackRelease
}
backButton.alpha = 0
backButton.x = display.contentCenterX
backButton.y = display.contentHeight - backButton.contentHeight
widgetGroup:insert( backButton )
rowTitles[1] = "Search"
list:insertRow{
id = "searchBar",
rowHeight = 42,
isCategory = false,
}
for i = 1, #listItems do
--Add the rows category title
rowTitles[ #rowTitles + 1 ] = listItems[i].title
--Insert the category
list:insertRow{
rowHeight = 24,
rowColor =
{
default = { 150/255, 160/255, 180/255, 200/255 },
},
isCategory = true,
}
--Insert the item
for j = 1, #listItems[i].items do
--Add the rows item title
rowTitles[ #rowTitles + 1 ] = listItems[i].items[j]
--Insert the item
list:insertRow{
rowHeight = 40,
isCategory = false,
listener = onRowTouch
}
end
end