Article

paradeTemplate

Displays a groups of items along one side of a page and scrolling images on the other side.

Overview

Use the paradeTemplate element to display a list of automatically scrolling, static images on the left that are associated with a selected image category on the right. For example, a user selects Action movies, and the associated images automatically start scrolling. The following figure shows the basic layout for a paradeTemplate page. The theme for the parade template defaults to the system preference.

Layout diagram showing an image deck area on the left side, and a header area above a section area on the right.

Main Elements

The following listing shows main elements of the paradeTemplate in TVML format.

<paradeTemplate>
   <list>
      <header>
         <title>Title</title>
      </header>
      <section>
         <listItemLockup>
            <title>Title 1</title>
         </listItemLockup>
         <listItemLockup>
            <title>Title 2</title>
         </listItemLockup>
      </section>
      <relatedContent>
         <imgDeck>
            <img src="" />
            <img src="" />
         </imgDeck>
      </relatedContent
   </list>
</paradeTemplate>

Element Descriptions

header

Title information for the list of image categories on the right side of the screen.

img

A single image that scrolls across the left side of the screen.

imgDeck

A group of images on the left side of the screen that scroll right-to-left.

list

Element containing all the elements that are displayed.

listItemLockup

Information about an individual item in the list of image categories.

relatedContent

Element containing the image deck that is associated with a particular item in the list.

title

The text used to provide a description for its containing element.

Example

The following listing shows the TVML for a paradeTemplate example.

<document>
    <paradeTemplate>
        <list>
            <header>
                <title>Movie Genres</title>
            </header>
            <section>
                <listItemLockup>
                    <title>Action</title>
                </listItemLockup>
                <listItemLockup>
                    <title>Comedy</title>
                </listItemLockup>
                <listItemLockup>
                    <title>Horror</title>
                </listItemLockup>
                <listItemLockup>
                    <title>Kids</title>
                </listItemLockup>
                <listItemLockup>
                    <title>Drama</title>
                </listItemLockup>
            </section>
            <relatedContent>
                <imgDeck>
                    <img src="path to images on your server/Car_Movie_250x375.png "/>
                    <img src="path to images on your server/Car_Movie_250x375_A.png "/>
                    <img src="path to images on your server/Car_Movie_250x375_B.png "/>
                    <img src="path to images on your server/Car_Movie_250x375_C.png "/>
                </imgDeck>
            </relatedContent>
        </list>
    </paradeTemplate>
</document>

The following figure shows the output for the above example:

Screenshot showing movie genres on the right. A collage of images relating to the selected movie genre is on the left.

Topics

Valid TVML Attributes

autoHighlight

Specifies that the element should initially be in focus.

binding

Associates information in a data item with an element.

layoutDirection

Specifies the direction in which text is displayed.

prototype

Associates a data item type with an element.

theme

Sets the color scheme for an element.

See Also

Full-Page Templates

alertTemplate

Displays important information to the user.

catalogTemplate

Displays groups of items along one side of a page and images of a group's contents on the other side.

compilationTemplate

Displays information about a single media item and its components.

descriptiveAlertTemplate

Displays large amounts of important information to the user.

divTemplate

Provides the ability to create pages that don't conform to a layout defined by another template.

formTemplate

Provides the ability to gather information from the user.

listTemplate

Displays a list of items along one side of a page and the corresponding image on the other side.

loadingTemplate

Displays a spinner and description on the screen.

mainTemplate

Displays user options for a media item.

menuBarTemplate

Creates a page with items along the top and related information below.

oneupTemplate

Creates a page that allows users to navigate between full-screen images.

productBundleTemplate

Displays information for a group of related media items.

productTemplate

Displays detailed information about a single product.

ratingTemplate

Displays a rating for an item.

searchTemplate

Searches for a media item based on user input.

showcaseTemplate

Displays images the user can navigate between.

stackTemplate

Displays groups of products.

Using the productUberTemplate with scrollable regions

Specify regions in a page that are scrollable and not scrollable to use the the new product uber template