Contents

listTemplate

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

Overview

Use the listTemplate element to display a list of items; for example, a list of the user’s favorite movies. Whereas you use the catalog template to display categories of a product (action movies, comedies, favorite movies), you use the list template to display actual contents of one category, such as a list of the user’s favorite movies. The items are listed on the right side of the screen with like items grouped together in a section. A title providing a brief description of the items is contained in a header area directly above the listed items. When an item is selected, information about the item is displayed on the left side of the screen. The following figure shows the basic layout for a listTemplate page. The theme for the list template defaults to the system preference.

[Image]

Main Elements

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

<listTemplate>
   <banner>
      …
   </banner>
   <list>
      <header>
         …
      </header>
      <section>
         <listItemLockup>
            <title>…</title>
            <relatedContent>
               …
            </relatedContent>
         </listItemLockup
      </section>
   </list>
</listTemplate>

Element Descriptions

banner

Element containing background information and the page title.

header

Information describing what a section contains.

list

Element containing all content for the listTemplate page.

listItemLockup

Element containing all information that pertains to one list item, such as an item title and image, as well as related content.

relatedContent

Information that is displayed on the left side of the screen when an item in the list is highlighted.

section

An area of the page that groups related elements together as one element, for layout purposes. In this case, the section contains list items.

Example

The following listing shows the TVML for a listTemplate example. An image and a description that relate to the highlighted item are displayed on the left side of the screen.

<document>
   <listTemplate>
      <banner>
         <title>Johnny Appleseed's Movie Collection</title>
      </banner>
      <list>
         <header>
            <title>Favorite Movies</title>
         </header>
         <section>
            <listItemLockup>
               <title>Movie 1</title>
               <relatedContent>
                  <lockup>
                     <img src="path to images on your server/Car_Movie_1920x1080.png" width="857" height="482" />
                     <title>Movie 1</title>
                     <description>A brief description for the first movie should go here.</description>
                  </lockup>
               </relatedContent>
            </listItemLockup>
            <listItemLockup>
               <title>Movie 2</title>
               <relatedContent>
                  <lockup>
                     <img src="path to images on your server/Car_Movie_800x600.png" width="857" height="482" />
                     <title>Movie 2</title>
                     <description>A brief description for the second movie should go here.</description>
                  </lockup>
               </relatedContent>
            </listItemLockup>
            <listItemLockup>
               <title>Movie 3</title>
               <relatedContent>
                  <lockup>
                     <img src="path to images on your server/Car_Movie_720x720.png" width="857" height="482" />
                     <title>Movie 3</title>
                     <description>A brief description for the third movie should go here.</description>
                  </lockup>
               </relatedContent>
            </listItemLockup>
         </section>
      </list>
   </listTemplate>
</document>

The following figure shows the output for the above example:

[Image]

Topics

Valid TVML Attributes

See Also

Full-Page Templates