Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

compilationTemplate

Use the compilation template (compilationTemplate) to display information about one product that is made up of several distinct pieces; for example, an album and all of the songs that it contains. The header area on the left side of the screen contains general product information. Directly underneath the header area are several section areas that group like types of information; for example, one section can contain all of the songs on the album. The related content on the right side of the screen contains any images associated with the product and buttons that the user can use to interact with the product, such as Play and Buy buttons. Figure 4-1 shows the basic layout for a compilationTemplate page. The theme for the compilation template defaults to the system preference.

Figure 4-1Compilation template image: ../Art/ATV_temps_compilation_2x.png

Main Elements of the Compilation Template

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

Listing 4-1compilationTemplate TVML format
  1. <compilationTemplate>
  2. <background>
  3. </background>
  4. <list>
  5. <relatedContent>
  6. <itemBanner>
  7. </itemBanner>
  8. </relatedContent>
  9. <header>
  10. </header>
  11. <section>
  12. <header>
  13. <title>Title</title>
  14. </header>
  15. <listItemLockup>
  16. </listItemLockup>
  17. </section>
  18. </list>
  19. </compilationTemplate>

Table 4-1compilationTemplate element descriptions

Element name

Description

background

Background elements, such as audio.

header

Information describing what a section of the list contains.

itemBanner

Product information and row elements, such as button information, that are displayed along the right side of the screen.

list

Element containing all the content in the template (except background).

listItemLockup

Elements containing elements used to create one item in a list.

relatedContent

Element containing all elements displayed along the right side of the screen.

section

An area of the page that groups related elements for layout purposes.

Compilation Template Example

Listing 4-2 shows the TVML for a compilationTemplate example. The example displays a list on the left side that contains information about the album and a list of available songs. The right side of the display contains an image of the album and buttons prompting the user to buy, rate, or shuffle the music. Figure 4-2 shows the output for the example.

Listing 4-2compilationTemplate example TVML
  1. <document>
  2. <compilationTemplate theme="light">
  3. <list>
  4. <relatedContent>
  5. <itemBanner>
  6. <heroImg src="path to images on your server/Car_Movie_720x1080" />
  7. <row>
  8. <buttonLockup>
  9. <badge src="resource://button-add"/>
  10. <title>Add</title>
  11. </buttonLockup>
  12. <buttonLockup>
  13. <badge src="resource://button-rate"/>
  14. <title>Rate</title>
  15. </buttonLockup>
  16. <buttonLockup>
  17. <badge src="resource://button-shuffle"/>
  18. <title>Shuffle</title>
  19. </buttonLockup>
  20. </row>
  21. </itemBanner>
  22. </relatedContent>
  23. <header>
  24. <title>WWDC Roadtrip Soundtrack</title>
  25. <subtitle>Various Artists</subtitle>
  26. <row>
  27. <text>Instrumental</text>
  28. <text>5 Songs</text>
  29. <text>2015</text>
  30. </row>
  31. </header>
  32. <section>
  33. <description>Songs from your favorite movie</description>
  34. </section>
  35. <section>
  36. <listItemLockup>
  37. <ordinal minLength="2">1</ordinal>
  38. <title>Opening sequence</title>
  39. <decorationLabel>11:14</decorationLabel>
  40. </listItemLockup>
  41. <listItemLockup>
  42. <ordinal minLength="2">2</ordinal>
  43. <title>Fight song</title>
  44. <decorationLabel>3:47</decorationLabel>
  45. </listItemLockup>
  46. <listItemLockup>
  47. <ordinal minLength="2">3</ordinal>
  48. <title>Love theme</title>
  49. <decorationLabel>6:48</decorationLabel>
  50. </listItemLockup>
  51. <listItemLockup>
  52. <ordinal minLength="2">4</ordinal>
  53. <title>Car chase</title>
  54. <decorationLabel>5:21</decorationLabel>
  55. </listItemLockup>
  56. <listItemLockup>
  57. <ordinal minLength="2">5</ordinal>
  58. <title>End credit theme</title>
  59. <decorationLabel>8:03</decorationLabel>
  60. </listItemLockup>
  61. </section>
  62. </list>
  63. </compilationTemplate>
  64. </document>
Figure 4-2compilationTemplate example output image: ../Art/compilationTemplateSS_2x.png