tableView class and director class

[mdk5316]

I have the following code which works wonderfully alone.
But I want to use the director class to go to this file that contains this code.
Any suggestions?
Thank you

–import the table view library
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)

–Uncomment the line below to see a background image
–local background = display.newImage(“coffeeBg.png”)

–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 the table
local data = {} --note: the declaration of this variable was moved up higher to broaden its scope

–iPad: setup a color fill for selected items
local selected = display.newRect(0, 0, 50, 50) --add acolor fill to show the selected item
selected:setFillColor(67,141,241,180) --set the color fill to light blue
selected.isVisible = false --hide color fill until needed

–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 "… data[id].title --added this line to make the right side of the screen more interesting
–check for screen width of the iPad
if system.getInfo(“model”) == “iPad” then
selected.width, selected.height = self.width, self.height --iPad: set the color fill width and height
selected.y = self.y + self.height*0.5 --iPad: move the color fill to wherever the user tapped
selected.isVisible = true --iPad: show the fill color
else
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
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 each row as a new table, then add title, subtitle, and image
data[1] = {}
data[1].title = " Red"
data[1].subtitle = “”
data[1].image = “balls/redBall.png”

data[2] = {}
data[2].title = " Orange"
data[2].subtitle = “”
data[2].image = “balls/orangeBall.png”

data[3] = {}
data[3].title = " Teal"
data[3].subtitle = “”
data[3].image = “balls/tealBall.png”

data[4] = {}
data[4].title = " Magenta"
data[4].subtitle = “”
data[4].image = “balls/magentaBall.png”

data[5] = {}
data[5].title = " Purple"
data[5].subtitle = “”
data[5].image = “balls/purpleBall.png”

data[6] = {}
data[6].title = " Light Green"
data[6].subtitle = “”
data[6].image = “balls/limeGreen.png”

data[7] = {}
data[7].title = " Blue"
data[7].subtitle = “”
data[7].image = “balls/blueBall.png”

data[8] = {}
data[8].title = " Light Blue"
data[8].subtitle = “”
data[8].image = “balls/lightBlueBall.png”

data[9] = {}
data[9].title = " Gray"
data[9].subtitle = “”
data[9].image = “balls/grayBall.png”

data[10] = {}
data[10].title = " White"
data[10].subtitle = “”
data[10].image = “balls/whiteBall.png”

data[11] = {}
data[11].title = " Black"
data[11].subtitle = “”
data[11].image = “balls/blackBall.png”

data[12] = {}
data[12].title = " Pink"
data[12].subtitle = “”
data[12].image = “balls/pinkBall.png”

data[13] = {}
data[13].title = " Yellow"
data[13].subtitle = “”
data[13].image = “balls/yellowBall.png”

data[14] = {}
data[14].title = " Green"
data[14].subtitle = “”
data[14].image = “balls/greenBall.png”

data[15] = {}
data[15].title = " Magenta-Yellow"
data[15].subtitle = “”
data[15].image = “balls/magYellBall.png”

data[16] = {}
data[16].title = " Yellow-Green"
data[16].subtitle = “”
data[16].image = “balls/yellGreeBall.png”

–iPad: duplicate some of the sample data to make the list longer
for i=1, 0 do
table.insert(data, data[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”,
–default=“listItemBg_white.png”,
over=“listItemBg_over.png”,
onRelease=listButtonRelease,
top=topBoundary,
bottom=bottomBoundary,
–backgroundColor={ 255, 255, 255 }, --commented this out because we’re going to add it down below
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(0, 0, 0)
–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(80,80,80)
–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
}

local function scrollToTop()
myList:scrollTo(topBoundary-1)
end

–Setup the nav bar
local navBar = ui.newButton{
default = “navBar.png”,
onRelease = scrollToTop
}
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)

local navHeader = display.newText(“Choose Your Ball Color”, 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

–Add a white background to the list.
–It didn’t move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)

–*** iPad: The lines below are some layout tweaks for the larger display size ***
if system.getInfo(“model”) == “iPad” then
–Rather than creating a new graphic, let’s just stretch the black bar at the top of the screen
navBar.xScale = 6

–Set new default text since the list is now on the left
detailScreenText.text = “Tap an item on the left”

–Change the width and x position of the detail screen
detailBg.width = display.contentWidth - myList.width
detailScreen.x = myList.x + myList.width*0.5 + 1

–Insert the selected color fill one level before the last item (which was the background inserted above)
myList:insert(2,selected)
–Adjust the x position of the selected color fill
selected.x = myList.x + myList.width*0.5
end [import]uid: 42126 topic_id: 23077 reply_id: 323077[/import]

[Ninja_Pig_Studios]

First off when you post a big section of code on the Corona forums, I would recommend surrounding it in the lua tags for html < *lua* >. Director is super easy just add this:

[lua]-----------ADD THIS-------------
module(…, package.seeall)
function new()
local localGroup = display.newGroup()

–import the table view library
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)

–Uncomment the line below to see a background image
–local background = display.newImage(“coffeeBg.png”)

-----------NOW DO THIS FOR EACH IMAGE IN ORDER OF THE LAYERS-----------------
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)

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 the table
local data = {} --note: the declaration of this variable was moved up higher to broaden its scope

–iPad: setup a color fill for selected items
local selected = display.newRect(0, 0, 50, 50) --add acolor fill to show the selected item
selected:setFillColor(67,141,241,180) --set the color fill to light blue
selected.isVisible = false --hide color fill until needed

–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 "… data[id].title --added this line to make the right side of the screen more interesting
–check for screen width of the iPad
if system.getInfo(“model”) == “iPad” then
selected.width, selected.height = self.width, self.height --iPad: set the color fill width and height
selected.y = self.y + self.height*0.5 --iPad: move the color fill to wherever the user tapped
selected.isVisible = true --iPad: show the fill color
else
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
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 each row as a new table, then add title, subtitle, and image
data[1] = {}
data[1].title = " Red"
data[1].subtitle = “”
data[1].image = “balls/redBall.png”

data[2] = {}
data[2].title = " Orange"
data[2].subtitle = “”
data[2].image = “balls/orangeBall.png”

data[3] = {}
data[3].title = " Teal"
data[3].subtitle = “”
data[3].image = “balls/tealBall.png”

data[4] = {}
data[4].title = " Magenta"
data[4].subtitle = “”
data[4].image = “balls/magentaBall.png”

data[5] = {}
data[5].title = " Purple"
data[5].subtitle = “”
data[5].image = “balls/purpleBall.png”

data[6] = {}
data[6].title = " Light Green"
data[6].subtitle = “”
data[6].image = “balls/limeGreen.png”

data[7] = {}
data[7].title = " Blue"
data[7].subtitle = “”
data[7].image = “balls/blueBall.png”

data[8] = {}
data[8].title = " Light Blue"
data[8].subtitle = “”
data[8].image = “balls/lightBlueBall.png”

data[9] = {}
data[9].title = " Gray"
data[9].subtitle = “”
data[9].image = “balls/grayBall.png”

data[10] = {}
data[10].title = " White"
data[10].subtitle = “”
data[10].image = “balls/whiteBall.png”

data[11] = {}
data[11].title = " Black"
data[11].subtitle = “”
data[11].image = “balls/blackBall.png”

data[12] = {}
data[12].title = " Pink"
data[12].subtitle = “”
data[12].image = “balls/pinkBall.png”

data[13] = {}
data[13].title = " Yellow"
data[13].subtitle = “”
data[13].image = “balls/yellowBall.png”

data[14] = {}
data[14].title = " Green"
data[14].subtitle = “”
data[14].image = “balls/greenBall.png”

data[15] = {}
data[15].title = " Magenta-Yellow"
data[15].subtitle = “”
data[15].image = “balls/magYellBall.png”

data[16] = {}
data[16].title = " Yellow-Green"
data[16].subtitle = “”
data[16].image = “balls/yellGreeBall.png”

–iPad: duplicate some of the sample data to make the list longer
for i=1, 0 do
table.insert(data, data[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”,
–default=“listItemBg_white.png”,
over=“listItemBg_over.png”,
onRelease=listButtonRelease,
top=topBoundary,
bottom=bottomBoundary,
–backgroundColor={ 255, 255, 255 }, --commented this out because we’re going to add it down below
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(0, 0, 0)
–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(80,80,80)
–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
}

local function scrollToTop()
myList:scrollTo(topBoundary-1)
end

–Setup the nav bar
local navBar = ui.newButton{
default = “navBar.png”,
onRelease = scrollToTop
}
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)

local navHeader = display.newText(“Choose Your Ball Color”, 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

–Add a white background to the list.
–It didn’t move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)

–*** iPad: The lines below are some layout tweaks for the larger display size ***
if system.getInfo(“model”) == “iPad” then
–Rather than creating a new graphic, let’s just stretch the black bar at the top of the screen
navBar.xScale = 6

–Set new default text since the list is now on the left
detailScreenText.text = “Tap an item on the left”

–Change the width and x position of the detail screen
detailBg.width = display.contentWidth - myList.width
detailScreen.x = myList.x + myList.width*0.5 + 1

–Insert the selected color fill one level before the last item (which was the background inserted above)
myList:insert(2,selected)
–Adjust the x position of the selected color fill
selected.x = myList.x + myList.width*0.5
end

local function changeScene(e)
director:changeScene(“game”, crossFade)
end

—NOW JUST CREATE AN EVENT LISTENER THAT CHANGES SCENES--------
return localGroup

end

[lua]Hope this helps!

Regards,
Jordan Schuetz
Ninja Pig Studios [import]uid: 29181 topic_id: 23077 reply_id: 92314[/import]

[meredith]

Hi Jordan,

I came with the same question the original poster did, and followed your instructions but my app just loads the background image and does nothing else (no errors or anything like that). Any tips?
My code is below:

[lua]module(…, package.seeall)
function new()
local localGroup = display.newGroup()

–import the table view library
local tableView = require(“tableView”)

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

display.setStatusBar( display.DarkStatusBar )

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

local myList, backBtn, detailScreenText

local background = display.newImage(“bg.jpg”, true)

–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, 14)
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 the table
local data = {} --note: the declaration of this variable was moved up higher to broaden its scope

–iPad: setup a color fill for selected items
local selected = display.newRect(0, 0, 50, 50) --add acolor fill to show the selected item
selected:setFillColor(67,141,241,180) --set the color fill to light blue
selected.isVisible = false --hide color fill until needed

–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 "… data[id].title --added this line to make the right side of the screen more interesting
–check for screen width of the iPad
if system.getInfo(“model”) == “iPad” then
selected.width, selected.height = self.width, self.height --iPad: set the color fill width and height
selected.y = self.y + self.height*0.5 --iPad: move the color fill to wherever the user tapped
selected.isVisible = true --iPad: show the fill color
else
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
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 the data
data[1] = {}
data[1].title = “Data 1”

data[2] = {}
data[2].title = “Data 2”

data[3] = {}
data[3].title = “Data 3”

data[4] = {}
data[4].title = “Data 4”

data[5] = {}
data[5].title = “Data 5”

data[6] = {}
data[6].title = “Data 6”

data[7] = {}
data[7].title = “Data 7”

data[8] = {}
data[8].title = “Data 8”

data[9] = {}
data[9].title = “Data 9”

data[10] = {}
data[10].title = “Data 10”

data[11] = {}
data[11].title = “Data 11”

data[12] = {}
data[12].title = “Data 12”

data[13] = {}
data[13].title = “Data 13”

data[14] = {}
data[14].title = “Data 14”

data[15] = {}
data[15].title = “Data 15”

–iPad: duplicate some of the sample data to make the list longer
for i=1, 0 do
table.insert(data, data[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,
height = 260,
top=display.screenOriginY + 200,
bottom=40,
maskFile = “mask-320x260.png”,
–backgroundColor={ 255, 255, 255 }, --commented this out because we’re going to add it down below
callback = function( row )
local g = display.newGroup()

local title = display.newText( row.title, 0, 0, “Helvetica-Light”, 17 )
title:setTextColor(0, 0, 0)
–title:setTextColor(255, 255, 255)
g:insert(title)
title.x = title.width*0.5 + 6
title.y = 20

return g
end
}

local function scrollToTop()
myList:scrollTo(topBoundary-1)
end
–Setup the nav bar
local navBar = ui.newButton{
default = “navBar.png”,
onRelease = scrollToTop
}
navBar.x = display.contentWidth*.5
navBar.y = 40 --math.floor(display.screenOriginY + navBar.height*0.5)

local navHeader = display.newText(“My Sample App”, 0, 0, “Helvetica-Bold”, 20)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = 39

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

–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

–Add a white background to the list.
–It didn’t move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)

–*** iPad: The lines below are some layout tweaks for the larger display size ***
if system.getInfo(“model”) == “iPad” then
–Rather than creating a new graphic, let’s just stretch the black bar at the top of the screen
navBar.xScale = 6

–Set new default text since the list is now on the left
detailScreenText.text = “Tap an item on the left”

–Change the width and x position of the detail screen
detailBg.width = display.contentWidth - myList.width
detailScreen.x = myList.x + myList.width*0.5 + 1

–Insert the selected color fill one level before the last item (which was the background inserted above)
myList:insert(2,selected)
–Adjust the x position of the selected color fill
selected.x = myList.x + myList.width*0.5
end

return localGroup
end[/lua] [import]uid: 101670 topic_id: 23077 reply_id: 118717[/import]

[Ninja_Pig_Studios]

Make sure that if you have any other groups, you are adding everything to the localGroup, so if you have a myList group, make sure you go localGroup:insert(myList) so that everything is displaying on the screen in the proper order. [import]uid: 29181 topic_id: 23077 reply_id: 118721[/import]

[meredith]

Thanks. I monkeyed with it but I’m a noob so could you be more specific about where I should be placing localGroup:insert(myList)? There are two groups - myList and detailScreen. [import]uid: 101670 topic_id: 23077 reply_id: 118727[/import]

[Ninja_Pig_Studios]

Yeah so insert both of those groups into localGroup. You want it to look like this at the top of your code, do everything else the same.

[code]
localGroup = display.newGroup()
myList = display.newGroup()
detailScreen = display.newGroup()

localGroup:insert(myList)
localGroup:insert(detailScreen)
[/code] [import]uid: 29181 topic_id: 23077 reply_id: 118730[/import]

[meredith]

Something is still not quite right

I was mistaken in that I don’t have a group called myList (myList is name of the tableView). The group inside of the row is called g. So my two groups are g and detailScreen.

I thought I did what you described, but still no go. I get the background image and that’s it.

I’m sure I am thoroughly confused Here is my code at the moment:

[lua]module(…, package.seeall)

function new()
local localGroup = display.newGroup()

g = display.newGroup ()
detailScreen = display.newGroup()

localGroup:insert(g)
localGroup:insert(detailScreen)

–import the table view library
local tableView = require(“tableView”)

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

display.setStatusBar( display.DarkStatusBar )

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

local myList, backBtn, detailScreenText

local background = display.newImage(“bg.jpg”, true)

–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, 14)
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 the table
local data = {} --note: the declaration of this variable was moved up higher to broaden its scope

–iPad: setup a color fill for selected items
local selected = display.newRect(0, 0, 50, 50) --add acolor fill to show the selected item
selected:setFillColor(67,141,241,180) --set the color fill to light blue
selected.isVisible = false --hide color fill until needed

–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 "… data[id].title --added this line to make the right side of the screen more interesting
–check for screen width of the iPad
if system.getInfo(“model”) == “iPad” then
selected.width, selected.height = self.width, self.height --iPad: set the color fill width and height
selected.y = self.y + self.height*0.5 --iPad: move the color fill to wherever the user tapped
selected.isVisible = true --iPad: show the fill color
else
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
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 the data
data[1] = {}
data[1].title = “Data 1”

data[2] = {}
data[2].title = “Data 2”

data[3] = {}
data[3].title = “Data 3”

data[4] = {}
data[4].title = “Data 4”

data[5] = {}
data[5].title = “Data 5”

data[6] = {}
data[6].title = “Data 6”

data[7] = {}
data[7].title = “Data 7”

data[8] = {}
data[8].title = “Data 8”

data[9] = {}
data[9].title = “Data 9”

data[10] = {}
data[10].title = “Data 10”

data[11] = {}
data[11].title = “Data 11”

data[12] = {}
data[12].title = “Data 12”

data[13] = {}
data[13].title = “Data 13”

data[14] = {}
data[14].title = “Data 14”

data[15] = {}
data[15].title = “Data 15”

–iPad: duplicate some of the sample data to make the list longer
for i=1, 0 do
table.insert(data, data[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,
height = 260,
top=display.screenOriginY + 200,
bottom=40,
maskFile = “mask-320x260.png”,
–backgroundColor={ 255, 255, 255 }, --commented this out because we’re going to add it down below
callback = function( row )
– local g = display.newGroup()

local title = display.newText( row.title, 0, 0, “Helvetica-Light”, 17 )
title:setTextColor(0, 0, 0)
–title:setTextColor(255, 255, 255)
g:insert(title)
title.x = title.width*0.5 + 6
title.y = 20

return g
end
}

local function scrollToTop()
myList:scrollTo(topBoundary-1)
end
–Setup the nav bar
local navBar = ui.newButton{
default = “navBar.png”,
onRelease = scrollToTop
}
navBar.x = display.contentWidth*.5
navBar.y = 40 --math.floor(display.screenOriginY + navBar.height*0.5)

local navHeader = display.newText(“My Sample App”, 0, 0, “Helvetica-Bold”, 20)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = 39

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

–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

–Add a white background to the list.
–It didn’t move with the list when it appeared on the larger screen of the iPad.
local listBackground = display.newRect( 0, 0, myList.width, myList.height )
listBackground:setFillColor(255,255,255)
myList:insert(1,listBackground)

–*** iPad: The lines below are some layout tweaks for the larger display size ***
if system.getInfo(“model”) == “iPad” then
–Rather than creating a new graphic, let’s just stretch the black bar at the top of the screen
navBar.xScale = 6

–Set new default text since the list is now on the left
detailScreenText.text = “Tap an item on the left”

–Change the width and x position of the detail screen
detailBg.width = display.contentWidth - myList.width
detailScreen.x = myList.x + myList.width*0.5 + 1

–Insert the selected color fill one level before the last item (which was the background inserted above)
myList:insert(2,selected)
–Adjust the x position of the selected color fill
selected.x = myList.x + myList.width*0.5
end

return localGroup
end[/lua] [import]uid: 101670 topic_id: 23077 reply_id: 118739[/import]

[Ninja_Pig_Studios]

Do this and it should fix your issue:

local localGroup = display.newGroup()  
   
g = display.newGroup ()  
detailScreen = display.newGroup()  
backGroup = display.newGroup()  
   
localGroup:insert(g)  
localGroup:insert(detailScreen)  
localGroup:insert(backGroup)  

Now insert your background into backgroup.

local background = display.newImage("bg.jpg", true)  
backGroup:insert(background)  

That should do it. [import]uid: 29181 topic_id: 23077 reply_id: 118805[/import]

[meredith]

Thank you! That did the trick and it works perfectly although I had to move some things around.

The only thing that isn’t working is the back button. It possible that is a clash with director or something? I will monkey with it some more. [import]uid: 101670 topic_id: 23077 reply_id: 118864[/import]