How to dynamically update the image in the scrolling list views example?

[jamesguitar3]

Hi all,

In my project, I created a scrolling list view by following the example post by Gilbert. See bellow for the link.

http://blog.anscamobile.com/2010/09/create-scrolling-list-views-with-text-and-graphics-in-coronasdk-ios-android-tutorial/

And the image for each list item is added in "callback = function(row) " when the list is created.

However, is there any way to update the image after the list was created without rebuilding the list again?

Thank you for your comments in advance.

local myList = tableView.newList{  
data=data,  
default=listItemBg\_white.png,  
--backgroundColor={255,2552,255},  
callback = function( row )  
local g = display.newGroup()  
  
local img = display.newImage(row.image)  
g:insert(img)  
img.x = math.floor(img.width\*0.5 + 6)  
img.y = math.floor(img.height\*0.5)  
  
local title = display.newText( row.title, 0, 0, native.systemFontBold, 14 )  
title:setTextColor(255, 255, 255)  
g:insert(title)  
title.x = title.width\*0.5 + img.width + 6  
title.y = 30  
  
local subtitle = display.newText( row.subtitle, 0, 0, native.systemFont, 12 )  
subtitle:setTextColor(180,180,180)  
g:insert(subtitle)  
subtitle.x = subtitle.width\*0.5 + img.width + 6  
subtitle.y = title.y + title.height + 6  
return g  
end  
}  

[import]uid: 23306 topic_id: 7624 reply_id: 307624[/import]

[jmp909]

well if you look at tableView.lua you’ll see that the group created in your callback function is the last thing inserted into the overall group for that row (after any default/over background images) so in your touch event you could reference it like this
[lua]local g = self[self.numChildren][/lua] and we also know that your icon image on your row is the first one inserted in that group

so I came up with this… (note this is from the original CoffeeCup example)

main.lua

[lua]local function replaceIcon(icon, src)

local g = icon.parent
g:remove(icon)

local img = display.newImage(src)

g:insert(img)

– need to make it the first item in the group again
– see release function as to why
img:toBack()

end
–setup functions to execute on touch of the list view items
function listButtonRelease( event )
self = event.target
local id = self.id
print(self.id)

local g = self[self.numChildren]

– note the toBack() above
– so this always works as our icon is always at depth 1
local icon = g[1]

replaceIcon(icon, “coffee”…math.random(1,6)…".png")

detailScreenText.text = "You tapped "… data[id].title --added this line to make the right side of the screen more interesting
– etc etc…[/lua] [import]uid: 6645 topic_id: 7624 reply_id: 27380[/import]

[jamesguitar3]

@jmp90

Thank you for your help, but I am a little confused about the list item’s table structure.

I don’t understand how does the self[self.numChildren] point to the display group of the that specific list item.

function listButtonRelease( event )  
 self = event.target  
 local id = self.id  
 print(self.id)  
 local g = self[self.numChildren]   
 local icon = g[1]   

I actually planned to replace the icon in backBtnRelease function, but I don’t know how to point to the list item’s display group. (I do understand the remove() and toBack() concept you mentioned in the post.)

See below for where I am stuck.
Appreciate your help.

[code]
local function backBtnRelease( event )
– Get the list item ID which is previously selected by the user.
print("back button released. Back from item ID --> "… selectedListID)

local g = myList[selectedListID]

–Not sure how to point to g’s display group and then to remove the 1st object.
local h = g[g.numChildren]
g.remove(h[1])

transition.to(myList, {time=400, x=0, transition=easing.outExpo })
transition.to(resultScreen, {time=400, x=display.contentWidth, transition=easing.outExpo })
transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2)+backBtn.width, transition=easing.outExpo })
transition.to(backBtn, {time=400, alpha=0 })

delta, velocity = 0, 0
end
[/code] [import]uid: 23306 topic_id: 7624 reply_id: 27700[/import]

[jmp909]

my amends are based it on the coffeecup example, i tested it definitely worked:
http://blog.anscamobile.com/2010/09/create-scrolling-list-views-with-text-and-graphics-in-coronasdk-ios-android-tutorial/

basically the self[self.numChildren] refers to the last item inserted into the group. whether or not you have background images, it is still the last item inserted. In tableView.lua, in the newListItem function, you’ll see that the last item inserted is this:

[lua]local t = callback(data)
thisItem:insert( t ) <== HERE[/lua]

ok so we can see the last item inserted is created from the callback function you pass in in the first place, and looking there we can see the icon is the first item inserted

[lua]callback = function( row )
local g = display.newGroup()
local img = display.newImage(row.image)
g:insert(img) – <== HERE[/lua]

when i remove this icon and replace it with a new image, i’m having to insert it to the top of the list, but my code is always looking for the first item which is why i send it to the back to make it the first again

SO…

it’s quite simple to move this to your back button function.

first, create a local variable at the top of your main file
[lua]local itemSelected[/lua]

this is the other functions can both see it

then in your listButtonRelease function set
[lua]itemSelected = self – (or event.target, same thing)[/lua]
ie
[lua]function listButtonRelease( event )
self = event.target
local id = self.id
itemSelected=self[/lua]

then in your back button function just replace my original self[self.numChildren] with itemSelected[itemSelected.numChildren]

ie:
[lua]function backBtnRelease( event )
print(“back button released”)

local g = itemSelected[itemSelected.numChildren]
local icon = g[1] – note the toBack() above so this always works

replaceIcon(icon, “coffee”…math.random(1,6)…".png")
…
…
end[/lua]

[import]uid: 6645 topic_id: 7624 reply_id: 27725[/import]

[jamesguitar3]

@jmp909

Thanks for the very detailed explanation.
Now I understand why you were trying to reference to self[self.numChildren] , as the callback was last inserted in tableView.lua

I got it work, and post my code below in case anyone is interested.
(Updated my original request of replacing the image in the list by add/remove the image in the list)

Code part1

function listButtonRelease( event )  
 self = event.target  
 local id = self.id  
  
 selectedListID = id -- Will use this ID to know which item is selected from the list  
  
 ...  
 ...  

Code part2

[code]
local function backBtnRelease( event )

– Add/remove the Favorite icon in the list

–The sequence of the item stored in myList is in the reverse way as the itemID
local g = myList[myList.numChildren-selectedListID+1]

---

– See the newListItem() functoin in tableView.lua
– local t = callback(data)
– thisItem:insert( t )
– The items added by callback() was the last one been inserted into the list

local h = g[g.numChildren]

– The Favorite icon image is the 1st block in the table (1st inserted in callback())
local n = h[1]

if (favoriteChanged == true) then
– Remove the Favorite icon if this item is removed from the user’s Favorite list
if (inFavorite == “0”) then
n:removeSelf()
– Add the Favorite icon in the list if the user adds this item into the Favorite list
else
local img = display.newImage(“Favorite_add.png”, true)
h:insert(img)
img.x = img.width*0.5+5
img.y = 45

– Keep the Favorite icon always in the 1st block in the table
img:toBack()

end
end
[/code] [import]uid: 23306 topic_id: 7624 reply_id: 27750[/import]