4

I am pretty new to Roku world. I smell like its a very simple and straight forward question, but was not able to figure out any solutions. Any help would be much appreciated.

I was trying to create a sample application which includes three button in the UI. So, I chose ButttonGroup to do this usecase.

<ButtonGroup id="btnGroup" layoutDirection="horiz"
                    visible="true" translation="[90,601]"
                    itemSpacings="[20,20]" minWidth="240"
                    maxWidth="240" buttonHeight="80">           

                <Button id="button1" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:"
                        focusBitmapUri="pkg"/>          

                <Button id="button2" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:" 
                        focusBitmapUri="pkg:"/> 


                <Button id="button3" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:" 
                        focusBitmapUri="pkg:"/>                                         
        </ButtonGroup>

The thing is that i am able to advance through this buttons with "up" and "down" key of the remote, where i actually need this to be done with "left" and "right" key.

As i have set the layoutDirection value to horiz, i thought the advance and reverse key would automatically changes to "right" and "left" respectively. Doesn't seems like its working as expected. Am i missing something here? Please help.

nithin ks
  • 285
  • 3
  • 11

3 Answers3

1

I have made this possible by using LayoutGroup instead of ButtonGroup and also with the help of OnKeyEvent function.

Not sure whether its the right way of doing.

Please provide best solutions, if possible.

nithin ks
  • 285
  • 3
  • 11
1

From Roku Documents: "The ButtonGroup node class manages the layout, visual attributes, and focus management of a VERTICAL list of Button nodes." So it will work only with vertical buttons!Btw, I don't like Roku default ones or ButtonGroup. You can create your own buttons component. And in that component, In onKey event you can define different behaviour for vertical and horizontal button layouts. Based on that, I think your approach is just fine.

U.Mitic
  • 744
  • 1
  • 6
  • 14
0

Us the "OnKeyEvent" function to change mybuttongroup.focusbutton when key = "left or "right". See below:

function onKeyEvent(key as String,press as Boolean) as Boolean
    if key = "left" 
            m.mybuttongroup.focusButton = 0 'left button
            return true
    else if key = "right"   
            m.mybuttongroup.focusButton = 1 'right button
            return true    
    end if
    return false
end function
Ken Roy
  • 915
  • 1
  • 10
  • 15