Documentation Archive


Apple TV Markup Language Reference

On This Page


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



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


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


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


Element containing all the elements that are displayed.


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


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


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