Guides and Sample Code

Developer

Apple TV Markup Language Reference

On This Page

stackTemplate

Use the stack template (stackTemplate) to display groups of products; for example, displaying different genres of movies. Each group of products is displayed directly underneath the previous group. Products can be displayed in different ways using carousel, grid, and shelf elements. Figure 19-1 shows the basic layout for a stackTemplate page. The theme for the stack template defaults to the system preference.

Figure 19-1Stack template image: ../Art/ATV_temps_stack_2x.png

Main Elements of the Stack Template

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

Listing 19-1stackTemplate TVML format
  1. <stackTemplate>
  2. <banner>
  3. </banner>
  4. <collectionList>
  5. <shelf>
  6. <section>
  7. <lockup>…</lockup>
  8. </section>
  9. </shelf>
  10. </collectionList>
  11. </stackTemplate>
Table 19-1stackTemplate element descriptions

Element name

Description

banner

A page description along the top of the screen.

collectionList

Element that contains all elements used to display groups of products, such as dramas and comedies, in a horizontal format.

lockup

Element containing img and title elements used to describe a product.

section

Element containing a group of lockup elements.

shelf

Element containing a group of section elements.

Stack Template Example

Listing 19-2 shows the TVML for a stackTemplate example. Figure 19-2 shows the output for the example.

Listing 19-2stackTemplate example TVML
  1. <document>
  2. <stackTemplate>
  3. <banner>
  4. <title>Available Action Movies</title>
  5. </banner>
  6. <collectionList>
  7. <shelf>
  8. <section>
  9. <lockup>
  10. <img src="path to images on your server/Car_Movie_250x375_A.png" width="182" height="274" />
  11. <title>Movie 1</title>
  12. </lockup>
  13. <lockup>
  14. <img src="path to images on your server/Car_Movie_250x375_B.png" width="182" height="274" />
  15. <title>Movie 2</title>
  16. </lockup>
  17. <lockup>
  18. <img src="path to images on your server/Car_Movie_250x375_C.png" width="182" height="274" />
  19. <title>Movie 3</title>
  20. </lockup>
  21. </section>
  22. </shelf>
  23. <shelf>
  24. <section>
  25. <lockup>
  26. <img src="path to images on your servers/Space_Movie/Space_Movie_250x375_B.png" width="182" height="274"></img>
  27. <title>Movie 4</title>
  28. </lockup>
  29. <lockup>
  30. <img src="path to images on your server/Space_Movie/Space_Movie_250x375_A.png" width="182" height="274"></img>
  31. <title>Movie 5</title>
  32. </lockup>
  33. <lockup>
  34. <img src="path to images on your server/Space_Movie/Space_Movie_250x375_C.png" width="182" height="274"></img>
  35. <title>Movie 6</title>
  36. </lockup>
  37. </section>
  38. </shelf>
  39. </collectionList>
  40. </stackTemplate>
  41. </document>
Figure 19-2stackTemplate example output image: ../Art/stackTemplateSS_2x.png