Google TV UI Library Demos

Component

Button

Link

Container

Grid

Lightbox

Tab Container

AJAX

tv.ui.Component

Main building block of tv.ui.Decoration is tv.ui.Component. It has only notion of of being focused. You can use keyboard or mouse for navigation.

CSS class used for decoration: tv-component

Content can be arbitral HTML, like text.

Or image.

Different sizes.

And different highlight.

Or it can zoom.

Yes, it can rotate.

tv.ui.Button & tv.ui.ToggleButton

Button is a component that can fire action event. Try clicking on the button or press space or enter on focused component.

CSS class used for decoration: tv-button

Click me

Press enter on me

Press space on me

Toggle Button is a button with on/off state.

CSS class used for decoration: tv-toggle-button

Click on me to change state.

tv.ui.Link

Browser link (<a> element) has serveral downsides:

when it's focused by browser, layout can be damaged by page scrolling to the link,
browser displays link destination on the bottom of the screen which distracts user,
browsers by default renders its outline which might not match the UI of app.

CSS class used for decoration: tv-link

HTML structure:

  <div class="tv-link" href="http://link to external site">Link content</div>

Click or press space or enter to go to url.

Google TV features (goes to http://google.com/tv)

Container

Containers (JS: tv.ui.Container, CSS: tv-container) are powerful building blocks for your application.

Both horizontal (CSS: tv-container-horizontal)...

...and vertical (CSS: tv-container-vertical) containers are supported.

Containers are great when you have more content than place to display it. To suit different needs, there are two scrolling policies. One keeps selected item at start of the container (CSS: tv-container-start-scroll).

The other one tries to position selected item in the middle of the container (CSS: tv-container-middle-scroll). Use ← and → or mouse to discover differences between policies.

Animations (CSS: -webkit-transition) enrich user experience, helping user to understand what is going on. Try to scroll following container.

To reduce number of moving parts and make scrolling even more visually pleasant, you can use detached highlight (CSS: tv-container-highlight). Notice that highlight stays in place when container is scrolled.

Slits (CSS: tv-container-start-slit, tv-container-end-slit) suggest there are more items to the left and right of scrolling window.

Avatar

Inception

Iron Man

Matrix

Terminator

tv.ui.Grid

tv.ui.Lightbox

Lightbox is a simple full screen photo viewer.

Just invoke from JavaScript tv.ui.Lightbox.show(listOfPhotos, startIndex);

tv.ui.TabContainer

Tab containers are great for building menus and other tabbed content.

Code structure:

<div class="tv-tab-container tv-container-vertical">
  <div class="tv-tab-container-bar tv-container-horizontal">
    // Tab bar components.
  </div>
  <div class="tv-tab-container-content tv-container-horizontal">
    // Content components.
  </div>
</div>

tab 1

tab 2

tab 3

tab 4

content 1

content 2

content 3

content 4

Menu extends tab container by introducing new ways of navigation, such as entering submenu when Enter is pressed. As other TV UI components, menu doesn't imply any specific looks. This expanding menu...

North America

→

...mostly differs from sliding menu by CSS styles, having almost identical HTML structure.

AJAX

Decoration is powerful technique that significantly reduces amount of JavaScript code in your application by replacing it with declarative HTML and CSS. That said, if your data is coming from network asynchronously, we still have a solution for you. Below we load search results from YouTube using JSONP (JS: goog.net.Jsonp), generate DOM on the fly and decorate it (JS: tv.ui.decorateChildren).

Search YouTube

→

Press Enter to start playing selected video.