Navigation between two screens Roku Developer - BrightScript

Question

I am trying to navigate between two screens on button click back and forth. I have below code.

TestScreen1.xml

<?xml version="1.0" encoding="utf-8" ?>
<component name="TestScreen1" extends="Scene"> 
    <children>
      <Label id="myLabelScreen1" 
        width="1280" 
        height="720" 
        horizAlign="center"
        vertAlign="top"
        translation="[0, 30]"
        />
        <Poster
            id="screenAPosterScreen1"
            translation="[470, 300]"
            width="0.0"
            height="0.0"
            visible="true">
        </Poster>
         <Button
            id="screen1Button"
            text="Go to Screen 2"
            width="100"
            height ="70"
            translation="[470, 450]"
            showFocusFootprint="true"
         />
 </children>
<!-- BrightScript Portion -->
<script type="text/brightscript" uri="TestScreen1.brs" />
<script type="text/brightscript" uri="pkg:/source/Main.brs" />
<!-- End of BrightScript Portion -->
</component>

TestScreen1.brs

function init()
     m.top.setFocus(true)
     m.myLabel = m.top.findNode("myLabelScreen1")
     m.screenAPoster = m.top.findNode("screenAPosterScreen1")
            
     m.Button = m.top.findNode("screen1Button")
     m.Button.observeField("buttonSelected", "onButton1Press")
     m.Button.setFocus(true)
        
     jsonData = ParseJson(m.global.mystuff)
        
     m.myLabel.text = jsonData.screens.a.title
     m.screenAPoster.uri = jsonData.screens.a.logo
        
     'Set the font size
     m.myLabel.font.size = 92
        
     'Set the color to light blue
      m.myLabel.color = "0x72D7EEFF"
end function
        

Now TestScreen2.xml

<?xml version="1.0" encoding="utf-8" ?>
<component name="TestScreen2" extends="Scene"> 
    <children>
      <Label id="myLabelScreen2" 
        width="1280" 
        height="720" 
        horizAlign="center"
        vertAlign="top"
        translation="[0, 30]"
        />
        <Poster
            id="screenAPosterScreen2"
            translation="[470, 300]"
            width="0.0"
            height="0.0"
            visible="true">
        </Poster>
        
         <Button
            id="screen2Button"
            text="Go to Screen 1"
            width="100"
            height ="70"
            translation="[470, 450]"
            showFocusFootprint="true"
         />
 </children>
<!-- BrightScript Portion -->
<script type="text/brightscript" uri="TestScreen2.brs" />
<script type="text/brightscript" uri="pkg:/source/Main.brs" />
<!-- End of BrightScript Portion -->
</component>

TestScreen2.brs

function init()
      m.top.setFocus(true)
      m.top.backgroundColor = "#FF0000"
      m.myLabel = m.top.findNode("myLabelScreen2")
      m.screenAPoster = m.top.findNode("screenAPosterScreen2")
            
      m.Button = m.top.findNode("screen2Button")
      m.Button.observeField("buttonSelected", "onButton2Press")
      m.Button.setFocus(true)
            
      jsonData = ParseJson(m.global.mystuff)
            
      m.myLabel.text = jsonData.screens.b.title
      m.screenAPoster.uri = jsonData.screens.b.logo
            
      'Set the font size
       m.myLabel.font.size = 92
            
       'Set the color to light blue
       m.myLabel.color = "0x72D7EEFF"
end function
          

Main.brs file

sub Main()
    print "in showChannelSGScreen"
    'Indicate this is a Roku SceneGraph application'
    screen = CreateObject("roSGScreen")
    m.port = CreateObject("roMessagePort")
    screen.setMessagePort(m.port)

    scene = screen.CreateScene("TestScreen1")

    m.global = screen.getGlobalNode()
    m.global.AddField("mystuff", "string", false)

    port = CreateObject("roMessagePort")
    request = CreateObject("roUrlTransfer")

    request.AddHeader("secret-key", "$2b$10$uFTmoV/NUudBt3K/t8h9H.c08SIwq29I9RiZskcr5k.tU8lvpwfJ2")
    request.AddHeader("Accept", "application/json")
    request.AddHeader("Content-Type", "application/json")
    request.EnablePeerVerification(false)
    request.EnableHostVerification(false)
    request.RetainBodyOnError(true)
    request.SetCertificatesFile("common:/certs/ca-bundle.crt")
    request.InitClientCertificates()
    request.SetMessagePort(port)

    request.SetURL("https://api.jsonbin.io/b/5e7e4017862c46101abf301f")

    response = ParseJson(request.GetToString())

    m.global.mystuff = request.GetToString()

    screen.show()

    while(true)
        msg = wait(0, m.port)
        msgType = type(msg)
        if msgType = "roSGScreenEvent"
            if msg.isScreenClosed() then return
        end if
    end while
end sub

sub onButton1Press(event as object)
    print "go to screen2"
    'how to navigate to screen2
end sub

sub onButton2Press(event as object)
     print "go to screen2"
    'how to navigate to screen1
end sub

How do I navigate between two screens back and forth, on click of screen1Button go to Screen 2 and vice versa navigate back between two screens?

Answer 1

You can use MultiStack functionality implemented in SGDEX to save state of each screen and swap them.