Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

catalogTemplate

Use the catalog template (catalogTemplate) to display information about groups of like products; for example, a movie catalog that provides categories for dramas, comedies, and all movies. Each group of products is contained in its own section and displayed along the left side of the screen. Images depicting the products contained within a selected group are displayed in the related content area on the right side of the screen. Figure 3-1 shows the basic layout for a catalogTemplate page. The theme for the catalog template defaults to the system preference.

Figure 3-1Catalog template image: ../Art/ATV_temps_catalog_2x.png

Main Elements of the Catalog Template

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

Listing 3-1catalogTemplate TVML format
  1. <catalogTemplate>
  2. <banner>
  3. <title>…</title>
  4. </banner>
  5. <list>
  6. <section>
  7. <listItemLockup>
  8. </listItemLockup>
  9. </section>
  10. <section>
  11. <header>
  12. </header>
  13. <listItemLockup>
  14. </listItemLockup>
  15. </section>
  16. </list>
  17. </catalogTemplate>

Table 3-1catalogTemplate element descriptions

Element name

Description

banner

Information describing what the catalog contains, such as movies.

header

Information describing what one section of the page contains.

list

Element containing all content in the template page, except banner information.

listItemLockup

Element containing all information that relates to one list item on the left side of the page, including the item title and label, as well as related content.

section

An area of the page containing related elements that are grouped together as one element for layout purposes.

Catalog Template Example

Listing 3-2 shows the TVML for a catalogTemplate example. The example displays a title along the top of the screen. Two items representing movie categories, All Movies and Comedies, are listed along the left side of the screen. Movie posters are presented on the right in a grid format according to which movie category the user selects. Figure 3-2 shows the output for the example.

Listing 3-2catalogTemplate example TVML
  1. <document>
  2. <catalogTemplate>
  3. <banner>
  4. <title>Movies</title>
  5. </banner>
  6. <list>
  7. <section>
  8. <listItemLockup>
  9. <title>All Movies</title>
  10. <decorationLabel>6</decorationLabel>
  11. <relatedContent>
  12. <grid>
  13. <section>
  14. <lockup>
  15. <img src="path to images on your server/Car_Movie_250x375_A.png" width="250" height="376" />
  16. <title>Movie 1</title>
  17. </lockup>
  18. <lockup>
  19. <img src="path to images on your server/Car_Movie_250x375_B.png" width="250" height="376" />
  20. <title>Movie 2</title>
  21. </lockup>
  22. <lockup>
  23. <img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />
  24. <title>Movie 3</title>
  25. </lockup>
  26. <lockup>
  27. <img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />
  28. <title>Movie 4</title>
  29. </lockup>
  30. <lockup>
  31. <img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />
  32. <title>Movie 5</title>
  33. </lockup>
  34. <lockup>
  35. <img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />
  36. <title>Movie 6</title>
  37. </lockup>
  38. </section>
  39. </grid>
  40. </relatedContent>
  41. </listItemLockup>
  42. <listItemLockup>
  43. <title>Comedies</title>
  44. <decorationLabel>4</decorationLabel>
  45. <relatedContent>
  46. <grid>
  47. <section>
  48. <lockup>
  49. <img src="path to images on your server/Car_Movie_250x375_B.png" width="250" height="376" />
  50. <title>Movie 2</title>
  51. </lockup>
  52. <lockup>
  53. <img src="path to images on your server/Car_Movie_250x375_A.png" width="250" height="376" />
  54. <title>Movie 1</title>
  55. </lockup>
  56. <lockup>
  57. <img src="path to images on your server/Car_Movie_250x375.png" width="250" height="376" />
  58. <title>Movie 4</title>
  59. </lockup>
  60. <lockup>
  61. <img src="path to images on your server/Car_Movie_250x375_C.png" width="250" height="376" />
  62. <title>Movie 3</title>
  63. </lockup>
  64. </section>
  65. </grid>
  66. </relatedContent>
  67. </listItemLockup>
  68. </section>
  69. </list>
  70. </catalogTemplate>
  71. </document>
Figure 3-2catalogTemplate example output image: ../Art/catalogTemplateSS_2x.png