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).

A regular grid layout for navigation, the most basic of designs
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> ...

Get Building Web Apps for Google TV now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.