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:
- <div>, <p>, <img>, and other elements can not gain actual focus through a remote control
- Block level <button> and <input> and <textarea> elements can gain focus.
- 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:
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.
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.