how do i add my own images and functions

[vadimerror]

can anybody help me with my table and how to add my own images instead of the default and how would make it go to another scene when one of them is pressed?
here is my code
galaxy s3 view
[lua] local widget = require “widget”

local listOptions = {
left = 100,
top = 50,
hideScrollBar = true,
height = 260,
width = 440,
}

local list = widget.newTableView( listOptions )

local function onRowTouch( event )
local row = event.target
local rowGroup = event.view

if event.phase == “press” then
if not row.isCategory then rowGroup.alpha = 0.5; end

elseif event.phase == “swipeLeft” then
print( “Swiped left.” )

elseif event.phase == “swipeRight” then
print( “Swiped right.” )

elseif event.phase == “release” then

end

return true
end
local function onRowRender( event )
local row = event.target
local rowGroup = event.view

local text = display.newRetinaText( “Row #” … event.index, 12, 0, “Helvetica-Bold”, 18 )
text:setReferencePoint( display.CenterLeftReferencePoint )
text.y = row.height * 0.5
if not row.isCategory then
text.x = 15
text:setTextColor( 0 )
end
rowGroup:insert( text )
end

for i=1,10 do
local rowHeight, rowColor, lineColor, isCategory

list:insertRow{
onEvent=onRowTouch,
onRender=onRowRender,
height=rowHeight,
isCategory=isCategory,
rowColor=rowColor,
lineColor=lineColor
}
end [import]uid: 218976 topic_id: 37041 reply_id: 67041[/import]

[bgmadclown]

Widget class has default and over attributes where default is for the widget’s background and over was when it was clicked(I think action taken maybe?). You can try them.

[lua]default = “trial.png”[/lua] [import]uid: 154911 topic_id: 37041 reply_id: 145271[/import]

[vadimerror]

but how would i know in the code which one im clicking? [import]uid: 218976 topic_id: 37041 reply_id: 145273[/import]

[bgmadclown]

Well, it is done by giving id tags when it comes to handling the buttons. I haven’t used tableView so I’m not sure. [import]uid: 154911 topic_id: 37041 reply_id: 145274[/import]

[nick_sherman]

You can use the event.index property which is automatically given to each row. In this example it is used to load “level1.lua”, “level2.lua” etc depending on which row is pressed.

[lua]

local widget = require “widget”

local listOptions = {
left = 100,
top = 50,
hideScrollBar = true,
height = 260,
width = 440,
}

local list = widget.newTableView( listOptions )

local function onRowTouch( event )
local row = event.target
local rowGroup = event.view
local id = event.index

if event.phase == “press” then
if not row.isCategory then rowGroup.alpha = 0.5; end

elseif event.phase == “swipeLeft” then
print( “Swiped left.” )

elseif event.phase == “swipeRight” then
print( “Swiped right.” )

elseif event.phase == “release” then

storyboard.gotoScene(“level”…id, “fromLeft”, 500)
end

return true
end
local function onRowRender( event )
local row = event.target
local rowGroup = event.view

local text = display.newRetinaText( “Row #” … event.index, 12, 0, “Helvetica-Bold”, 18 )
text:setReferencePoint( display.CenterLeftReferencePoint )
text.y = row.height * 0.5
if not row.isCategory then
text.x = 15
text:setTextColor( 0 )
end
rowGroup:insert( text )
end

for i=1,10 do
local rowHeight, rowColor, lineColor, isCategory

list:insertRow{
onEvent=onRowTouch,
onRender=onRowRender,
height=rowHeight,
isCategory=isCategory,
rowColor=rowColor,
lineColor=lineColor
}
end

[/lua]

If you wanted custom scene names for each row, you could set up an array and use the row number to access the right scene name. This would go at the top:

[lua]

local sceneNames = {“menu”,“options”,“shop”,“about”,“exit”}

[/lua]

Then change your gotoScene command to:

[lua]
storyboard.gotoScene(sceneNames[id], “fromLeft”, 500)
[/lua] [import]uid: 93133 topic_id: 37041 reply_id: 145279[/import]

[vadimerror]

how would i put this table into a scene?

[code]local widget = require “widget”

local listOptions = {
left = 100,
top = 50,
hideScrollBar = true,
height = 260,
width = 440,
}

local list = widget.newTableView( listOptions )

local function onRowTouch( event )
local row = event.target
local rowGroup = event.view
local id = event.index

if event.phase == “press” then
storyboard.gotoScene(“level”…id, “fromLeft”, 500)
end

return true
end
local function onRowRender( event )
local row = event.target
local rowGroup = event.view

local text = display.newRetinaText( “Row #” … event.index, 12, 0, “Helvetica-Bold”, 18 )
text:setReferencePoint( display.CenterLeftReferencePoint )
text.y = row.height * 0.5
if not row.isCategory then
text.x = 15
text:setTextColor( 0 )
end
rowGroup:insert( text )

end

for i=1,10 do
local rowHeight, rowColor, lineColor, isCategory

list:insertRow{
onEvent=onRowTouch,
onRender=onRowRender,
height=rowHeight,
isCategory=isCategory,
rowColor=rowColor,
lineColor=lineColor
}
end
[import]uid: 218976 topic_id: 37041 reply_id: 145377[/import]

[vadimerror]

Okay I figured it out.
I still dont understand all the way how to put custom graphics and text into each row.
Is there a way to make gaps between rows or rows spaced more apart? [import]uid: 218976 topic_id: 37041 reply_id: 145446[/import]

[bgmadclown]

Widget class has default and over attributes where default is for the widget’s background and over was when it was clicked(I think action taken maybe?). You can try them.

[lua]default = “trial.png”[/lua] [import]uid: 154911 topic_id: 37041 reply_id: 145271[/import]

[vadimerror]

but how would i know in the code which one im clicking? [import]uid: 218976 topic_id: 37041 reply_id: 145273[/import]

[bgmadclown]

Well, it is done by giving id tags when it comes to handling the buttons. I haven’t used tableView so I’m not sure. [import]uid: 154911 topic_id: 37041 reply_id: 145274[/import]

[nick_sherman]

You can use the event.index property which is automatically given to each row. In this example it is used to load “level1.lua”, “level2.lua” etc depending on which row is pressed.

[lua]

local widget = require “widget”

local listOptions = {
left = 100,
top = 50,
hideScrollBar = true,
height = 260,
width = 440,
}

local list = widget.newTableView( listOptions )

local function onRowTouch( event )
local row = event.target
local rowGroup = event.view
local id = event.index

if event.phase == “press” then
if not row.isCategory then rowGroup.alpha = 0.5; end

elseif event.phase == “swipeLeft” then
print( “Swiped left.” )

elseif event.phase == “swipeRight” then
print( “Swiped right.” )

elseif event.phase == “release” then

storyboard.gotoScene(“level”…id, “fromLeft”, 500)
end

return true
end
local function onRowRender( event )
local row = event.target
local rowGroup = event.view

local text = display.newRetinaText( “Row #” … event.index, 12, 0, “Helvetica-Bold”, 18 )
text:setReferencePoint( display.CenterLeftReferencePoint )
text.y = row.height * 0.5
if not row.isCategory then
text.x = 15
text:setTextColor( 0 )
end
rowGroup:insert( text )
end

for i=1,10 do
local rowHeight, rowColor, lineColor, isCategory

list:insertRow{
onEvent=onRowTouch,
onRender=onRowRender,
height=rowHeight,
isCategory=isCategory,
rowColor=rowColor,
lineColor=lineColor
}
end

[/lua]

If you wanted custom scene names for each row, you could set up an array and use the row number to access the right scene name. This would go at the top:

[lua]

local sceneNames = {“menu”,“options”,“shop”,“about”,“exit”}

[/lua]

Then change your gotoScene command to:

[lua]
storyboard.gotoScene(sceneNames[id], “fromLeft”, 500)
[/lua] [import]uid: 93133 topic_id: 37041 reply_id: 145279[/import]

[vadimerror]

how would i put this table into a scene?

[code]local widget = require “widget”

local listOptions = {
left = 100,
top = 50,
hideScrollBar = true,
height = 260,
width = 440,
}

local list = widget.newTableView( listOptions )

local function onRowTouch( event )
local row = event.target
local rowGroup = event.view
local id = event.index

if event.phase == “press” then
storyboard.gotoScene(“level”…id, “fromLeft”, 500)
end

return true
end
local function onRowRender( event )
local row = event.target
local rowGroup = event.view

local text = display.newRetinaText( “Row #” … event.index, 12, 0, “Helvetica-Bold”, 18 )
text:setReferencePoint( display.CenterLeftReferencePoint )
text.y = row.height * 0.5
if not row.isCategory then
text.x = 15
text:setTextColor( 0 )
end
rowGroup:insert( text )

end

for i=1,10 do
local rowHeight, rowColor, lineColor, isCategory

list:insertRow{
onEvent=onRowTouch,
onRender=onRowRender,
height=rowHeight,
isCategory=isCategory,
rowColor=rowColor,
lineColor=lineColor
}
end
[import]uid: 218976 topic_id: 37041 reply_id: 145377[/import]

[vadimerror]

Okay I figured it out.
I still dont understand all the way how to put custom graphics and text into each row.
Is there a way to make gaps between rows or rows spaced more apart? [import]uid: 218976 topic_id: 37041 reply_id: 145446[/import]