TV-friendly focus traversal
By user12608660 on Jun 02, 2010
Traversing nodes using TV remote presents certain challenges. In a typical TV set-up there is no mouse or touch screen to click on things and there is no Tab key which is traditionally used on desktop for traversal. The user-friendly way to traverse nodes on TV is using directional arrow keys.
We added two-directional traversal as a new feature in Java FX 1.3 to support TV remotes and non-touch screen phones. And it is very easy to use. When you add a bunch of UI controls to a TV application, they automatically become part of the 2D traversal grid. A simple application shows how this works. Several traversalble nodes are laid out on the screen: a ListView, a CheckBox, a TextBox and a couple of buttons. The user can navigate by pressing directional keys and interact with controls by pressing other keys (e.g. Enter to push a button or number keys to enter digits).
No special code is required to implement the traversal, it just works. It is not necessary to align the controls in a nice grid either. The traversal engine knows the coordinates of each control and figures out which control is directly above or below the one that has focus.
Note that the directional keys are also used to select an item in the ListView. When ListView has focus, The Up and Down keys will interact with ListView by chaning the selection and the Right key will move focus to the controls on the right. This arrangement makes it very easy to interact with the application, but it places certain limits on application layout. For eaxmple, if we add another button under the ListView, there won't be an easy way to traverse to it as Down button is controlling the ListView selection in the default traversal engine. However, application developers can define their own traversal behavior if needed. A similar limitation exists for the other "directional" controls like Slider or ScrollView. In most cases it is best if controls are laid out in a way that is intuitive for the user to navigate, like in this example.
Download the source code: Main.fx.