Kind Corona experts,
I am looking for help and suggestions on how to manipulate the objects that get put into table rows. I’d like to have a delete button appear /disappear based on the swipeLeft gesture. It would also be great to be able to move a text object left or right on the fly.
I’ve spent considerable time browsing the forums, where I’ve seen some older solutions, learned that rerendering a table currently requires deleting rows and recreating it, that old discussions that look promising use undocumented variables _view etc., and a mixture of daily builds, and of course I see some frustration among professional devs about the timing of “fixing” such things. That’s not why I’m posting, but what an amazing and sharing community!
Instead, I’d like to know if what I propose in the code below is possible. In particular see the comments I’ve put in the onRowTouch function. I’d also welcome any suggestions on how to organize this basic table example better.
I will admit right up front that I’m only an occasional user and in this area don’t know enough to know if there’s an obvious bit of syntax that would work or if it simply can’t be done right now. I’m using starter/public build Version 2013.2100
This seems like one of those “last mile” problems that somehow should have an obvious solution… Thanks in advance for any ideas.
Dan
[lua]
– test of table with row delete code
local widget = require( “widget” )
– set up the data
local datatable = {} – holds records from which to build table
local tbView – this is the tableView widget, forward declaration
datatable =
{
{
id = 1,
str = ‘Item One’
},
{
id = 2,
str = ‘Item Two’
}
}
function populatetable()
if #datatable == 0 then
else
if tbView then
tbView:deleteAllRows()
end
for i = 1, #datatable do
local rowHeight = 50
local rowColor = { default={ 1, 1, 1 }, over={ 1, 1, 1 } }
local lineColor = {0.25, 0.25, 0.25, 0.5 }
– Insert a row into the tableView
tbView:insertRow(
{
rowHeight = rowHeight,
rowColor = rowColor,
lineColor = lineColor
}
)
end
end
end – populatetable
– delete function
local function onDelete ( event )
local rowIndex = event.target.index
local rowGroup = event.row
print (‘Delete tapped’)
– delete the record code goes here
return true
end
– render rows
– for now a simple text line plus the delete button (starts invisible alpha = 0)
– swipe left should make it visible (alpha = 1)
local function onRowRender( event )
local rowGroup = event.row – Get reference to the row group
local rowIndex = event.row.index
local rowHeight = rowGroup.contentHeight
local rowWidth = rowGroup.contentWidth
local rowTitle = display.newText( rowGroup, datatable[rowIndex].str, 0, 0, “HelveticaNeue-Light”, 16 )
rowTitle:setFillColor( 0, 0, 0, 1 )
rowTitle.anchorX = 0
rowTitle.x = 20
rowTitle.y = rowHeight * 0.5
local deleteButton = display.newText(“Delete”, 0, 0, “HelveticaNeue-Light”, 16)
deleteButton:setFillColor(1,0,0,0) – ( change to 1,0,0,1 to start w/ delete showing)
deleteButton.x = rowWidth - 100
deleteButton.y = rowHeight * 0.5
deleteButton:addEventListener( “tap”, onDelete )
rowGroup:insert(deleteButton)
end – onrowrender
– process touches or swipe left to delete
local function onRowTouch ( event )
local phase = event.phase
local rowIndex = event.target.index
local rowGroup = event.row
if (( phase == “swipeLeft” )) then
print(‘swiped left’)
– what I want to do is reveal the delete button by setting alpha to 1
– deleteButton:setFillColor(1,0,0,1)
– this would also be the place to do a little transition.to magic to
– slide the text to the left…
– so, the 64k question is: how to access objects in the row to change
– their properties or move them around…
end
if ((phase == “release”) or (phase==“tap”)) then
print(‘row tapped’)
– row was touched or tapped so do other stuff…
end
return true
end
– create the table
local listOptions =
{
left = 0,
top = 100,
height = 300,
width = display.contentWidth,
onRowRender = onRowRender,
onRowTouch = onRowTouch,
hideScrollBar = true,
noLines = false,
listener = scrollListener
}
tbView = widget.newTableView( listOptions )
– populate the table
populatetable()
[/lua]