trying to put back buttons in storyboard

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]

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]

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 )

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

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]

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]

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

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

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

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]

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

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]

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]

videotuts.lua

local storyboard = require( "storyboard" )  
local scene = storyboard.newScene()  
local content = require("content")   
  
-- Setup a scrollable content group  
scrollNav = require("scrollNav")  
 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   
  
--import the scrollNav class  
local backgroundWidth, backgroundHeight, backgroundAlignment, spacing, leftMargin, topMargin, scrollbarY, content, scrollNav  
  
-- Touch event listener for background image  
local function onSceneTouch( self, event )  
 if event.phase == "began" then  
  
 storyboard.gotoScene( "scene1", "slideLeft", 800 )  
  
 return true  
 end  
end  
  
-- Called when the scene's view does not exist:  
function scene:createScene( event )  
 local screenGroup = self.view  
  
 buttonWeather = display.newImage( "weatherbutton.png", 100,700 )  
 buttonWeather.touch = onSceneTouch  
 screenGroup:insert( buttonWeather )  
  
 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 )  
  
 -- Background Width/Height/Alignment  
backgroundWidth = 640  
backgroundHeight = 1136  
backgroundAlignment = "center"  
  
 -- Scroll Nav spacing/margins  
spacing = 50  
leftMargin = 50  
topMargin = 300  
scrollbarY = 680  
-- Load content  
  
  
  
  
scrollNav = scrollNav.new({left=0, right=0, tm=topMargin, lm=leftMargin, sp=spacing})  
  
 -- Add the scrollbar to the scrollNav  
scrollNav:addScrollBar(scrollbarY)  
  
  
  
  
  
  
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  
  
  
end  
-- Called when scene is about to move offscreen:  
function scene:exitScene( event )  
  
 print( "1: exitScene event" )  
  
 -- remove touch listener for image  
 buttonWeather2:removeEventListener( "touch", buttonWeather2 )  
  
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 )  
-- "createScene" event is dispatched if scene's view does not exist  
scene:addEventListener( "createScene2", 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  

[import]uid: 88495 topic_id: 34875 reply_id: 138648[/import]

I don’t see where you are creating the background. Any display object that you create that you do not put into a group sits on top of everything else. All storyboard scenes are underneath anything not managed by storyboard. This is likely why your button is hiding under the background.

As far as div’s like in HTML, the closest thing would be putting a display.newGroup() inside of another group.

 groupA = display.newGroup()  
 groupB = display.newGroup()  
 groupB:insert(groupA)  

[import]uid: 199310 topic_id: 34875 reply_id: 138663[/import]

how would I end those tags

[code]groupB = display.newGroup()
function scene:createScene( event )
local screenGroup = self.view
end

end[/code] [import]uid: 88495 topic_id: 34875 reply_id: 138666[/import]

You don’t use tags like HTML. Corona is very very different. The concept of a box inside a box still works. In Corona you “insert” display objects into a group, position them on the screen where you want them and then if needed you can move a whole group of objects all at once. But groups are more like layers than div’s because in HTML div’s can float up against each other or force the next div down the page. Corona groups are more like div’s that are positioned absolutely (and perhaps relatively). You can have groups stacked on top of each other. In HTML if you are using floats or normal positioning, div’s don’t stack on top of each other.

[import]uid: 199310 topic_id: 34875 reply_id: 138668[/import]

So is a “object” like text and image or function or all three? [import]uid: 88495 topic_id: 34875 reply_id: 138669[/import]

videotuts.lua

[code]local storyboard = require( “storyboard” )
local scene = storyboard.newScene()
local content = require(“content”)

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

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

return true
end
end

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

buttonWeather = display.newImage( “weatherbutton.png”, 100,700 )
buttonWeather.touch = onSceneTouch
screenGroup:insert( buttonWeather )

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 )

– Background Width/Height/Alignment
backgroundWidth = 120
backgroundHeight = 280
backgroundAlignment = “center”

– Scroll Nav spacing/margins
spacing = 50
leftMargin = 10
topMargin = 100

end
– Setup a scrollable content group
scrollNav = require(“scrollNav”)
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
–import the scrollNav class
local backgroundWidth, backgroundHeight, backgroundAlignment, spacing, leftMargin, topMargin, scrollbarY, content, scrollNav

– 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

end
– Called when scene is about to move offscreen:
function scene:exitScene( event )

print( “1: exitScene event” )

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

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 )
– “createScene” event is dispatched if scene’s view does not exist
scene:addEventListener( “createScene2”, 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: 138667[/import]

Object is a generic term for any container that holds both data (could be text or image or both) and functions specifically designed to manipulate that data.

There is a specific class of Objects called “Display Objects”. They include display.newRect(), display.newCiricle(), display.newLine(), display.newText(), display.newImageRect() and a bunch more. All of these objects have specific display properties in that they put something on the screen. These objects can be put into groups.
[import]uid: 199310 topic_id: 34875 reply_id: 138690[/import]