Highlighting the selected row in tableview and persisting the same on scrolling of the table list

udayyadu · December 12, 2012, 7:36am

Hi guys,

We have a situation in a project where we are displaying all the Facebook friends profile images and there name adjacent to profile images using the table view. The list view is working fine displaying all the Facebook friends profile images with their names the issue is after selecting (I am highlighting using a setFillColor ) the random friends (Rows) and scrolling the list (Bottom or Top) the highlighted background color vanishes making the selected rows look normal (It’s not persistence).Please find below the attached piece of lua code.

local selectedRowIndex = {}  
local function isSelected(event)   
 local FBID=event.id;  
 if(table.indexOf(selectedRowIndex,FBID ) == nil) then   
 table.insert(selectedRowIndex, FBID)   
 return true   
 else   
 local FBIDIndex =table.indexOf(selectedRowIndex, FBID )  
 table.remove(selectedRowIndex, FBIDIndex)   
 return false   
 end   
 end   
   
 local function highlightRow(event)  
 local background = event.background  
 local row = event.row;  
 background:setFillColor( 84, 202, 255, 90 )  
 end  
   
 local function UnHighlightRow(event)   
 local background = event.background  
 local row = event.row;  
 background:setFillColor( 255, 255, 255, 255 )  
 end  
   
local function onRowTouch( event )  
 --local row = event.target  
 local rowGroup = event.view   
 local rowImage   
 if event.phase == "press" then  
 if(isSelected(event) == true) then  
 --highlight row  
 highlightRow(event)  
 else   
 UnHighlightRow(event)   
 end   
 elseif event.phase == "swipeLeft" then  
 print( "Swiped left." )   
 elseif event.phase == "swipeRight" then  
 print( "Swiped right." )   
 elseif event.phase == "release" then   
 print( "You touched row #" .. event.index )   
 end   
 return true   
end  
  
-- onRender listener for the tableView  
local function onRowRender( event )   
 local row = event.target;  
 local rowGroup = event.view;  
 local index = event.index;  
 local FBid = data[index].id;   
 local defaultFB=display.newImage( "images/findFriend/default\_Friend.png", 7,6)  
 rowGroup:insert(defaultFB)  
  
 -- Adding user image   
 local function networkListener( event )  
 if ( event.isError ) then  
 print ( "Network error - download failed" )   
 else  
 rowGroup:insert(event.target)  
 event.target.x = 32  
 event.target.y = 32  
 end  
 print ( "RESPONSE: " .. event.response )   
 end   
 display.loadRemoteImage("http://graph.facebook.com/"..FBid.."/picture", "GET", networkListener,"friendProfile\_pic\_"..FBid..".png", system.TemporaryDirectory,1050,1050)  
  
 FBFriendName = display.newText( data [index].name,150, 37,350,50, "Helvetica", 20 )   
 FBFriendName:setReferencePoint( display.CenterLeftReferencePoint)   
 FBFriendName.x = 72  
 FBFriendName.y = 40  
 FBFriendName:setTextColor( 179,179,179 )   
 rowGroup:insert( FBFriendName )  
end  
  
function FBdataHandler(event)  
 display.setStatusBar( display.HiddenStatusBar )  
 display.setDefault( "background", 255, 255, 255 )  
  
 local listOptions = {  
 top =137+display.screenOriginY,   
 height = 650  
 }  
   
 list = widget.newTableView( listOptions)  
  
 native.setActivityIndicator( true )   
 --#data - Contains all the friends name and ID  
 for i=1, #data do  
 print("Facebook friend: " .. data[i].name .. ", id: " .. data[i].id..",Picture : http://graph.facebook.com/"..data[i].id.."/picture")   
 local rowHeight, rowColor, lineColor, isCategory   
 rowHeight=65  
 lineColor={110, 233, 255,255}  
 list:insertRow{   
 id= data[i].id,   
 onEvent=onRowTouch,  
 onRender=onRowRender,  
 listener = rowListener,  
 height=rowHeight,  
 isCategory=isCategory,  
 rowColor=rowColor,  
 lineColor=lineColor  
 }   
 end  
 fbgroup:insert( list )  
 native.setActivityIndicator( false)   
end

And one more thing as i am using display.loadRemoteImage every time i scroll the list the friend profile picture will blink (May be re downloading) i don’t want this to happen.

Please suggest what to do. [import]uid: 188904 topic_id: 33912 reply_id: 333912[/import]

richard9 · December 12, 2012, 1:07pm

I don’t have the exact answer for you, but I can say that in some situations the tableView is basically written to re-render rows. That’s most likely why your highlight would disappear - it’s automatically dumping the contents and re-rendering. (Particularly when scrolling, hence why the “touch” effect turns off when scrolling using the default code)

The only way to force the altered display for a given row is to:
(1) Set a flag on the row and then let onRowRender() handle it. (ie: if row.selected then event.background = {255,0,0} or whatever, no different than how you render categories versus other rows.)

(2) When you touch a row either do what you’re doing or call the .reRender flag (The latter is simpler though I can’t be sure it works in this case.)

(3) To recover your images you’ll need to store them in a table outside of the tableView and call them by reference. There’s probably a hundred ways to do this but one way would be to call friends to a table, ie:

friends = {} friends[1] = display.loadRemote blahbahblah

row.friend = 1

Then during the rowRender,

friendimage = friends[1] -- a direct reference to the image

Groupinion · December 12, 2012, 2:51pm

Richard,

Thanks for the reply on this (I am the client). Our team, is working hard, but I think they could use some additional guidance/support. Would you be available for some (paid) consultation or work?

Don [import]uid: 190470 topic_id: 33912 reply_id: 134886[/import]

rob · December 12, 2012, 7:41pm

When rows are scrolled far enough away, they are removed to save memory and are re-rendered when they come back on screen. Basically you need to save a state if it’s highlighted or not and in the onRowRender function tint the row there. [import]uid: 199310 topic_id: 33912 reply_id: 134915[/import]

richard9 · December 13, 2012, 7:21am

Rob basically said what I said, only more succinctly (I have a full time game dev job so my verbosity wavers)

Don, I don’t mind helping but (a) see above and (b) I don’t have any experience on the FB/networking side of it. I’m pretty strictly on the widget/general coding half. If you still need to run stuff by me let me know.
[import]uid: 41884 topic_id: 33912 reply_id: 134959[/import]

Groupinion · December 13, 2012, 8:00am

Richard, couldn’t hurt to talk more. Not sure if there are rules regarding posting of contact info here, but you can email me at dmilley [a t] groupinion.com. Hope to connect with you soon. [import]uid: 190470 topic_id: 33912 reply_id: 134965[/import]

rob · December 13, 2012, 4:43pm

The only rules on posting contact information is if you’re offering money or soliciting money you should do it in the marketplace forum and not here.

Most people don’t post parsable email addresses to keep the spam bots from picking up your address. We tend to do it like:

rob at coronalabs dot com

But that’s not a rule, just something we do (and anything to cut down spam…) [import]uid: 199310 topic_id: 33912 reply_id: 135050[/import]

Groupinion · December 13, 2012, 7:09pm

Thanks Rob. [import]uid: 190470 topic_id: 33912 reply_id: 135068[/import]

udayyadu · December 13, 2012, 11:06pm

Thanks richard9 & Rob Miracle for your support.

The highlighting of rows worked using an extra attribute in the list:insertRow and using the same as flag for setting background color.

Coming to Downloading of Facebook friends profile images, will it cause any memory leakage (3000 friends or more) if am downloading all the profile images at a single shot using display.loadRemoteImage and simultaneously inserting path of temporary folder to a lua table? [import]uid: 188904 topic_id: 33912 reply_id: 135086[/import]

richard9 · December 12, 2012, 1:07pm