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