How do I move focus between the keyboard and a group of buttons on the screen?
So, for a project at work, we were tasked with creating a Roku app for a client. Sorry if this is a stupid question, but I've never touched brightscript or Roku development in general, and I'm basically an action / javascript developer.
I am connecting my path and now I am in a situation where I am trying to create a scenegraph component to display the keyboard and ButtonGroup shown below. The group of buttons is essentially designed to select either send what's in the keyboard text field or cancel the entry.
So far, I have all the component and focus renderers installed on the keyboard (which seems necessary, otherwise the keyboard won't be accessible just by pressing up and down on the remote).
However, when navigating the keyboard, I can't find a way to move the focus to the button group. Basically, if I press down on the remote in the bottom row of the keyboard, it doesn't do anything. It never moves focus down to the buttongroup.
I just hope someone can help me figure this out. I know the answer is probably obvious and I just missed it, but I've been banging my head about it all the time playing with some things and I just can't figure it out.
Below is an example of the component on which the keyboard and group are located. Feel free to criticize anything else you see, I feel bad too, as 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>
source to share
You can read about onKeyEvent in the 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
source to share