Table View Data Issue

Hellgourd_Studios · February 10, 2014, 7:42am

So here goes…

I have a table that feed data to a table view. My ‘onrowRender’ works perfectly…

local function onRowRender( event ) local phase = event.phase local row = event.row local groupContentHeight = row.contentHeight local rowIcon = display.newImageRect(row, "images/" .. albumData[row.index].albumCover, 72, 72); rowIcon.x = \_W\*0.17; rowIcon.y = groupContentHeight\*0.5; print("Release year: " .. albumData[row.index].albumYear) local rowYear = display.newText( row, albumData[row.index].albumYear, 0, 0, "Arial-Black", 11 ); rowYear.x = \_W\*0.32; rowYear.y = groupContentHeight \* 0.20; rowYear.anchorX = 0; rowYear:setFillColor( 255, 255, 255 ); print("Album name: " .. albumData[row.index].albumName) local rowTitle = display.newText( row, albumData[row.index].albumName, 0, 0, "Arial-Black", 12 ); rowTitle.x = \_W\*0.32; rowTitle.y = groupContentHeight \* 0.45; rowTitle.anchorX = 0; rowTitle:setFillColor( 255, 255, 255 ); local rowNumSongs = display.newText( row, "Number of songs: " .. table.getn( albumData[row.index].songs), 0, 0, "Arial-Black", 10); rowNumSongs.x = \_W\*0.32; rowNumSongs.y = groupContentHeight \* 0.78; rowNumSongs.anchorX = 0; rowNumSongs:setFillColor( 255, 255, 255 ); local rowRtArrowIcon = display.newImageRect(row, "images/iconRightArrow.png", 24, 24); rowRtArrowIcon.x = \_W\*0.935; rowRtArrowIcon.y = groupContentHeight\*0.5; print ("Total songs:" .. table.getn( albumData[row.index].songs ) ) end

Everything in the render works properly. next would be my update, or as I call it my Detail view. This too works properly as it should…

local function onRowTouch( event ) local phase = event.phase local row = event.target if "release" == phase then iconBack.isVisible = false; iconBackTable = display.newImageRect("images/btnBack.png", 45, 30); iconBackTable.x=35; iconBackTable.y = titleBar.y+1; bgGroup:insert(iconBackTable) iconBackTable:addEventListener("touch", goBackTo ); titleText.text = albumData[row.index].albumName itemSelected.text = "You selected item " .. 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( tableView, { x = - tableView.contentWidth, time = 400, transition = easing.outExpo } ) --transition.to( itemSelected, { x = display.contentCenterX, time = 400, transition = easing.outExpo } ) --transition.to( backButton, { x = display.contentCenterX, time = 400, transition = easing.outQuad } ) varTotalSongs = table.getn( albumData[row.index].songs ) cdCover = display.newImageRect("images/" .. albumData[row.index].albumCover, 100, 100); cdCover.x = \_W+100; cdCover.y = \_H\*0.195; tableGroup:insert( cdCover ) transition.to( cdCover, { x = \_W\*.18, time = 400, transition = easing.outQuad } ) cdTitle = display.newText( albumData[row.index].albumName, 0, 0, "Arial-Black", 15 ); cdTitle.anchorX = 0; cdTitle:setFillColor( 255, 255, 255 ); cdTitle.x = display.contentWidth + cdTitle.contentWidth cdTitle.y = \_H\*0.11 tableGroup:insert( cdTitle ) transition.to( cdTitle, { x = \_W\*.36, time = 500, transition = easing.outQuad } ) cdType = display.newText( "\( " .. albumData[row.index].albumType .. " \)", 0, 0, "Arial-Black", 12 ); cdType.anchorX = 0; cdType:setFillColor( 255, 255, 255 ); cdType.x = display.contentWidth + cdType.contentWidth cdType.y = \_H\*0.15 tableGroup:insert( cdType ) transition.to( cdType, { x = \_W\*.36, time = 500, transition = easing.outQuad } ) cdYear = display.newText( "Release Year: " .. albumData[row.index].albumYear, 0, 0, "Arial-Black", 11 ); cdYear.anchorX = 0; cdYear:setFillColor( 255, 255, 255 ); cdYear.x = display.contentWidth + cdYear.contentWidth cdYear.y = \_H\*0.185 tableGroup:insert( cdYear ) transition.to( cdYear, { x = \_W\*.36, time = 500, transition = easing.outQuad } ) linkParAdv = display.newImageRect("images/iconPdv.png", 48, 48); linkParAdv.x = \_W+100; linkParAdv.y = \_H\*0.265; tableGroup:insert( linkParAdv ) transition.to( linkParAdv, { x = \_W\*.5, time = 400, transition = easing.outQuad } ) linkTunes = display.newImageRect("images/btnitunes.png", 90, 33); linkTunes.x = \_W+100; linkTunes.y = \_H\*0.265; tableGroup:insert( linkTunes ) transition.to( linkTunes, { x = \_W\*.83, time = 400, transition = easing.outQuad } ) topHR = display.newLine(5, \_H\*0.31, \_W-5, \_H\*0.31) topHR:setStrokeColor( 255, 255, 255, 1 ) topHR.strokeWidth = 1 tableGroup:insert( topHR ) lblSongs = display.newText( "Track Listing", 0, 0, "Arial-Black", 10 ); lblSongs.anchorX = 0; lblSongs:setFillColor( 255, 255, 255 ); lblSongs.x = display.contentWidth + lblSongs.contentWidth lblSongs.y = \_H\*0.33 tableGroup:insert( lblSongs ) transition.to( lblSongs, { x = \_W\*.16, time = 500, transition = easing.outQuad } ) lblRuntime = display.newText( "Runtime", 0, 0, "Arial-Black", 10 ); lblRuntime.anchorX = 0; lblRuntime:setFillColor( 255, 255, 255 ); lblRuntime.x = display.contentWidth + lblRuntime.contentWidth lblRuntime.y = \_H\*0.33 tableGroup:insert( lblRuntime ) transition.to( lblRuntime, { x = \_W\*.81, time = 500, transition = easing.outQuad } ) intY = \_H\*0.37 for j = 1, #albumData[row.index].songs, 1 do songID = j print(j) songTableGroup = display.newGroup(); print("\t" .. albumData[row.index].songs[j].songTitle ) songTitle = display.newText( albumData[row.index].songs[j].songTitle, 0, 0, "Arial-Black", 12 ); songTitle.anchorX = 0; songTitle:setFillColor( 255, 255, 255 ); songTitle.x = display.contentWidth + songTitle.contentWidth songTitle.y = intY songTableGroup:insert( songTitle ) transition.to( songTitle, { x = \_W\*.17, time = 500, transition = easing.outQuad } ) lblExp = display.newText(albumData[row.index].songs[j].xPlicit, 0, 0, "Arial-Black", 12 ); lblExp.anchorX = 0; lblExp:setFillColor( 248, 0, 0 ); lblExp.x = display.contentWidth + lblExp.contentWidth lblExp.y = intY songTableGroup:insert( lblExp ) transition.to( lblExp, { x = \_W\*.78, time = 500, transition = easing.outQuad } ) songRuntime = display.newText( albumData[row.index].songs[j].runtime, 0, 0, "Arial-Black", 12 ); songRuntime.anchorX = 0; songRuntime:setFillColor( 255, 255, 255 ); songRuntime.x = display.contentWidth + songRuntime.contentWidth songRuntime.y = intY songTableGroup:insert( songRuntime ) transition.to( songRuntime, { x = \_W\*.84, time = 500, transition = easing.outQuad } ) intY = intY + 17 end tableGroup:insert(songTableGroup) end end

Now for my huge problem. The problem is in my go back event.

local function goBackTo( event ) --Transition in the list, transition out the item selected text and the back button titleText.text = "Royal Bliss Music"; iconBackTable.isVisible = false; timerStash.tmrBack = timer.performWithDelay(300, function() iconBack.isVisible = true; end, 1) --iconBack.isVisible = true; -- 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( tableView, { x = tableView.contentWidth \* 0.5, time = 400, transition = easing.outExpo } ) transition.to( cdTitle, { x = display.contentWidth + cdTitle.contentWidth, time = 500, transition = easing.outQuad } ) transition.to( cdType, { x = display.contentWidth + cdType.contentWidth, time = 500, transition = easing.outQuad } ) transition.to( cdYear, { x = display.contentWidth + cdYear.contentWidth, time = 500, transition = easing.outQuad } ) transition.to( linkParAdv, { x = display.contentWidth + linkParAdv.contentWidth, time = 400, transition = easing.outQuad } ) transition.to( linkTunes, { x = display.contentWidth + linkTunes.contentWidth, time = 400, transition = easing.outQuad } ) transition.to( lblSongs, { x = display.contentWidth + lblSongs.contentWidth, time = 500, transition = easing.outQuad } ) transition.to( lblRuntime, { x = display.contentWidth + lblRuntime.contentWidth, time = 500, transition = easing.outQuad } ) transition.to( cdCover, { x = display.contentWidth + cdCover.contentWidth, time = 400, transition = easing.outQuad } ) transition.to( event.target, { x = display.contentWidth + event.target.contentWidth, time = 400, transition = easing.outQuad } ) topHR:removeSelf() transition.to( songTitle, { x =display.contentWidth + songTitle.contentWidth, time = 500, transition = easing.outQuad } ) --transition.to( lblExp, { x = display.contentWidth + lblExp.contentWidth, time = 500, transition = easing.outQuad } ) --transition.to( songRuntime, { x =display.contentWidth + songRuntime.contentWidth, time = 500, transition = easing.outQuad } ) end

what it is doing is removing all the static items without any issues. However when i hit the items that were built from the data and inserted with the for…do loop, they do not remove. The offending objects are…

 transition.to( songTitle, { x =display.contentWidth + songTitle.contentWidth, time = 500, transition = easing.outQuad } ) --transition.to( lblExp, { x = display.contentWidth + lblExp.contentWidth, time = 500, transition = easing.outQuad } ) --transition.to( songRuntime, { x =display.contentWidth + songRuntime.contentWidth, time = 500, transition = easing.outQuad } )

the loop that builds the offending rows is…

for j = 1, #albumData[row.index].songs, 1 do songID = j print(j) songTableGroup = display.newGroup(); print("\t" .. albumData[row.index].songs[j].songTitle ) songTitle = display.newText( albumData[row.index].songs[j].songTitle, 0, 0, "Arial-Black", 12 ); songTitle.anchorX = 0; songTitle:setFillColor( 255, 255, 255 ); songTitle.x = display.contentWidth + songTitle.contentWidth songTitle.y = intY songTableGroup:insert( songTitle ) transition.to( songTitle, { x = \_W\*.17, time = 500, transition = easing.outQuad } ) lblExp = display.newText(albumData[row.index].songs[j].xPlicit, 0, 0, "Arial-Black", 12 ); lblExp.anchorX = 0; lblExp:setFillColor( 248, 0, 0 ); lblExp.x = display.contentWidth + lblExp.contentWidth lblExp.y = intY songTableGroup:insert( lblExp ) transition.to( lblExp, { x = \_W\*.78, time = 500, transition = easing.outQuad } ) songRuntime = display.newText( albumData[row.index].songs[j].runtime, 0, 0, "Arial-Black", 12 ); songRuntime.anchorX = 0; songRuntime:setFillColor( 255, 255, 255 ); songRuntime.x = display.contentWidth + songRuntime.contentWidth songRuntime.y = intY songTableGroup:insert( songRuntime ) transition.to( songRuntime, { x = \_W\*.84, time = 500, transition = easing.outQuad } ) intY = intY + 17 end tableGroup:insert(songTableGroup)

I seem to be stuck. I have tried lopping and counting down all to no avail. I’ve been at it for way too long and probably am just tired and overlooking something, but I can not seem to get this figured out.

Any help on this is appreciated and THANKS in advance!

-Erik

primoz.cerar · February 11, 2014, 8:32am

It is not very clear what you are doing but I think your problem is the loop itself. If you touch one row then you should create the detail view for that row only. Why the loop? As you use the same variables for every row they get overriden in every itteration of that loop. That means that when you call your back function the objects those variables hold are for the last row.

BTW why do you transition each object separately? Do they need to move independently of each other or could you just transition the group you put them in? It would simplify your code a lot.

Hellgourd_Studios · February 11, 2014, 2:29pm

Basically I am pulling from a table…

albumData = { {albumName = "Cry Sister", albumType = "CD Single", albumExp = "Y", albumYear = "2013", albumCover = "cvrCrySister.png", albumURL = " ", songs = { {songTitle = "Cry Sister", songURL ="audio/preCrySister.mp3", runtime = "2:54", xPlicit = " E"} }, }, {albumName = "Waiting Out The Storm", albumType = "Deluxe Edition", albumExp = "Y", albumYear = "2012", albumCover = "cvrWaiting.png", albumURL = " ", songs = { {songTitle = "I Got This", songURL = "audio/igot-pre.m4a", runtime = "3:30", xPlicit = " "}, {songTitle = "Monster", songURL = "audio/monst-pre.m4a", runtime = "2:52", xPlicit = " "}, {songTitle = "Bleed My Soul", soungURL = "test", runtime = "3:16", xPlicit = " "}, {songTitle = "Wake Up", soungURL = "test", runtime = "3:17", xPlicit = " "}, {songTitle = "Singing For Our Lives", soungURL = "test", runtime = "3:48", xPlicit = " "}, {songTitle = "Crazy", soungURL = "test", runtime = "3:39", xPlicit = " "}, {songTitle = "With A Smile", soungURL = "test", runtime = "3:41", xPlicit = " "}, {songTitle = "I Will Catch You", soungURL = "test", runtime = "3:40", xPlicit = " "}, {songTitle = "Sunburn", soungURL = "test", runtime = "3:19", xPlicit = " "}, {songTitle = "For No One", soungURL = "test", runtime = "4:00", xPlicit = " "}, {songTitle = "High on Fire", soungURL = "test", runtime = "3:55", xPlicit = " "}, {songTitle = "Crazy \(Rock Mix\)", soungURL = "test", runtime = "4:04", xPlicit = " "}, {songTitle = "I Love You", soungURL = "test", runtime = "3:43", xPlicit = " E"}, {songTitle = "For The Gold", soungURL = "test", runtime = "4:19", xPlicit = " "}, {songTitle = "Wake Up \(Acoustic Version \)", soungURL = "test", runtime = "3:22", xPlicit = " "}, {songTitle = "Long Way Down", soungURL = "test", runtime = "4:02", xPlicit = " "}, }, } }

The table view loops and pulls from the album info, and the detail view takes and breaks down the song info for the particular album. I am wondering if maybe So the first loop to build the table view is pulling and listing each album in the table. The when you select an album, it loops and gives you all the details of that particular album.

The separate transitions will be cleaned up by groups with different timings after I have it all working.

primoz.cerar · February 11, 2014, 2:44pm

Ok in your loop you are doing this:

songTitle = display.newText( albumData[row.index].songs[j].songTitle, 0, 0, “Arial-Black”, 12 );

This will get called 20 times if the album has 20 songs.

at the end songTitle will hold the text for the last song.

In you back function you are doing this:

transition.to( songTitle, { x =display.contentWidth + songTitle.contentWidth, time = 500, transition = easing.outQuad }

now this will transition the last songTitle added. What about the rest. Why dont you transition the whole group you insert everything into:

local function goBackTo( event ) --Transition in the list, transition out the item selected text and the back button titleText.text = "Royal Bliss Music"; iconBackTable.isVisible = false; timerStash.tmrBack = timer.performWithDelay(300, function() iconBack.isVisible = true; end, 1) --iconBack.isVisible = true; -- 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( tableView, { x = tableView.contentWidth \* 0.5, time = 400, transition = easing.outExpo } ) transition.to( tableGroup, { x = display.contentWidth \* 1.5, time = 500, transition = easing.outQuad } ) end

That is if you don’t insert tableView in tableGroup as well. That will give you problems. I can not see where you create tableGroup and if you insert something else in to it.

Hellgourd_Studios · February 11, 2014, 2:57pm

Yes, I have tried to remove the group the songs are in and it still does not work. the songs stay on the screen. for reference here is the initial build for the table row…

function createData() -- Create rows print("") songGroup = {} for i = 1, #albumData do --print(albumData[i].albumName) --print(albumData[i].albumYear) --print(albumData[i].albumCover) -- print("Album name: " .. albumData[i].albumName) -- print("Release year: " .. albumData[i].albumYear) -- print("Cover: " .. albumData[i].albumCover) albumData[i].albumCover = albumData[i].albumCover albumData[i].albumYear = albumData[i].albumYear albumData[i].albumName = albumData[i].albumName print("") local isCategory = false local rowHeight = 80 local rowColor = { default = { 0, 0, 0 }, over = { 30/255, 144/255, 1 }, } local lineColor = { 220/255, 220/255, 220/255 } -- Insert the row into the tableView tableView:insertRow { rowHeight = rowHeight, rowColor = rowColor, lineColor = lineColor, } end end

primoz.cerar · February 11, 2014, 5:45pm

I still don’t see where you create tableGroup. Does the tableView scroll back in view when you press back or does nothing happen. If it does, does something else move or only the tableView?

primoz.cerar · February 11, 2014, 8:32am