Roku SceneGraph RCU handling

scenegraph-rcu-handling.markdown

#Working with RCU input SceneGraph makes working with RCU events easier than ever. Currently in SDK1 you generally would have an event loop for a page and listen for RCU inputs - then check what item is focused before deciding what to do with the input. With SceneGraph you put the code directly on the component/node.

The function used for handling RCU input is function onKeyEvent(key as String, press as Boolean) as Boolean.

The key that is passed in will be one of these strings, representing an RCU input: back, up, down, left, right, OK, replay, play, rewind, fastforward or options. Keys such as home are handled by the Roku firmware and are unavailable to us. The press parameter is true if the input was a press and false if it was a release. Allowing us to avoid apparent double clicks.

These key events can be bubbled up through the display hierarchy. If we do not wish the event to be bubbled up (because we have handled the event) we return true. If however we didn't handle the event and would like something further up the chain to handle it we return false.

The onKeyEvent method is triggered when a component (or one of it's children) has focus.

One thing to try and avoid is overriding a components onKeyEvent function that is already implemented - such as a PosterGrid's up, down, left and right methods. You are better off using the observeField method to monitor values you wish to trigger other functions.

##An example of an onKeyEvent function This is an example of using the onKeyEvent function to monitor someone pressing back.

function onKeyEvent(key as String, press as Boolean) as Boolean
  if press then
    if (key = "back") then
      closeThisPage()
      return true
    end if
  end if
  return false
end function

It's as simple as that now! (Obviously you need to implement the closeThisPage function). So all we have here is we check for the back key press. If it is then we close the page and prevent the keypress bubbling up by returning true. Otherwise we bubble up the event by returning false.

##CHALLENGE

• create a UI with four buttons. One in the top left, one in the top right, one in the bottom left and one in the bottom right.
• make the UI focus on the buttons correctly. For example if you are on the top left button and you push right you move to the top right button or if you pressed down focus would move to the bottom left button.
• when you click these buttons you should go to a different screen with no buttons visible but a fullscreen image should be visible. The image should be different for each of the four buttons you click on.
• when you are on a fullscreen image page and you click back you should go back to the button page.