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.
[Image]
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:
[Image]