CODEWITHSUNDEEP
rokubrightscript
VR1256
VR1256

Reputation: 1450

Navigation between two screens Roku Developer - BrightScript

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?

Upvotes: 1

Views: 1109

Answers (2)

hornyhedgehog
hornyhedgehog

Reputation: 371

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

Upvotes: 2

GoMad
GoMad

Reputation: 21

You can have only one "scene" in a Roku application. Change your test2 xml to extend "group". Also avoid calling API in the Main, create a separate Task node to do so. Also for m.Button.observeField("buttonSelected", "onButton2Press"), define the sub in the same brs files because scoping matters.

Better you start with the getting started document, to get the basics right.

Upvotes: 1

Related Questions