Google TV

Getting started with Closure-based Google TV UI library

Wiktor Gworek, Software Engineer
March 2011

This Hello World exercise introduces the process of using the Google TV UI library in a web page. To do this exercise you need to have some familiarity with JavaScript, Subversion and basics of Closure Library.

Hello TV

Step 1: Downloading Google TV UI library

Download Google TV UI library from Subversion repository by executing following command from command line:

svn checkout http://gtv-ui-lib.googlecode.com/svn/trunk/closure gtv-ui-lib

After executing this command you should have two directory named gtv-ui-lib. Note the structure of this directory:

  • closure-library/ - snapshot of Closure Library.
  • docs/ - documentation generated with JsDoc.
  • examples/ - examples and samples.
  • source/ - sources of the Google TV UI Library.

Step 2: Create dependency file

In this step additional dependency file is being generated. In this way Closure Library will recognize tv.ui namespace and will know which files to include from Google TV UI library.

Execute following command to generate tv-deps.js

gtv-ui-lib/closure-library/closure/bin/build/depswriter.py \
  --root_with_prefix="gtv-ui-lib/source ../../../../gtv-ui-lib/source" \
  --output_file=tv-deps.js

Addional reading about DepsWriter can be found here.

Step 3: Create an HTML file

Save the following HTML in file called hello-tv.html. Place this file next to the gtv-ui-lib directory.

<!DOCTYPE html>
<html>
  <head>
    <!-- Custom paths to Closure Library and GTV Closure UI Library files -->
    <script src='gtv-ui-lib/closure-library/closure/goog/base.js'></script>
    <script src='tv-deps.js'></script>
    <!-- End custom script includes -->
    <script type='text/javascript'>
      goog.require('tv.ui');
      goog.require('tv.ui.Component');
      goog.require('tv.ui.Container');
      goog.require('tv.ui.Document');
    </script>
    <style type='text/css'>
      .tv-component.tv-component-focused {
        color: #fff;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div class='tv-container-horizontal'>
      <span class='tv-component' id='hello'>Hello</span>
      <span class='tv-component' id='world'>World</span>
    </div>
    <script type='text/javascript'>
      tv.ui.decorate(document.body);
      var elementToFocus = goog.dom.getElement('hello');
      var componentToFocus = tv.ui.getComponentByElement(elementToFocus);
      tv.ui.Document.getInstance().setFocusedComponent(componentToFocus);
    </script>
  </body>
</html>

Step 4: Say hello to Google TV UI library

Open hello-tv.html file in a browser. You should see the following.

Final result

If you have trouble seeing this result, you can take a look at http://gtv-ui-lib.googlecode.com/svn/trunk/closure/examples/hello-tv.html.

How Does This Example Work?

The hello-tv.html includes directly two scripts:

  • Closure Library's base.js that you downloaded in Step 1 which bootstraps Closure Library. It defines such function like goog.require() and goog.addDependency().
  • Closure-based Google TV UI library's tv-deps.js that you generated in Step 2 which is additional dependency file for Closure Library. This file contains one line for every JavaScript file in the library, each specifying the file location (relative to base.js), the namespace it provides, and the namespace it requires.

Next the example defines what classes are needed from Closure-based Google TV UI library.

goog.require('tv.ui');            // Used in the bottom script tag for bootstrapping the library.
goog.require('tv.ui.Component');  // Two tv.ui.Components were constructed in the example.
goog.require('tv.ui.Container');  // Those two were wrapped in a container that enabled keyboard navigation.
goog.require('tv.ui.Document');   // Used in the bottom script tag for setting first element to put focus on.

Logical view of the example is as follows.

Logic view

This logical view was coded in simple HTML using declarative UI. Note that <div> and two <span> elements were marked with specially recognized CSS classes.

<div class='tv-container-horizontal'>
  <span class='tv-component' id='hello'>Hello</span>
  <span class='tv-component' id='world'>World</span>
</div>

They are turned into live, actionable components with following code.

// Starts the decoration of HTML elements and creates components based on CSS classes.
// DOM elements that doesn't have appropriate decorators are omitted.
tv.ui.decorate(document.body);

// Following three lines find component that we want to put focus on.
var elementToFocus = goog.dom.getElement('hello');
var componentToFocus = tv.ui.getComponentByElement(elementToFocus);
tv.ui.Document.getInstance().setFocusedComponent(componentToFocus);

Notice that in hello-tv.html selected component is being highlighted by setting background color to black and text color to white. This is being declared in CSS.

.tv-component.tv-component-focused {
  color: #fff;
  background-color: #000;
}

When component is being focused, its element is being decorated with .tv-component-focused CSS class.

Next Steps

This example illustrates development setup of Closure-based Google TV UI library by using base.js and tv-deps.js. The Closure Library provides tools for assembling just the parts needed into a single JavaScript file. Recommended reading: Getting Started with the Closure Library, Building an Application with the Closure Library, Using ClosureBuilder.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.