ROKU:如何在同一场景中添加MarkupGrid和Rowlist?

时间:2019-05-08 23:37:37

标签: roku brightscript ott

我正在构建我的第一个Roku应用程序,虽然我能够分别呈现MarkupGrid和Rowlist,但是当我尝试在与MarkupGrid相同的场景上实现Rowlist时,我的屏幕变黑了。

我决定将RowList放置在单独的组节点中,但是我不确定如何使RowList在HomeScene中再次可见。

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

我希望场景看起来像这样:

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

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

1 个答案:

答案 0 :(得分:0)

由于已经为RowList创建了单独的组件(名为 headerRowList ),因此需要在 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>

这将使它在您的主场景中可见且可访问。