Search code examples
rokubrightscriptscenegraph

Use LabelList or MarkupList to render two labels for each content node?


I am looking to implement a LabelList or MarkupList ( if need be ), where the content nodes contain two labels ( two titles, lack of a better term ).

I noticed that many content nodes on the roku's default settings page have two labels that are rendered.

Something like this:

----------------------------------------
Label 1                          Label 2
----------------------------------------
Label 1                          Label 2
----------------------------------------
Label 1                          Label 2
----------------------------------------

Solution

  • It is actually rather simple to do this. You will need to use a Markup List, in which you can create a list of custom Scenegraph components. First, create a custom Scenegraph component that extends Group, with two different Label nodes as children. I would set the translation field for one node as [x.0], depending on how far spaced you want the two labels to be, or you can use a Label Node. Then, make a markupList, and set the "itemComponentName" to the custom component with two labels. Finally, create a Content Node as a child node of the Markup List with the necessary data (In this case, two text fields) as follows:

     <MarkupList
            id = "MarkupList"
            itemComponentName = "<INSERT COMPONENT ITEM HERE>"
            numRows="3" >
    
            <ContentNode id = "ContentNode" role = "content" >
                <ContentNode
                  text1="Label 1"
                  text2="Label 2"/>
                <ContentNode
                  text1="Label 1"
                  text2="Label 2"/>
                <ContentNode
                  text1="Label 1"
                  text2="Label 2"/>
            </ContentNode>
    
          </MarkupList>`
    

    You may have to use the addFields() method instead to add the content for the label.

    Here are some resources from the Roku SDK: Creating Custom Components - https://sdkdocs.roku.com/display/sdkdoc/Creating+Custom+Components

    MarkupList - https://sdkdocs.roku.com/display/sdkdoc/MarkupList

    addField() - https://sdkdocs.roku.com/display/sdkdoc/ifSGNodeField#ifSGNodeField-addFields(fieldsasObject)asBoolean