Roku: How do I open a LabelList on a new screen?

From BrightScript, how do I open the following LabelList on a new screen (not the Main screen/scene)?

<?xml version = "1.0" encoding = "utf-8" ?>

<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<component name = "LabelListExample" extends = "Group" initialFocus = "exampleLabelList" >

  <script type = "text/brightscript" >

    <![CDATA[

    sub init()
      m.top.backgroundURI = "pkg:/images/rsgde_bg_hd.jpg"

      example = m.top.findNode("exampleLabelList")

      examplerect = example.boundingRect()
      centerx = (1280 - examplerect.width) / 2
      centery = (720 - examplerect.height) / 2
      example.translation = [ centerx, centery ]

      m.top.setFocus(true)
    end sub

    ]]>

  </script>

  <children >

    <LabelList id = "exampleLabelList" >

      <ContentNode role = "content" >
        <ContentNode title = "Renderable Nodes" />
        <ContentNode title = "Z-Order/Parent-Child" />
        <ContentNode title = "Animations" />
        <ContentNode title = "Events and Observers" />
        <ContentNode title = "On Demand Example" />
      </ContentNode>

    </LabelList>

  </children>

</component>

Solution

I think you need to understand a SceneGraph API a little better so you could understand how to do this. In your main.brs file, Roku Screen is created with screen = CreateObject("roSGScreen") , from that Screen a Scene is created with scene = screen.CreateScene("Scene") . So all of your custom Components need to be added to the XML file of that Scene. In your components folder Create two separate files LabelListExample.brs and LabelListExample.xml. In your LabelListExample.brs add this

sub init()
      m.top.backgroundURI = "pkg:/images/rsgde_bg_hd.jpg"

      example = m.top.findNode("exampleLabelList")

      examplerect = example.boundingRect()
      centerx = (1280 - examplerect.width) / 2
      centery = (720 - examplerect.height) / 2
      example.translation = [ centerx, centery ]

      m.top.setFocus(true) 
end sub

In your LabelListExample.xml add this:

    <?xml version="1.0" encoding="UTF-8"?>
    <component name = "LabelListExample" extends = "Group" initialFocus = "exampleLabelList" >
    <script type="text/brightscript" uri="pkg:/components/LabelListExample.brs" />
    <children >

        <LabelList id = "exampleLabelList" >

          <ContentNode role = "content" >
            <ContentNode title = "Renderable Nodes" />
            <ContentNode title = "Z-Order/Parent-Child" />
            <ContentNode title = "Animations" />
            <ContentNode title = "Events and Observers" />
            <ContentNode title = "On Demand Example" />
          </ContentNode>

        </LabelList>

      </children>
    </component>

Now in your Scene.xml file as a child you should add this:

<Poster
     id="justPoster"
     translation="[0, 0]"
     width="1280"
     height="720" 
  />

<Group id="customComponentView" visible="false">
    <exampleLabelList
       id="customComponent"
    />
</Group>

<Group id="defaultView" visible= "true">
  <Label id="justLabel"
        color="0xFFFFFF"
        translation="[50, 300]"
        wrap="true"
        width="1200"
        horizAlign="center"
        text="Hide me if you can"
        opacity="0.5"
        font = "font:MediumBoldSystemFont"
  />      
</Group>

So the big question is: How to go from a defaultView that consist only from label to the customComponentView that will have this Label List?Simple really, you just need to hide one and show the other. What you need to do is to add onKeyEvent() function in your Scene.brs file (in you Scene script if you are doing everything from .xml). Also in Scene init() initialize your Views and components first with :

m.defaultView = m.top.findNode(defaultView)
m.customComponentView = m.top.findNode(customComponentView)
m.labelList = m.top.findNode(customComponent)
m.label = m.top.findNode(justLabel)

In onKeyEvent() function when button "Ok" is pressed on the remote, you can control which View is visible with:

m.defaultView.visible = false
m.customComponentView = true

You would need to set up focus as well when customComponentView becomes visible with:

m.labelList.setFocus(true)

Hope you can continue from this. Also check Roku documentation to find out more about onKeyEvent() function.