How do I add individual text and image for tableView?

sebitttas · May 27, 2013, 3:03pm

Hello

I have been recently trying to figure out how I can add individual text and image. I had this method done with Widget 1.0 but when Widget 2.0 came it end up braking the the entire method that I need help. I’m not good when it comes to using tableViews. How would I convert the code I have here to Widget 2.0.

local list = widget.newTableView{ &nbsp;&nbsp; &nbsp;width = 320, &nbsp;&nbsp; &nbsp;height = 448, &nbsp;&nbsp; &nbsp;bottomPadding = 8, &nbsp;&nbsp; &nbsp;hideBackground = true, &nbsp;&nbsp; &nbsp;maskFile = "mask-320x448.png" } list.y = titleBar.y + titleBar.contentHeight \* 0.5 widgetGroup:insert( list ) local rowText = {"floor", "sky","ground"} &nbsp; local function onRowRender( event ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local row = event.row &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local rowGroup = event.view &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local label = "List item " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local color = 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --Create the row's text &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local thisRowText &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if rowText[row.index] ~= nil then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thisRowText = rowText[row.index] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thisRowText = "" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.textObj = display.newRetinaText( rowGroup, thisRowText, 0, 0,native.systemFontBold, 20 ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.textObj:setTextColor( color ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.textObj:setReferencePoint( display.CenterLeftReferencePoint ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.textObj.x = 90 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.textObj.y = 40 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rowGroup:insert( row.textObj ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --Create the row's arrow &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.arrow = display.newImage( "rowArrow.png",false ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.arrow.x = rowGroup.contentWidth - row.arrow.contentWidth \* 2 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.arrow.y = rowGroup.contentHeight \* 0.5 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rowGroup:insert( row.arrow ) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.arrow2 = display.newImageRect( "misc"..row.index..".png",60,60) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.arrow2.x = 40 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.arrow2.y = rowGroup.contentHeight \* 0.5 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rowGroup:insert( row.arrow2 )&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; end local function onRowTouch( event ) &nbsp;&nbsp; &nbsp;local row = event.row &nbsp;&nbsp; &nbsp;local background = event.background &nbsp;&nbsp; &nbsp;if event.phase == "press" then &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;print( "Pressed row: " .. row.index ) &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background:setFillColor( 0, 110, 233, 255 ) &nbsp;&nbsp; &nbsp;elseif event.phase == "release" or event.phase == "tap" then &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;director:changeScene("misc"..row.index) &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;print( "Tapped and/or Released row: " .. row.index ) &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background:setFillColor( 0, 110, 233, 255 ) &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;row.reRender = true &nbsp;&nbsp; &nbsp;end end -- insert rows into list (tableView widget) for i = 1, 3 do &nbsp;&nbsp; &nbsp;list:insertRow{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height = 85, &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;rowColor = { 255, 255, 255, 60 }, &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;onRender = onRowRender, &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;listener = onRowTouch &nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp; end &nbsp;

The part I’m always stump is at onRowRender function. That is where the error always happens.

rob · May 27, 2013, 6:07pm

Something like:

local function onRowRender( event ) &nbsp;&nbsp;&nbsp; local phase = event.phase &nbsp;&nbsp;&nbsp; local row = event.row &nbsp;&nbsp;&nbsp; local rowTitle = display.newText( row, "some text", 0, 0, native.systemFont, 14 ) &nbsp;&nbsp;&nbsp; rowTitle.x = row.x - ( row.contentWidth \* 0.5 ) + ( rowTitle.contentWidth \* 0.5 ) &nbsp;&nbsp;&nbsp; rowTitle.y = row.contentHeight \* 0.33 &nbsp;&nbsp;&nbsp; rowTitle:setTextColor( 0, 0, 0 ) &nbsp;&nbsp;&nbsp; local someImage = display.newImageRect(row, "someimage.png", 64, 25) &nbsp;&nbsp;&nbsp; someImage.x = row.contentWidth - 68 &nbsp;&nbsp;&nbsp; someImage.y = 15 &nbsp; end

event.row is the display group for the row. Just insert display objects into it and position as necessary. If you need to look stuff up in a table of data that goes with each row, the value row.index lets you know which row you are working on.

sebitttas · May 27, 2013, 6:55pm

Ah yes it did solve the problem, but I modified the text with the method you showed me in the past forum when you help me use tableView in version 1.0 like this

local rowText = {"sky","grass","ground"} local function onRowRender( event ) &nbsp; local phase = event.phase &nbsp;&nbsp;&nbsp; local row = event.row &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local thisRowText &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if rowText[row.index] ~= nil then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thisRowText = rowText[row.index] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thisRowText = "" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp; local rowTitle = display.newText( row, thisRowText, 0, 0, native.systemFont, 14 ) &nbsp;&nbsp;&nbsp; rowTitle.x = row.x - ( row.contentWidth \* 0.5 ) + ( rowTitle.contentWidth \* 0.5 ) &nbsp;&nbsp;&nbsp; rowTitle.y = row.contentHeight \* 0.33 &nbsp;&nbsp;&nbsp; rowTitle:setTextColor( 0, 0, 0 ) &nbsp;&nbsp;&nbsp; local someImage = display.newImageRect(row, "blk"..row.index..".png", 60, 60) &nbsp;&nbsp;&nbsp; someImage.x = row.contentWidth - 100 &nbsp;&nbsp;&nbsp; someImage.y = 40 end

Thank you very much for the help. You saved me from a disastrous problem that one my app was going to face in which it consist heavy use of tableView.

rob · May 27, 2013, 6:07pm

Something like:

local function onRowRender( event ) &nbsp;&nbsp;&nbsp; local phase = event.phase &nbsp;&nbsp;&nbsp; local row = event.row &nbsp;&nbsp;&nbsp; local rowTitle = display.newText( row, "some text", 0, 0, native.systemFont, 14 ) &nbsp;&nbsp;&nbsp; rowTitle.x = row.x - ( row.contentWidth \* 0.5 ) + ( rowTitle.contentWidth \* 0.5 ) &nbsp;&nbsp;&nbsp; rowTitle.y = row.contentHeight \* 0.33 &nbsp;&nbsp;&nbsp; rowTitle:setTextColor( 0, 0, 0 ) &nbsp;&nbsp;&nbsp; local someImage = display.newImageRect(row, "someimage.png", 64, 25) &nbsp;&nbsp;&nbsp; someImage.x = row.contentWidth - 68 &nbsp;&nbsp;&nbsp; someImage.y = 15 &nbsp; end

event.row is the display group for the row. Just insert display objects into it and position as necessary. If you need to look stuff up in a table of data that goes with each row, the value row.index lets you know which row you are working on.

sebitttas · May 27, 2013, 6:55pm

Ah yes it did solve the problem, but I modified the text with the method you showed me in the past forum when you help me use tableView in version 1.0 like this

local rowText = {"sky","grass","ground"} local function onRowRender( event ) &nbsp; local phase = event.phase &nbsp;&nbsp;&nbsp; local row = event.row &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; local thisRowText &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if rowText[row.index] ~= nil then &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thisRowText = rowText[row.index] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; thisRowText = "" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; end &nbsp;&nbsp;&nbsp; local rowTitle = display.newText( row, thisRowText, 0, 0, native.systemFont, 14 ) &nbsp;&nbsp;&nbsp; rowTitle.x = row.x - ( row.contentWidth \* 0.5 ) + ( rowTitle.contentWidth \* 0.5 ) &nbsp;&nbsp;&nbsp; rowTitle.y = row.contentHeight \* 0.33 &nbsp;&nbsp;&nbsp; rowTitle:setTextColor( 0, 0, 0 ) &nbsp;&nbsp;&nbsp; local someImage = display.newImageRect(row, "blk"..row.index..".png", 60, 60) &nbsp;&nbsp;&nbsp; someImage.x = row.contentWidth - 100 &nbsp;&nbsp;&nbsp; someImage.y = 40 end

Thank you very much for the help. You saved me from a disastrous problem that one my app was going to face in which it consist heavy use of tableView.