Can someone plz explain why my tableView code doesn't work?

[updated 2]
Okay, after making an app (on build 704) that uses lists, I wanted to upgrade to the latest build (759).
To test the update tableView widget, I made some simple test code to get familiar with it.
Problem? I can’t get it to work. The sample codes in the reference section of the website and the blog (addressing the post 704 changes to the tableView), simply don’t work.
The code below is what I managed to get some functionality from but far from perfect.

  1. Even though I’ve created the mask file (PNG, 324x209 white with a 2 px black border), on the top of the list, when scrolling you see the next row being rendered above the mask area.
  2. The text in the row is cut off
  3. When I use the bgColor in the list options and set it to red ( {255,0,0,255} ) it turns out yellow!
  4. the text look stretched or something, it isn’t crisp
  5. With the above mentioned mask file, strange things happen, like a sort of gradient fill to the rows.

The weird thing is when I create a pure white mask file with the exact dimensions of my list (320x205 in this case), the display looks better. No more gradient color of the row and it responds to color changes as it should.

[update 2]
Even weirder. It doesn’t load the mask file at all. The command maskFile = “mask.png” simply is ignored. Not matter what I put in, mask=“gg”, maskfile=“mask.png”, maskFile = “invalidname.png”, Corona doesn’t generate an error and the code runs, but apparently without mask. That would explain why I see the rendering of the rows.
Bug?

In the sample code in the onRowRender to say only:

row.textObj = text

But that only drops all the text on the top of the screen and not in the rows.
So I added:

group:insert(row.textObj)

Anyway. I would appreciate some help before I try to apply the new tableView to my app that runs smoothly on build 704.

Thanks!!

Dutchottie

[code]
local widget = require “widget”

– create the tableView widget
local list = widget.newTableView{
–width = 320,
height = 205,
top = display.contentHeight - 205,
maskFile = “mask320x205.png”,
bgColor = { 255, 0, 0, 255 },
hideBackground = false
}
– function below handles row touches, swipes, etc.
local function onRowTouch( event )
local row = event.row
local text = row.textObj

if event.phase == “press” or event.phase == “tap” then
if text then
text.text = "Touched row with id " … row.id
end

elseif event.phase == “swipeLeft” then
if text then
text.text = “Swiped row " … event.index … " LEFT.”
end

elseif event.phase == “swipeRight” then
if text then
text.text = “Swiped row " … event.index … " RIGHT.”
end

elseif event.phase == “release” then
text.text = “”
– force row re-render on next TableView update
row.reRender = true
end

– reposition text
if text then
text:setReferencePoint( display.CenterLeftReferencePoint )
text.x = 25
text.y = row.height * 0.5
end
end


– function below handles row rendering
local function onRowRender( event )
local group = event.view
local row = event.target
local index = event.index
local id = event.id

–local theString = “this is the text to display in the row”
local theString = “Row #” … index … " id: " … id
local text = display.newText( theString, 0, 0, native.systemFont, 14 )
text:setReferencePoint( display.CenterLeftReferencePoint )
text:setTextColor(0)
text.x = 15
text.y = row.height * 0.5

– create reference to text object (so it can be accessed externally)
row.textObj = text
group:insert(text)
end

for i=1,20 do
local rowHeight, rowColor, lineColor, isCategory
rowColor = {255,255,255}
rowHeight = 50
–lineColor = {0,0,0,255}
–if i == 5 then rowHeight = 30 end
if i == 10 then rowColor = {255,0,0,255} end

– function below is responsible for creating the row
list:insertRow{
id = i,
listener=onRowTouch,
onRender=onRowRender,
height=rowHeight,
isCategory=isCategory,
rowColor=rowColor,
lineColor=lineColor
}
end
[import]uid: 123200 topic_id: 22777 reply_id: 322777[/import]

Hi.

  1. Your tableview width/height must correspond to your mask files dimensions. If you mask file is 320 x 366 for instance you must set your tableview width/height to 318 x 364.

This solves your rendering issue.

  1. The text, you probably want to use
    display.newRetinaText

instead of
display.newText

[import]uid: 84637 topic_id: 22777 reply_id: 90945[/import]

@Danny
Thanks!
The Retina text does work, although what if I also want it to work on a iPhone 3G?
And although it’s sharp it still gets chopped of after “more”?!

I changed a couple of things to, hopefully, make things clearer. See code below.
So when I use a maskFile without black border, it isn’t used. I see the table but the rows that are generated and ready for destruction are visible. Logical without mask.
When I add a 2px black border to the maskFile (making the PNG 4px wider and higher than the list width and height - like you said and the tutorial on masks explains), the screen turns black. There is a table, because when I press the screen it results in the row number being printed in the terminal window.
I’ve added a colored background and lo and behold, there is the table.
But no matter what I do, the table fill color is transparant. That also means I cannot check if the table is correctly masked now. I can change the line colors.
So I added an image file to create some contrast (I used the same mask image file, but now with newImage()). Now it gets really weird. 1) the table is still not masked and 2) even if I place the image of screen (x=1000), the table row color is now white (!).
It gets even better when I add the bgColor = { 255,0,0} to the options. The background of the table turns yellow.

I’m really lost now. I thought I had the tableviews figured out in build 704 with my app, now I’m not so sure any more :frowning:

Thanks for the help so far.

[code]

local widget = require “widget”

local bkgd = display.newRect(0, 0, 320, 480)
bkgd:setFillColor(150,150,150,255)

local img = display.newImage(“mask320x205.png”, 50, 10)

local listOptions = {
top = display.statusBarHeight + 50,
width = 318,
height = 302,
hideBackground = false,
bgColor = { 255, 0, 0},
maskFile = “mask320x205.png”
}

local list = widget.newTableView( listOptions )

– onEvent listener for the tableView
local function onRowTouch( event )
local row = event.row
local rowGroup = event.view

if event.phase == “press” then
if not row.isCategory then rowGroup.alpha = 0.5; end

elseif event.phase == “swipeLeft” then
print( “Swiped left.” )

elseif event.phase == “swipeRight” then
print( “Swiped right.” )

elseif event.phase == “release” then

if not row.isCategory then
– reRender property tells row to refresh if still onScreen when content moves
row.reRender = true
print( “You touched row #” … event.index )
end
end

return true
end

– onRender listener for the tableView
local function onRowRender( event )
local row = event.target
local rowGroup = event.view

local text = display.newRetinaText( “Row #” … event.index … " and some more text", 12, 0, native.systemFont, 14 ) --“Helvetica-Bold”, 18 )
text:setReferencePoint( display.CenterLeftReferencePoint )
text.y = row.height * 0.5
if not row.isCategory then
text.x = 15
text:setTextColor( 0 )
end

– must insert everything into event.view:
rowGroup:insert( text )
end

– Create 100 rows, and two categories to the tableView:
for i=1,100 do
local rowHeight, rowColor, lineColor, isCategory
– rowColor = {255,255,255}
if i == 5 then rowHeight = 30 end
if i == 10 then rowColor = {255,0,0,255} end

– function below is responsible for creating the row
list:insertRow{
listener=onRowTouch,
onRender=onRowRender,
height=rowHeight,
isCategory=isCategory,
rowColor=rowColor,
lineColor=lineColor
}
end

[/code] [import]uid: 123200 topic_id: 22777 reply_id: 90976[/import]