How to move focus between a keyboard and button group on a screen?

Question

So, for a project at work, we have been tasked with creating a Roku app for a client. Sorry if this is a stupid question, but I have never touched brightscript or Roku development in general, and am mostly a react/javascript developer.

I am plugging my way through, and am now in a situation where I am trying to create a scenegraph component to display a Keyboard, and a ButtonGroup displayed below. The button group is essentially for choosing to either submit what is in the Keyboard text field, or to cancel the entry.

So far, I have all of the elements in the component rendering and focus set to the keyboard (which seems to be necessary, otherwise, the keyboard will not be selectable by just pressing up and down on the remote).

However, when navigating around the keyboard, I cannot find any way to move the focus to the button group. Basically, if I press down on the remote on the bottom row of the keyboard, it does nothing. It never moves the focus down to the buttongroup.

I'm just hoping that someone can help me figure this out. I know the answer is probably obvious and I am just missing it, but I have been beating my head against this all morning, fiddling with some things, and I just can't seem to figure it out.

Below is an example of the component housing the keyboard and buttongroup. Feel free to critique anything else you see I am doing badly as well, since again, I have no real clue when it comes to Roku dev.

<?xml version="1.0" encoding="utf-8" ?>
<!-- Copyright 2016 Roku Corp.  All Rights Reserved. -->
<component name="MemberEmail" extends="Group">

  <children>
    <LayoutGroup id="MemberEmailLayout" translation = "[ 0, 0 ]" itemSpacings="[20]">
      <Keyboard id="EmailKeyboard" />
      <ButtonGroup id="EmailButtonGroup" />
    </LayoutGroup>
  </children>
  <script type = "text/brightscript" >

    <![CDATA[

    sub init()
      m.parentNode = m.top.getParent()

      m.memberEmailLayout = m.top.findNode("MemberEmailLayout")
      m.emailKeyboard = m.top.findNode("EmailKeyboard")
      m.emailButtonGroup = m.top.findNode("EmailButtonGroup")

      m.emailButtonGroup.buttons = ["Submit", "Cancel"]
      m.emailButtonGroup.observeField("buttonSelected","buttonPressed")

      emailKeyboardRect = m.memberEmailLayout.boundingRect()
      emailKeyboardCenterX = (1920 - emailKeyboardRect.width) / 2
      emailKeyboardCenterY = (1080 - emailKeyboardRect.height) / 2
      m.memberEmailLayout.translation = [ emailKeyboardCenterX, emailKeyboardCenterY ]

    end sub

    sub buttonPressed()
      if m.emailButtonGroup.buttonSelected = 1 then
        print "SUBMIT BUTTON SELECTED"
        print "Input Value is"; m.emailKeyboard.text
        m.parentNode.currentStep = "password"
      else if m.emailButtonGroup.buttonSelected = 2 then
        print "CANCEL BUTTON SELECTED"
      end if
    end sub
    ]]>

  </script>

</component>

Answer 1

You may want to read about onKeyEvent function in documentation. Add this function to your component:

    function onKeyEvent(key as String, press as Boolean) as Boolean
        handled = false

        if press
            if key = "down" and not m.emailButtonGroup.hasFocus()
                m.emailButtonGroup.setFocus(true)
                handled = true
            else if key = "up" and not m.emailKeyboard.hasFocus()
                m.emailKeyboard.setFocus(true)
                handled = true
            end if
        end if

        return handled
    end function