ROKU: How can I add MarkupGrid and Rowlist in same scene?

Question

I'm building my first Roku app and while I'm able to separately render the MarkupGrid and Rowlist, when I try to implement the Rowlist on the same scene as the MarkupGrid, my screen turns black.

I decided to place the RowList in a separate Group Node but I'm not sure how to make the RowList visible within the HomeScene again.

HomeScene.XML

<component name="HomeScene" extends="Scene"  initialFocus = "headerMarkupGrid">

    <script type="text/brightscript" uri="pkg:/components/HomeScene.brs" />

        <children>

        <Poster
                    id="logo" 
                    uri="pkg:/images/logo.png"
                    width="350"
                    height="150" />
   <MarkupGrid
            id="headerMarkupGrid"
            translation = "[ 275, 10 ]" 
            itemComponentName="TopNavGroup"
            itemSize="[550,150]"
            itemSpacing = "[ 0, 10 ]" 
            drawFocusFeedback = "false" 
            numRows="1"
            numColumns = "4" 
            />

        </children> 
</component>

HomeScene.brs

 sub init()
    home = m.top.findNode("HomeScene")
        ' grab content from my ContentNode
    MarkupGrid = m.top.findNode("headerMarkupGrid") 
    MarkupGrid.content = CreateObject("roSGNode","MarkupGridContent")

    rowList = m.top.findNode("rowList")
    m.top.setFocus(true)
end sub

headerRowList.XML

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

<component name="headerRowList" extends="Group"  initialFocus="RowList">

    <children>

       <RowList 
            id="RowList"
            itemSpacing = "[ 0, 10 ]"
            itemComponentName="PosterItem"
            itemSize="[1920,300]"
            numRows="3"
            rowItemSize="[[800,400],[400,300]]"
            rowHeights="[500,300]"
            rowItemSpacing="[[30,0],[120,0]]"
            focusXOffset="[300,30]"
            />
    </children>

</component>

headerRowList.brs

Function init()
    m.top.setFocus(true)

    m.RowList = m.top.findNode("RowList")

    content = CreateObject("roSGNode", "ContentNode")
    For i = 1 To 3
        rowContent = content.CreateChild("ContentNode")
        rowContent.TITLE = "Row " + i.ToStr()
        content.AppendChild(rowContent)
    Next
    m.RowList.observeField("content", "rowListContentChanged")
    m.RowList.content = content

    m.LoadTask = CreateObject("roSGNode", "RowListContentTaskVarWidth")
    m.LoadTask.content = content
    m.LoadTask.control = "RUN"

End Function

I want the Scene to look something like this:

[Nav option 1] [Nav option 2] [Nav option 3]
  ----------

{Rowlist that associates with "Nav Option 1" would go here.}

score 1 · Answer 1 · answered May 26 '19 at 23:27

Since you've create a separate component for your RowList (named headerRowList), you'll need to reference it in you HomeScene.xml:

<component name="HomeScene" extends="Scene"  initialFocus = "headerMarkupGrid">

    <script type="text/brightscript" uri="pkg:/components/HomeScene.brs" />

    <children>
        <Poster
            id="logo" 
            uri="pkg:/images/logo.png"
            width="350"
            height="150" />
        <MarkupGrid
            id="headerMarkupGrid"
            translation="[275,10]" 
            itemComponentName="TopNavGroup"
            itemSize="[550,150]"
            itemSpacing="[0,10]" 
            drawFocusFeedback="false" 
            numRows="1"
            numColumns="4" />
        <HeaderRowList id="rowList" />
    </children> 
</component>

This will make it visible and accessible in your main scene.

It's Working for me but Focus SET on only headerMarkupGrid ..how to change Focus MarkupGrid to RowList..? — Raj G, Nov 26 '19 at 13:18
@SumitGhorpade you need to use FindNode to get refs to your grids, and then you can call SetFocu on it — sudo97, Jan 06 '20 at 13:38

ROKU: How can I add MarkupGrid and Rowlist in same scene?

1 Answers1