trying to put back buttons in storyboard

stephenTU · January 12, 2013, 5:17am

I am starting with storyboard and I have a back button i need to put on one of the files.
This file is treated as a scene but has no function new()

How would I put a back button inside of this file?Thanks.

[code]

– VIDEO GALLERY
– by John Polacek @ 2011

– Version: 1.0

– Git: https://github.com/johnpolacek/Video-Gallery
– Blog: http://johnpolacek.com
– Twitter: @johnpolacek
– Background Width/Height/Alignment
local backgroundWidth = 640
local backgroundHeight = 1136
local backgroundAlignment = “center”

– Scroll Nav spacing/margins
local spacing = 50
local leftMargin = 50
local topMargin = 300
local scrollbarY = 680

– Load content
local content = require(“content”)

–import the scrollNav class
local scrollNav = require(“scrollNav”)

display.setStatusBar(display.HiddenStatusBar)

function new()
local localGroup = display.newGroup()
local babybutton = display.newImage (“Icon.png”, true)
babybutton.x = 92
babybutton.y = 293
localGroup:insert(babybutton)

local function gobaby (event)
if event.phase == “ended” then
director:changeScene (“baby”)
end
end
babybutton:addEventListener(“touch”, gobaby)
return localGroup
end

– Touch event listener for background image

– Background
local background = display.newImageRect(“background.png”, backgroundWidth, backgroundHeight)

– Center background image
background.x = backgroundWidth / 2

– Align background
local topMarginAdjust = 0
if (backgroundAlignment == “bottom”) then
topMarginAdjust = -(backgroundHeight - display.viewableContentHeight)
elseif (backgroundAlignment == “top”) then
topMarginAdjust = backgroundHeight - display.viewableContentHeight
end
background.y = (backgroundHeight / 2) + topMarginAdjust -((backgroundHeight - display.viewableContentHeight)/2)

– Setup a scrollable content group
local scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})

– Iterate through content and add to scrollNav
for index, value in ipairs(content) do
local thumb = display.newImage(content[index].thumb)
scrollNav:insertButton(thumb, content[index].asset)
end

[/code] [import]uid: 88495 topic_id: 34875 reply_id: 334875[/import]

mattchapman · January 12, 2013, 7:26am

Are you looking to change this to a storyboard setup because this looks like director code in this example.

In short you can add the back button to the top of the page you are on and assign the function to call
storyboard.gotoScene("") put the scene name of the previous scene you want to go back to in between the quotes.

You can also pull the previous scene name and make it a variable that you can pass into the goto scene.

local previous_scene_name = storyboard.getPrevious()

Hope that helps…

Matt [import]uid: 18783 topic_id: 34875 reply_id: 138589[/import]

stephenTU · January 12, 2013, 7:45am

I’m calling it through storyboard. I tried function new and that did not work because the code about does not use seeall… [import]uid: 88495 topic_id: 34875 reply_id: 138592[/import]

stephenTU · January 12, 2013, 7:52am

This takes me to the code above

local function onSceneTouch( self, event )  
 if event.phase == "began" then  
  
 storyboard.gotoScene( "videotuts", "slideLeft", 800 )  
  
 return true  
 end  
end

So when I get to the code above, I need a back button. I think I’m using two different transition types, director and storyboard. But storyboard had a tabbar in the template that is why I’m working on that.Also I am using the widget from story board but changed the size to 640x1136 and now the tab bar that uses widget inside corona at the bottom is too small. Any idea how to increase the size for the tabbar widget in the storyboard if using iPhone 5 dimensions?Thanks. [import]uid: 88495 topic_id: 34875 reply_id: 138594[/import]

rob · January 12, 2013, 8:50am

You really shouldn’t try to mix and match Storyboard with Director.
[import]uid: 199310 topic_id: 34875 reply_id: 138601[/import]

mattchapman · January 12, 2013, 9:39am

+1 rob. Exactly. Please don’t put both in an app. It will make troubleshooting nearly impossible.

Storyboard has matured enough to trust it.

Make a widget.newButton and place it like x=10 and y= 10 so it is in the top left corner and make the event action your function that calls the storyboard.gotoScene(“scene name of previous screen”) [import]uid: 18783 topic_id: 34875 reply_id: 138610[/import]

stephenTU · January 12, 2013, 12:47pm

how come the back button won’t work in this code below?

[code]

– VIDEO GALLERY
– by John Polacek @ 2011

– Version: 1.0

– Git: https://github.com/johnpolacek/Video-Gallery

module(…, package.seeall)

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

local back = display.newImage (“back.png”)
back.x = math.floor(display.contentWidth*0.88)
back.y = 445
back.isHitTestable = true

local function goback (event)
myText.isVisible = false
scrollBackground.isVisible = false
background.isVisible = false
lotsOfTextObject.isVisible = false
director:changeScene (“scene1”)
back:removeSelf()
end
back:addEventListener(“touch”,goback)
return localGroup
end

– Background Width/Height/Alignment
local backgroundWidth = 640
local backgroundHeight = 1136
local backgroundAlignment = “center”

– Scroll Nav spacing/margins
local spacing = 50
local leftMargin = 50
local topMargin = 300
local scrollbarY = 680

– Load content
local content = require(“content”)

–import the scrollNav class
local scrollNav = require(“scrollNav”)

display.setStatusBar(display.HiddenStatusBar)

function new()
local localGroup = display.newGroup()
local babybutton = display.newImage (“Icon.png”, true)
babybutton.x = 92
babybutton.y = 293
localGroup:insert(babybutton)

local function gobaby (event)
if event.phase == “ended” then
director:changeScene (“baby”)
end
end
babybutton:addEventListener(“touch”, gobaby)
return localGroup
end

– Touch event listener for background image

– Background
local background = display.newImageRect(“background.png”, backgroundWidth, backgroundHeight)

– Center background image
background.x = backgroundWidth / 2

– Align background
local topMarginAdjust = 0
if (backgroundAlignment == “bottom”) then
topMarginAdjust = -(backgroundHeight - display.viewableContentHeight)
elseif (backgroundAlignment == “top”) then
topMarginAdjust = backgroundHeight - display.viewableContentHeight
end
background.y = (backgroundHeight / 2) + topMarginAdjust -((backgroundHeight - display.viewableContentHeight)/2)

– Setup a scrollable content group
local scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})

– Iterate through content and add to scrollNav
for index, value in ipairs(content) do
local thumb = display.newImage(content[index].thumb)
scrollNav:insertButton(thumb, content[index].asset)
end

– Add the scrollbar to the scrollNav
scrollNav:addScrollBar(scrollbarY)

[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138627[/import]

rob · January 12, 2013, 1:03pm

Stephen, there are two totally separate systems for managing scenes in Corona SDK. The 3rd Party “Director Class” and the officially supported Storyboard. They do not work together. If you see code that looks like:

module(..., package.seeall)  
   
function new()  
 local localGroup = display.newGroup()  
...  
   
 return localGroup  
end

and

director.changeScene("somescene")

then the assumption is you are using Director to do this. Your main.lua has to call the right functions to require the director class and initialize it. With out that, functions like director.changeScene() won’t work.

Storyboard on the other hand looks like this:

local storyboard = require( "storyboard" )  
local scene = storyboard.newScene()  
...  
  
function scene:createScene( event )  
 local group = self.view  
  
end  
  
function scene:enterScene( event )  
 local group = self.view  
  
end  
  
function scene:exitScene( event )  
 local group = self.view  
  
end  
  
function scene:destroyScene( event )  
 local group = self.view  
end  
  
function scene:overlayEnded( event )  
 local group = self.view  
end  
  
scene:addEventListener( "createScene", scene )  
scene:addEventListener( "enterScene", scene )  
scene:addEventListener( "exitScene", scene )  
scene:addEventListener( "destroyScene", scene )  
scene:addEventListener( "overlayEnded", scene )  
  
return scene

and has calls like this:

 storyboard.gotoScene("somescene")

Likewise you have to require the storyboard code in your main.lua and goto your first scene.

Director and Storyboard do very similar things but cannot work together. Settle on one way or the other, but not both. If you are doing storyboard and you find some code someone else wrote that’s done in Director, you have to convert it to storyboard methods.
[import]uid: 199310 topic_id: 34875 reply_id: 138630[/import]

stephenTU · January 12, 2013, 1:25pm

Understood. Then, in between

function scene:createScene( event )  
 local group = self.view  
  
end

I can put whatever buttons I want to change the Scene onTouch?

So…

[code]
function scene:createScene( event )
local group = self.view
buttonTuts = display.newImage( “tutsbutton.png”, 100, 200 )
buttonTuts.touch = onSceneTouch
screenGroup:insert( buttonTuts )
end

[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138632[/import]

stephenTU · January 12, 2013, 1:52pm

I changed out to all storyBoard,(as far as I can tell), and I’m getting a ‘gotoScene’ error.

exitScene event
Runtime error
?:0: attempt to concatenate global ‘sceneName’
stack traceback:
?: in function ‘gotoScene’
scene1.lua:20 in function

This is line 20 in scene1.lua

storyboard.gotoScene( "videotuts", "slideLeft", 800 )

stephenTU · January 12, 2013, 2:05pm

That makes sense to me.Thanks. [import]uid: 88495 topic_id: 34875 reply_id: 138631[/import]

rob · January 12, 2013, 2:09pm

Well first:

function scene:createScene( event )  
 local group = self.view  
 buttonTuts = display.newImage( "tutsbutton.png", 100, 200 )  
 buttonTuts.touch = onSceneTouch  
 group:insert( buttonTuts )   
end

Use the group variable which is the display group for the scene to insert your objects.

You will probably need to post the code for the scene…

Rob [import]uid: 199310 topic_id: 34875 reply_id: 138637[/import]

stephenTU · January 12, 2013, 2:14pm

Scene1.lua

[code]

–
– scene1.lua

local storyboard = require( “storyboard” )
local scene = storyboard.newScene()

– BEGINNING OF YOUR IMPLEMENTATION

local button1, text1, text2, text3, memTimer

– Touch event listener for background image
local function onSceneTouch( self, event )
if event.phase == “began” then

storyboard.gotoScene( “videotuts”, “slideLeft”, 800 )

return true
end
end
– Called when the scene’s view does not exist:
function scene:createScene( event )
local screenGroup = self.view

button1 = display.newImage( “1button.png”, 100, 200 )
button1.touch = onSceneTouch
screenGroup:insert( button1 )

text1 = display.newText( “Scene 1”, 0, 0, native.systemFontBold, 24 )
text1:setTextColor( 255 )
text1:setReferencePoint( display.CenterReferencePoint )
text1.x, text1.y = display.contentWidth * 0.5, 50
screenGroup:insert( text1 )

text2 = display.newText( "MemUsage: ", 0, 0, native.systemFont, 16 )
text2:setTextColor( 255 )
text2:setReferencePoint( display.CenterReferencePoint )
text2.x, text2.y = display.contentWidth * 0.5, display.contentHeight * 0.5
screenGroup:insert( text2 )

text3 = display.newText( “Touch to continue.”, 0, 0, native.systemFontBold, 18 )
text3:setTextColor( 255 ); text3.isVisible = false
text3:setReferencePoint( display.CenterReferencePoint )
text3.x, text3.y = display.contentWidth * 0.5, display.contentHeight - 100
screenGroup:insert( text3 )

print( “\n1: createScene event”)
end
– Called immediately after scene has moved onscreen:
function scene:enterScene( event )

print( “1: enterScene event” )

– remove previous scene’s view
storyboard.purgeScene( “scene4” )

– Update Lua memory text display
local showMem = function()
button1:addEventListener( “touch”, button1 )
text3.isVisible = true
text2.text = text2.text … collectgarbage(“count”)/1000 … “MB”
text2.x = display.contentWidth * 0.5
end
memTimer = timer.performWithDelay( 1000, showMem, 1 )
end
– Called when scene is about to move offscreen:
function scene:exitScene( event )

print( “1: exitScene event” )

– remove touch listener for image
button1:removeEventListener( “touch”, button1 )

– cancel timer
timer.cancel( memTimer ); memTimer = nil;

– reset label text
text2.text = "MemUsage: "
end
– Called prior to the removal of scene’s “view” (display group)
function scene:destroyScene( event )

print( “((destroying scene 1’s view))” )
end

– END OF YOUR IMPLEMENTATION

– “createScene” event is dispatched if scene’s view does not exist
scene:addEventListener( “createScene”, scene )

– “enterScene” event is dispatched whenever scene transition has finished
scene:addEventListener( “enterScene”, scene )

– “exitScene” event is dispatched before next scene’s transition begins
scene:addEventListener( “exitScene”, scene )

– “destroyScene” event is dispatched before view is unloaded, which can be
– automatically unloaded in low memory situations, or explicitly via a call to
– storyboard.purgeScene() or storyboard.removeScene().
scene:addEventListener( “destroyScene”, scene )

return scene

[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138638[/import]

rob · January 12, 2013, 2:22pm

does videotuts.lua exist? Is it a storyboard scene? Does it have errors? [import]uid: 199310 topic_id: 34875 reply_id: 138639[/import]

stephenTU · January 12, 2013, 2:51pm

http://stephendrotar.com/apps/tabbar-size/ [import]uid: 88495 topic_id: 34875 reply_id: 138643[/import]

stephenTU · January 12, 2013, 2:53pm

no errors. [import]uid: 88495 topic_id: 34875 reply_id: 138644[/import]

stephenTU · January 12, 2013, 2:58pm

I think I’m having a issue organizing the code, because when I put a background image in, the image covers the button12.png, but doesn’t cover the scrollNav.Scroll nav works. [import]uid: 88495 topic_id: 34875 reply_id: 138646[/import]

stephenTU · January 12, 2013, 3:13pm

no errors on video tuts
and button 12 never appears to display. [import]uid: 88495 topic_id: 34875 reply_id: 138642[/import]

stephenTU · January 12, 2013, 4:08pm

Can we create similar to Div Class> on a webpage onto our app?

div class go inside a storyboard.scene

? [import]uid: 88495 topic_id: 34875 reply_id: 138651[/import]

stephenTU · January 12, 2013, 4:43pm

Here’s my question:

How do I put one

function scene:createScene( event ) local screenGroup = self.view

to work in-front of another

function scene:createScene( event ) local screenGroup = self.view

if I’m asking it right? [import]uid: 88495 topic_id: 34875 reply_id: 138653[/import]

trying to put back buttons in storyboard

– VIDEO GALLERY – by John Polacek @ 2011

– Version: 1.0

– VIDEO GALLERY – by John Polacek @ 2011

– Version: 1.0

[code]

– – scene1.lua

– BEGINNING OF YOUR IMPLEMENTATION

– END OF YOUR IMPLEMENTATION

– VIDEO GALLERY
– by John Polacek @ 2011

– VIDEO GALLERY
– by John Polacek @ 2011

–
– scene1.lua