Keyboard/Remote Navigation

Keyboard/Remote Navigation

Development for CloudTV requires the developer to consider how a user will navigate an application not as they would on a traditional desktop, where the user interface depends heavily on a mouse. As a developer, you will need to consider that the primary navigation done by a user is with the Up/Down/Left/Right/OK buttons on their remote control.

The ActiveVideo Application Framework Application Libraries add a simple method to define navigation via a remote control. But before we get into the details, note the following restrictions:

  1. <div>, <p>, <img>, and other elements can not gain actual focus through a remote control
  2. Block level <button> and <input> and <textarea> elements can gain focus.
  3. To make a non-focusable element focusable, give it a tabindex (for example, tabindex="1")

What "gain focus" means is that the DOM assigns focus to an element, and that whatever CSS applies to that element when focused will be rendered. For example, consider a simple list:

<style> button{background-color:white;} button:focus{background-color:red;}  </style>  <script type="text/javascript">
document.body.onload = function(){document.getElementById('b1').focus();} </script> ... <button id="b1">Button 1</button> <button id="b2">Button 2</button> <button id="b3">Button 3</button>

This example will focus the first button, and will appear to have a red background on that button when the page loads. How though does the browser handle navigating between elements on the page? Currently, it does not, except through the "tabindex" attribute on elements, which unfortunately does not take into account the arrow keys on a remote control or keyboard. As a result, we have preemptively added support through the ActiveVideo Application Framework Libraries, adding support for the CSS3 module called "Direction Focus Navigation".

Utilizing Directional Focus Navigation is rather simple, and requires only 2 steps:

  • Add the ActiveVideo Application Framework Library to your application project. For more information on how to do this, takea  look at the ActiveVideo Framework Overview.
  • Add CSS styles for nav-up, nav-down, nav-left, nav-right to elements on the page with the value of the ID attribute to focus when that key press occurs.

 <button id="b1" style="nav-down:b2;">Button 1</button> <button id="b2" style="nav-up:b1; nav-down:b3;">Button 2</button> <button id="b3" style="nav-up:b2;">Button 3</button>

The above examples will allow you to navigate up and down through the list of buttons, realizing a red background on focus of each element. The library handles detecting support for the Directional Focus Navigation CSS module, and if it is not detected will emulate the navigation via the keyboard by looking at your CSS when a keydown event occurs.


  • Tuesday, 02 August 2011

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2018 Active Video Networks. All Rights Reserved