O'Reilly logo

Building Web Apps for Google TV by Steven Hines, Shawn Shen, Amanda Surya, Daniels Lee, Andres Ferrate, Paul Carff, Maile Ohye

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required