Need help understanding List View

sebitttas · January 23, 2012, 3:17pm

Hey. I need help understanding the list view example from corona. When I click on List 1, it says you tapped on item 1, then it says for the second third fouth etc…

Ok my question/ problem is how do I change each part instead of saying you tapped on item 1, I want to put in something In own words on 1 section, second section third section etc… I know how to change the list view but the ohter thing. Here is the code

[code]local tableView = require(“tableView”)

–import the button events library
local ui = require(“ui”)

display.setStatusBar( display.HiddenStatusBar )

–initial values
local screenOffsetW, screenOffsetH = display.contentWidth - display.viewableContentWidth, display.contentHeight - display.viewableContentHeight

local myList, backBtn, detailScreenText

local background = display.newRect(0, 0, display.contentWidth, display.contentHeight)
background:setFillColor(77, 77, 77)

–setup a destination for the list items
local detailScreen = display.newGroup()

local detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY)
detailBg:setFillColor(255,255,255)
detailScreen:insert(detailBg)

detailScreenText = display.newText(“You tapped item”, 0, 0, native.systemFontBold, 24)
detailScreenText:setTextColor(0, 0, 0)
detailScreen:insert(detailScreenText)
detailScreenText.x = math.floor(display.contentWidth/2)
detailScreenText.y = math.floor(display.contentHeight/2)
detailScreen.x = display.contentWidth

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

detailScreenText.text = "You tapped item "… self.id
transition.to(myList, {time=400, x=display.contentWidth*-1, transition=easing.outExpo })
transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
transition.to(backBtn, {time=400, alpha=1 })

delta, velocity = 0, 0
end

function backBtnRelease( event )
print(“back button released”)
transition.to(myList, {time=400, x=0, transition=easing.outExpo })
transition.to(detailScreen, {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

– setup some data
local data = {}
for i=1, 20 do
data[1] = “List item 1”
data[2] = “List item 2”
end

local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0

– create the list of items
myList = tableView.newList{
data=data,
default=“listItemBg.png”,
over=“listItemBg_over.png”,
onRelease=listButtonRelease,
top=topBoundary,
bottom=bottomBoundary,
backgroundColor={ 255, 255, 255 },
callback=function(row)
local t = display.newText(row, 0, 0, native.systemFontBold, 16)
t:setTextColor(0, 0, 0)
t.x = math.floor(t.width/2) + 12
t.y = 46
return t
end
}

–Setup the nav bar
local navBar = display.newImage(“navBar.png”, 0, 0, true)
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)

local navHeader = display.newText(“My List”, 0, 0, native.systemFontBold, 16)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = navBar.y

–Setup the back button
backBtn = ui.newButton{
default = “backButton.png”,
over = “backButton_over.png”,
onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y
backBtn.alpha = 0 [/code]

This is the example. There’s an arrow showing the help what I’m talking about. [import]uid: 17058 topic_id: 20835 reply_id: 320835[/import]

jeremyapplebaum12 · January 23, 2012, 3:29pm

if I understand your question correctly your asking how to change what is displayed when you press a button?

If so try this:

[code]

detailScreenText.text = "You tapped item "… data[self.id]

[/code] [import]uid: 23649 topic_id: 20835 reply_id: 82010[/import]

sebitttas · January 23, 2012, 3:33pm

@jeremyappleaum12 yes um but how do I change the self.id [import]uid: 17058 topic_id: 20835 reply_id: 82012[/import]

jeremyapplebaum12 · January 23, 2012, 3:39pm

I don’t 100% understand, why would you want to change it? What are you trying to accomplish? What do you want it to display on the screen? All self.id is is a number that corresponds to the row/table that your click on.
[import]uid: 23649 topic_id: 20835 reply_id: 82013[/import]

sebitttas · January 23, 2012, 3:39pm

Ok what I’m trying to do since when you tap it says

“You tapped on item 1” For List View 1

“You tapped on item 2” For List View 2

I don;t want that I want this example:

“Cookies” For List View 1

“Milk” For List View 2

instead of saying You tapped item # whatever I can put in my own words now how do I do that?

[import]uid: 17058 topic_id: 20835 reply_id: 82016[/import]

jeremyapplebaum12 · January 23, 2012, 3:45pm

Sorry about that, that’s somewhat easy. Heres what you have to do.

In your code you something like this:

local data = {}  
for i=1, 20 do  
 data[1] = "List item 1"  
 data[2] = "List item 2"  
end

What you need to do is change your data to represent what you want it say. For example try replacing that line of code with this:

local data = {}  
for i=1, 2 do  
 data[1] = "Cookies"  
 data[2] = "Milk"  
end

Keep in mind though that the for statement needs to be i = 1, to the maximum amount of data you have or else it won’t load properly.

Let me know if this helps/works.
[import]uid: 23649 topic_id: 20835 reply_id: 82020[/import]

sebitttas · January 23, 2012, 3:51pm

@jeremyappleaum12 um yeah I got it and another thing is how when I click on the cell how do I make it to change scene and then back. In this example it does not show when using director. It shows another way. I want to use Director to change out of list view into a plain view and then back to list view using director.
[import]uid: 17058 topic_id: 20835 reply_id: 82022[/import]

sebitttas · January 23, 2012, 4:29pm

@jeremyappleaum12 well I was going to say that I messed up. Nope I got it thanks so much Now I got it yay woohoo lol [import]uid: 17058 topic_id: 20835 reply_id: 82033[/import]

jeremyapplebaum12 · January 23, 2012, 4:29pm

Thats a little more complicated.

Assuming my understanding is that you want to change scenes (with director/storyboard/whatnot) when you click on a row/cell/whatever they’re called.

Steps:
1: Set up Director
2: You will need to set up a table with each of your scene names. It should look something like this:

local mySceneTable = {"Scene One", "Scene Two"}

Each table point should be the name of the scene that corresponds with the table point (I.E. the first piece of data in your table goes with the row one).

3: change this:

  
function listButtonRelease( event )  
 self = event.target  
 local id = self.id  
 print(self.id)  
  
 detailScreenText.text = "You tapped item ".. self.id   
 transition.to(myList, {time=400, x=display.contentWidth\*-1, transition=easing.outExpo })  
 transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })  
 transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW\*.5 + 6, transition=easing.outExpo })  
 transition.to(backBtn, {time=400, alpha=1 })  
  
 delta, velocity = 0, 0  
end

To this:

function listButtonRelease( event )  
 self = event.target  
 local id = self.id  
 print(self.id)  
 director:changeScene(mySceneTable[self.id], "crossfade")  
end

I apologize in advance if the actually command I typed in for director is off, there a bunch of versions of it floating around. The one I’m currently using I had to change the actual director:changeScene part to something a little different because of the module less version I downloaded didn’t 100% work right.

4: As long you know how to use director, going back to the tableview scene shouldn’t be a problem.

[import]uid: 23649 topic_id: 20835 reply_id: 82028[/import]

jeremyapplebaum12 · January 23, 2012, 4:30pm

Glad I could help. Good luck with your app! [import]uid: 23649 topic_id: 20835 reply_id: 82034[/import]

sebitttas · January 23, 2012, 4:31pm

Thanks I will [import]uid: 17058 topic_id: 20835 reply_id: 82035[/import]

sebitttas · January 23, 2012, 5:12pm

@jeremyappleaum12 I know your offline. Sorry again um one more thing I got is how do insert an Image for each cell showing an image next to the word cell I’m about to click.

Sorry to bother again [import]uid: 17058 topic_id: 20835 reply_id: 82044[/import]

jeremyapplebaum12 · January 23, 2012, 5:28pm

A different image per row or just one image for all of them? [import]uid: 23649 topic_id: 20835 reply_id: 82050[/import]

sebitttas · January 23, 2012, 5:35pm

@jeremyappleaum12 a different image per row
[import]uid: 17058 topic_id: 20835 reply_id: 82054[/import]

jeremyapplebaum12 · January 23, 2012, 5:48pm

Steps:
1: You need a table to hold all the image data. It should look something like this:

local imageTable = {"myImage.png"}  
local imageTableY = {your image's height}  
local imageTableX = {your images width}

2: You need to load the image data into data for your table.

local data = {}  
for i=1, 20 do  
 data[1] = "List item 1"  
 data[2] = "List item 2"  
 -- you have to have an image or else it will crash  
 data[i].image = imageTable[i]  
 data[i].imageX = imageTableX[i]  
 data[i].imageY = imageTableY[i]  
  
end

finally put this into your tableview somewhere:

local img = display.newImageRect(row.image,row.imageY, row.imageX)  
img.x = where you want it  
img.y = where you want it

Theres a chance this won’t work 100%, if thats the case you need add these lines of code:

Right after it says callback = function (row) add:

local g = display.newGroup()

Right before the tableview ends add:

return g

and finally add right after your img axis coordinates:

g:insert(img)

If this is the case you will also have to insert into g every display item in the table (text, etc…) and change this:

 local t = display.newText(row, 0, 0, native.systemFontBold, 16)  
 t:setTextColor(0, 0, 0)  
 t.x = math.floor(t.width/2) + 12  
 t.y = 46   
 return t

To this:

local t = display.newText(row, 0, 0, native.systemFontBold, 16) t:setTextColor(0, 0, 0) t.x = math.floor(t.width/2) + 12 t.y = 46 g:insert(t) [import]uid: 23649 topic_id: 20835 reply_id: 82057[/import]

sebitttas · January 23, 2012, 6:18pm

@jeremyappleaum12 this is how I did it and I know is wrong

[code]module(…, package.seeall)

function new()
local localGroup = display.newGroup()
local tableView = require(“tableView”)

–import the button events library
local ui = require(“ui”)

display.setStatusBar( display.HiddenStatusBar )

–initial values
local screenOffsetW, screenOffsetH = display.contentWidth - display.viewableContentWidth, display.contentHeight - display.viewableContentHeight

local myList, backBtn, detailScreenText

local background = display.newRect(0, 0, display.contentWidth, display.contentHeight)
background:setFillColor(77, 77, 77)
localGroup:insert(background)

–setup a destination for the list items
local detailScreen = display.newGroup()

local detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY)
detailBg:setFillColor(255,255,255)
detailScreen:insert(detailBg)
localGroup:insert(detailBg)

detailScreenText = display.newText(“You tapped item”, 0, 0, native.systemFontBold, 24)
detailScreenText:setTextColor(0, 0, 0)
detailScreen:insert(detailScreenText)
detailScreenText.x = math.floor(display.contentWidth/2)
detailScreenText.y = math.floor(display.contentHeight/2)
detailScreen.x = display.contentWidth

local mySceneTable = {“view 1”, “view 2”}

–setup functions to execute on touch of the list view items
function listButtonRelease( event )
self = event.target
local id = self.id
print(self.id)
director:changeScene(mySceneTable[self.id], “crossfade”)
end

function backBtnRelease( event )
print(“back button released”)
transition.to(myList, {time=400, x=0, transition=easing.outExpo })
transition.to(detailScreen, {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

local g = display.newGroup()

local imageTable = {“backButton.png”}
local imageTableY = 100
local imageTableX = 160

– setup some data
local data = {}
for i=1, 20 do
data[1] = “mil”

data[1].image = imageTable[i]
data[1].imageX = imageTableX
data[1}.imageY = imageTableY
data[2] = “List item 2”
end

return g

g:insert(img)

local img = display.newImageRect(row.image,row.imageY, row.imageX)
img.x = 100
img.y = 200

local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0

– create the list of items
myList = tableView.newList{
data=data,
default=“listItemBg.png”,
over=“listItemBg_over.png”,
onRelease=listButtonRelease,
top=topBoundary,
bottom=bottomBoundary,
backgroundColor={ 255, 255, 255 },
callback=function(row)
local t = display.newText(row, 0, 0, native.systemFontBold, 16)
t:setTextColor(0, 0, 0)
t.x = math.floor(t.width/2) + 12
t.y = 46
return t
end
}

–Setup the nav bar
local navBar = display.newImage(“navBar.png”, 0, 0, true)
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)
localGroup:insert(navBar)

local navHeader = display.newText(“My List”, 0, 0, native.systemFontBold, 16)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = navBar.y
localGroup:insert(navHeader)

–Setup the back button
backBtn = ui.newButton{
default = “backButton.png”,
over = “backButton_over.png”,
onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y
backBtn.alpha = 0
localGroup:insert(backBtn)

return localGroup
end[/code]

I tried to go how you said it would it be possible for you to arrange it to the proper order for me please thanks [import]uid: 17058 topic_id: 20835 reply_id: 82058[/import]

jeremyapplebaum12 · January 23, 2012, 6:22pm

I should have said, pay attention to this. This is how you load data from now on.

  
local data = {}   
local displaytext = {"mil", "List item 2"}   
local imageTable = {"backButton.png", "backButton.png"}  
local imageTableY = {100,100}  
local imageTableX = {160,160}

displaytext is your words.
imageTable is your images
imageTableY is your images height
imageTableX is your images width
[import]uid: 23649 topic_id: 20835 reply_id: 82064[/import]

jeremyapplebaum12 · January 23, 2012, 6:22pm

Ok I redid a lot of your code.

[code]
module(…, package.seeall)

function new()
local localGroup = display.newGroup()
local tableView = require(“tableView”)

–import the button events library
local ui = require(“ui”)

display.setStatusBar( display.HiddenStatusBar )
–initial values
local screenOffsetW, screenOffsetH = display.contentWidth - display.viewableContentWidth, display.contentHeight - display.viewableContentHeight

local myList, backBtn, detailScreenText

local background = display.newRect(0, 0, display.contentWidth, display.contentHeight)
background:setFillColor(77, 77, 77)
localGroup:insert(background)

–setup a destination for the list items
local detailScreen = display.newGroup()

local detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY)
detailBg:setFillColor(255,255,255)
detailScreen:insert(detailBg)
localGroup:insert(detailBg)

detailScreenText = display.newText(“You tapped item”, 0, 0, native.systemFontBold, 24)
detailScreenText:setTextColor(0, 0, 0)
detailScreen:insert(detailScreenText)
detailScreenText.x = math.floor(display.contentWidth/2)
detailScreenText.y = math.floor(display.contentHeight/2)
detailScreen.x = display.contentWidth

local mySceneTable = {“view 1”, “view 2”}

–setup functions to execute on touch of the list view items
function listButtonRelease( event )
self = event.target
local id = self.id
print(self.id)
director:changeScene(mySceneTable[self.id], “crossfade”)
end

function backBtnRelease( event )
print(“back button released”)
transition.to(myList, {time=400, x=0, transition=easing.outExpo })
transition.to(detailScreen, {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

local data = {}
local displaytext = {“mil”, “List item 2”}
local imageTable = {“backButton.png”, “backButton.png”}
local imageTableY = {100,100}
local imageTableX = {160,160}
– you have to have an image for each piece of text
for i=1, #displaytext do
data[i] = {}
data[i].text = displaytext[i]
data[i].image = imageTable[i]
data[i].imageX = imageTableY[i]
data[i].imageY = imageTableX[i]
end

local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0

– create the list of items
myList = tableView.newList{
data=data,
default=“listItemBg.png”,
over=“listItemBg_over.png”,
onRelease=listButtonRelease,
top=topBoundary,
bottom=bottomBoundary,
backgroundColor={ 255, 255, 255 },
callback=function(row)
local g = display.newGroup()

local t = display.newText(row.text, 0, 0, native.systemFontBold, 16 )
t:setTextColor(0, 0, 0)
t.x = math.floor(t.width/2) + 12
t.y = 46
g:insert(t)

local img = display.newImageRect(row.image,row.imageY, row.imageX)
img.x = 100
img.y = 200
g:insert(img)
return g
end
}

–Setup the nav bar
local navBar = display.newImage(“navBar.png”, 0, 0, true)
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)
localGroup:insert(navBar)

local navHeader = display.newText(“My List”, 0, 0, native.systemFontBold, 16)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = navBar.y
localGroup:insert(navHeader)

–Setup the back button
backBtn = ui.newButton{
default = “backButton.png”,
over = “backButton_over.png”,
onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y
backBtn.alpha = 0
localGroup:insert(backBtn)

return localGroup
end
[/code] [import]uid: 23649 topic_id: 20835 reply_id: 82061[/import]

sebitttas · January 23, 2012, 6:23pm

@jeremyappleaum12 I just tried and thanks so much for all your help sorry for being such a pain but thanks a lot again.

And yeah I got thanks for that other part about loading data [import]uid: 17058 topic_id: 20835 reply_id: 82065[/import]

jeremyapplebaum12 · January 23, 2012, 6:25pm

No problem. I went back and changed something on the rewrite (so if your copying/pasting) make sure you take the newest version. It’s a small change but it helps with loading data. [import]uid: 23649 topic_id: 20835 reply_id: 82066[/import]