Building Web Apps for Google TV

Chapter 5. Developing Your Web App

Putting a UI Together

Navigation

Using arrow keys or a D-pad for navigation is an essential part of the Google TV 10-foot experience. While it may seem straightforward at first, it can be complex to implement effective and flexible D-pad navigation for a web page. We’ll start with a simple example of a regular grid of fixed navigable items, add a lefthand navigation bar, and then items along the top of the page for meta-tasks like login.

Tip

You can use straight up JavaScript to code a web app, but we’ve found that the jQuery library enables effective and efficient JavaScript coding that can significantly reduce development time. You can learn more about jQuery at http://jquery.com.

A Regular Grid

Navigating a central section of a page with the arrow keys, which may be a regular grid (Figure 5-1), can be as simple as moving between adjacent items (left/right) and adjacent rows (up/down).

Figure 5-1. A regular grid layout for navigation, the most basic of designs

For flexibility, we’ll define our content as follows:

<div class="container"> <div class="item-row"> <div class="item-div"> <p class="item"></p> </div> <div class="item-div"> <p class="item"></p> </div> <div class="item-div"> <p class="item"></p> </div> </div> <div class="item-row"> <div class="item-div"> <p class="item"></p> </div> <div class="item-div"> <p class="item"></p> </div> </div> </div> ...