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

Question

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
----------------------------------------

score 1 · Accepted Answer · answered Jul 13 '18 at 22:25

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

thanks for your response. that makes a lot of sense, let me try that out. Is there an easy way to make it look like the default LabelList? Not that I'm hesitant on doing this since I probably need to, I would like to keep the styles consistent. — reid, Jul 14 '18 at 15:57
It will look similar to the LabelList. The only issue is dealing with the focus part of it, as you will need to provide a bitmap background. The MarkupList has the same fields for the most part as the LabelList, so it should be similar, if not the same look. — solomonjoseph, Jul 15 '18 at 03:59
To properly color the selected node, I followed this doc note, https://sdkdocs.roku.com/display/sdkdoc/MarkupList#MarkupList-ExampleMarkupListXMLComponent. "focusPercent interface field has an onChange function defined that changes the color of the label text as the item enters/leaves the focus region of the list" — reid, Jul 16 '18 at 23:31
Great! Another option would be to specify your own bitmask, which is a nine-patch image that is shown on the focused row to indicate focus. — solomonjoseph, Jul 17 '18 at 21:28

score 0 · Answer 2 · answered Oct 16 '22 at 14:46

Another quick way to syncronize the movement of two lists is to use an itemFocused event:

m.list1.ObserveField("itemFocused","onList1FocusChange")
...
sub onList1FocusChange()
     m.list2.jumpToItem = m.list1.itemFocused
end sub

This is not as pretty as doing it correctly, but it can help you in a simple proyect or while learning more about Roku development.

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

2 Answers2