Table of Contents
There are a few Roku SceneGraph node classes that group screen sub-elements together to allow them to be used as a group:
The ButtonGroup node class allows to quickly create and configure a group of several buttons that appear and operate in the same way as Button node buttons.
buttongroupscene.xml component file creates two buttons by simply setting the
buttons field of a ButtonGroup node object created in the <children> element with the strings that appear on the buttons:
buttongroup.buttons = [ "OK", "Cancel" ]
The required focus on the ButtonGroup node is set using the
initialFocus attribute of the <component> element. With the focus set on the ButtonGroup node, the buttons appear as follows:
Note that the focus on each button is controlled by Up and Down remote keys as in a list node. And the index numbers of the buttons focused and selected also work like list nodes, with the top-most button being index 0 in the ButtonGroup node, the next button down is 1, and so forth (see Creating Lists and Grids and Lists and Grids Markup). So you can set observers on the
buttonSelected ButtonGroup node fields, and handle those events in callback functions in much the same way you would with a list node.
The LayoutGroup node class allows you to create evenly-spaced arrangements of multiple screen sub-elements. You can use this to create "tables" of the sub-elements if required for your application.
layoutgroupcolorsscene.xml we create several groups of Label and Rectangle node paired sub-elements. The first group at the top show the hexadecimal definitions of the fully-saturated primary and secondary colors of the Rectangle node. The next two groups show less-saturated colors, and the third group shows different alpha channel effects for the fully-saturated and less-saturated colors. Finally the last group at the bottom shows the two default text colors used for focused and unfocused buttons and lists, set against the corresponding opposite default color:
Each group consists of a LayoutGroup node with Label and Rectangle node sub-elements as children of a LayoutGroup node. The important LayoutGroup fields are the
layoutDirection fields. These are set to
horiz respectively for all the groups to evenly space the sub-elements in the group by 20 pixels, arranged horizontally.
id = "fullysaturatedcolors"
translation = "[ 0, 0 ]"
itemSpacings = ""
layoutDirection = "horiz" >
color = "0xEB1010FF"
height = "40"
width = "180" >
color = "0x262626FF"
height = "40"
width = "180"
horizAlign = "center"
vertAlign = "center"
text = "0xEB1010FF"/>
Of course, large groups like this could be generated in a loop that automatically creates and/or adds child sub-elements for each LayoutGroup node...