Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

paradeTemplate

Use the parade template (paradeTemplate) 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. Figure 13-1 shows the basic layout for a paradeTemplate page. The theme for the parade template defaults to the system preference.

Figure 13-1Parade template image: ../Art/ATV_temps_parade_2x.png

Main Elements of the Parade Template

Listing 13-1 shows main elements in TVML format, and Table 13-1 describes the main elements.

Listing 13-1paradeTemplate TVML format
  1. <paradeTemplate>
  2. <list>
  3. <header>
  4. <title>Title</title>
  5. </header>
  6. <section>
  7. <listItemLockup>
  8. <title>Title 1</title>
  9. </listItemLockup>
  10. <listItemLockup>
  11. <title>Title 2</title>
  12. </listItemLockup>
  13. </section>
  14. <relatedContent>
  15. <imgDeck>
  16. <img src="" />
  17. <img src="" />
  18. </imgDeck>
  19. </relatedContent
  20. </list>
  21. </paradeTemplate>

Table 13-1paradeTemplate element descriptions

Element name

Description

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.

Parade Template Example

Listing 13-2 shows the TVML for a paradeTemplate example. Figure 13-2 shows the output for the example.

Listing 13-2paradeTemplate example TVML
  1. <document>
  2. <paradeTemplate>
  3. <list>
  4. <header>
  5. <title>Movie Genres</title>
  6. </header>
  7. <section>
  8. <listItemLockup>
  9. <title>Action</title>
  10. </listItemLockup>
  11. <listItemLockup>
  12. <title>Comedy</title>
  13. </listItemLockup>
  14. <listItemLockup>
  15. <title>Horror</title>
  16. </listItemLockup>
  17. <listItemLockup>
  18. <title>Kids</title>
  19. </listItemLockup>
  20. <listItemLockup>
  21. <title>Drama</title>
  22. </listItemLockup>
  23. </section>
  24. <relatedContent>
  25. <imgDeck>
  26. <img src="path to images on your server/Car_Movie_250x375.png "/>
  27. <img src="path to images on your server/Car_Movie_250x375_A.png "/>
  28. <img src="path to images on your server/Car_Movie_250x375_B.png "/>
  29. <img src="path to images on your server/Car_Movie_250x375_C.png "/>
  30. </imgDeck>
  31. </relatedContent>
  32. </list>
  33. </paradeTemplate>
  34. </document>
Figure 13-2paradeTemplate example output image: ../Art/paradeTemplateSS_2x.png