MarkupList in Roku

MarkupList node class provides the list of custom items. Custom items can contain labels or posters images. It is same like labels markup and poster grid markup but the difference is we can add the only label in LabelListMarkup and in MarkupList Markup we can do customization.

Suppose we want to create a list which will show underline and image on the focussed item. We have to define custom component behavior first in order to get this type of list. The name of this component is set as the itemComponentName field value of the MarkupList node. The content of the list is contained in the content node and to populate it we need to create an interface and before that a content node, where label and poster images for each item contained.

In main MarkupListScene.XML file will define only markup list and we will setup attributes like single item dimensions, item spacing, etc.

<children >
  <MarkupList 
  id = "exampleMarkupList" 
  itemComponentName = "MarkupListItem" 
  itemSize = "[ 586, 154 ]" 
  itemSpacing = "[ 0, 10 ]" 
  drawFocusFeedback = "false" 
  vertFocusAnimationStyle = "floatingFocus" />
</children>

For single item, we have to define MarkupListItem.xml

The element of markupListItem contains the renderable nodes. In the example, we are taking the label, rectangle, and poster only and we have to give the id to each node.

• Label for text
• Rectangle for underline
• Poster for image

<children>
    <Group>
    
          <Label 
            id = "itemLabel" 
            width = "150"
            height = "30"
            translation = "[ 60, 120 ]" />
    
          <Rectangle 
            id = "itemcursor" 
            width = "294" 
            height = "4" 
            color = "0xFF3333FF"
            opacity = "0.0"
            translation = "[ 0, 148 ]" />
    
          <Poster 
            id = "itemPoster" 
            width = "98" 
            height = "140" 
            opacity = "0.0"
            translation = "[ 192, 4 ]" />
    
        </Group>
    
      </children>
    

There is one thing to notice i.e we are not passing any URI to poster node and we have given id's to each node and we are going to populate them from the content node.
The interface items will be updated by content node by calling respective functions

<interface> 
  <field id = "itemContent" type = "node" onChange = "showcontent" />
  <field id = "focusPercent" type = "float" onChange = "showfocus" />
</interface>