Managing the Screens Back Stack in Roku using array and scenegraph component

Many developers faced this issue while managing multiple screens in Roku as Roku do not support internally back stack like Android or IOS.

This blog makes you understand that how can you manage your multiple screens in Roku using node array.

Declare your group node inside yourScene.xml

<component name="AppScene" extends="Scene">
    <script type="text/brightscript" uri="pkg:/components/scenes/appScene.brs" />

  

    <children>

        <Group
            id="screens" />

    </children>
</component>

Add Screen Into Array using push method –

sub addScreenToHistory(screen as object)
current = m.navStack.peek()
if current <> invalid then
current.visible = false
end if

screen.observeField("close", "goBackInHistory")

m.navStack.push(screen)
screen.visible = true
screen.setFocus(true)
end sub

While pressing back check your back stack –

function goBackInHistory() as boolean
screen = m.navStack.pop()
if screen <> invalid then
m.screens.removeChild(screen)
screen = m.navStack.peek()
if screen <> invalid then
screen.visible = true
screen.setFocus(true)
return true
end if
end if
return false
end function

Add your KeyEvent –

function onKeyEvent(key as string, press as boolean) as boolean
if press then
if key = "back" then
if not goBackInHistory() then
m.top.close = true
end if
return true
end if
end if
return false
end function

Open Your Screen.

sub showVideoScreen(content as object)
screen = m.screens.createChild("VideoScreen")
screen.content = content
addScreenToHistory(screen)
end sub

Full Source code –

 sub init()

m.navStack = []
m.screens = m.top.findNode("screens")

end sub

function onKeyEvent(key as string, press as boolean) as boolean
if press then
if key = "back" then
if not goBackInHistory() then
m.top.close = true
end if
return true
end if
end if
return false
end function

sub addScreenToHistory(screen as object)
current = m.navStack.peek()
if current <> invalid then
current.visible = false
end if

screen.observeField("close", "goBackInHistory")

m.navStack.push(screen)
screen.visible = true
screen.setFocus(true)
end sub

function goBackInHistory() as boolean
screen = m.navStack.pop()
if screen <> invalid then
m.screens.removeChild(screen)
screen = m.navStack.peek()
if screen <> invalid then
screen.visible = true
screen.setFocus(true)
return true
end if
end if
return false
end function