Guides and Sample Code

Developer

Apple TV Markup Language Reference

On This Page

productTemplate

Use the product template (productTemplate) to display detailed information about a product; for example, a page that describes a movie, including information about the actors, ratings, and like movies. The page displays general information about the product is displayed in the top two-thirds of the screen with a row of related products directly below. The user can scroll down and access detailed information about the product, including critical reviews, actor biographies, and information about any included extras. Figure 15-1 shows the basic layout for a productTemplate page. The default theme for a product template is dark when a background image is specified; otherwise, the product template defaults to the system preference.

Figure 15-1Product template image: ../Art/ATV_temps_product_2x.png

Main Elements of the Product Template

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

Listing 15-1productTemplate TVML format
  1. <productTemplate>
  2. <banner>
  3. <infoList>
  4. </infoList>
  5. <stack>
  6. <title>…</title>
  7. <subtitle>…</subtitle>
  8. <row>
  9. </row>
  10. <description>…</description>
  11. <buttonLockup>
  12. </buttonLockup>
  13. </stack>
  14. <heroImage src="…" />
  15. </banner>
  16. <shelf>
  17. </shelf>
  18. <!—- Everything following is under the fold —->
  19. <shelf>
  20. </shelf>
  21. <productInfo>
  22. </productInfo>
  23. </productTemplate>
Table 15-1productTemplate element descriptions

Element name

Description

banner

Element containing subelements that provide primary information about a product, such as a movie title, description, credits, and purchase information.

buttonLockup

A type of button that can contain an image (the badge element) as well as text.

description

Text that describes the product in detail; for example, a movie synopsis.

heroImg

An image of the product.

infoList

Product information such as actors, directors, and producers.

productInfo

Technical information about the product such as runtime, language availability, and accessibility information.

row

A group of information elements.

shelf

An element containing row elements. Several shelves are used to display information like shows other users have watched and extra features provided by this product.

stack

Basic information about the product, including the title, rating, and a description.

subtitle

Text that provides additional information about its containing element.

title

The title describing its containing element.

Product Template Example

Listing 15-2 shows the TVML for a productTemplate example. Figure 15-2 shows the output for the example when it first appears on screen. Figure 15-3 shows the output below the fold as the user scrolls down the screen.

Listing 15-2productTemplate example TVML
  1. <document>
  2. <productTemplate>
  3. <background>
  4. </background>
  5. <banner>
  6. <infoList>
  7. <info>
  8. <header>
  9. <title>Director</title>
  10. </header>
  11. <text>John Appleseed</text>
  12. </info>
  13. <info>
  14. <header>
  15. <title>Actors</title>
  16. </header>
  17. <text>Anne Johnson</text>
  18. <text>Tom Clark</text>
  19. <text>Maria Ruiz</text>
  20. </info>
  21. </infoList>
  22. <stack>
  23. <title>WWDC Road Trip</title>
  24. <row>
  25. <text><badge src="resource://tomato-fresh"/> 99%</text>
  26. <text>1hr 54min</text>
  27. <text>Comedy</text>
  28. <text>2015</text>
  29. <badge src="resource://mpaa-pg" class="badge" />
  30. <badge src="resource://cc" class="badge" />
  31. </row>
  32. <description allowsZooming="true" moreLabel="more">An aspiring developer gets a ticket to WWDC, but can't afford to fly there. Now he needs to get across country in time for the keynote, and the only person who can help him is his slacker roommate.</description>
  33. <text>Language information can go here</text>
  34. <row>
  35. <buttonLockup>
  36. <badge src="resource://button-preview" />
  37. <title>Preview</title>
  38. </buttonLockup>
  39. <buttonLockup type="buy">
  40. <text>$9.99</text>
  41. <title>Buy</title>
  42. </buttonLockup>
  43. </row>
  44. </stack>
  45. <heroImg src="path to images on your server/Car_Movie_720x1080.png" />
  46. </banner>
  47. <shelf>
  48. <header>
  49. <title>Viewers Also Watched</title>
  50. </header>
  51. <section>
  52. <lockup>
  53. <img src="path to images on your server/Car_Movie_250x375_A.png" width="150" height="226" />
  54. <title>Turn</title>
  55. </lockup>
  56. <lockup>
  57. <img src="path to images on your server/Car_Movie_250x375_B.png" width="150" height="226" />
  58. <title>Road</title>
  59. </lockup>
  60. <lockup>
  61. <img src="path to images on your server/Car_Movie_250x375_C.png" width="150" height="226" />
  62. <title>Helicopter</title>
  63. </lockup>
  64. </section>
  65. </shelf>
  66. <!—- Everything past this is below the fold —->
  67. <shelf>
  68. <header>
  69. <title>Reviews & Ratings</title>
  70. </header>
  71. <section>
  72. <ratingCard>
  73. <title>4.1 / 5</title>
  74. <ratingBadge value="0.7"></ratingBadge>
  75. <description>Average of 2,241 iTunes user ratings and reviews.</description>
  76. </ratingCard>
  77. <ratingCard>
  78. <title><badge src="resource://tomato-fresh" /> 99%</title>
  79. <text>Tomatometer</text>
  80. <infoTable>
  81. <info>
  82. <header>
  83. <title>175</title>
  84. </header>
  85. <text>Reviews</text>
  86. </info>
  87. <info>
  88. <header>
  89. <title>173</title>
  90. </header>
  91. <text>Fresh</text>
  92. </info>
  93. <info>
  94. <header>
  95. <title>2</title>
  96. </header>
  97. <text>Rotten</text>
  98. </info>
  99. </infoTable>
  100. </ratingCard>
  101. <reviewCard>
  102. <badge src="resource://tomato-fresh-m" />
  103. <title>WWDC Review</title>
  104. <description>Brief review here</description>
  105. <text>Ravi Patel June, 8 2015</text>
  106. </reviewCard>
  107. </section>
  108. </shelf>
  109. <shelf>
  110. <header>
  111. <title>Cast and Crew</title>
  112. </header>
  113. <section>
  114. <monogramLockup>
  115. <monogram firstName="Anne" lastName="Johnson"/>
  116. <title>Anne Johnson</title>
  117. <subtitle>Actor</subtitle>
  118. </monogramLockup>
  119. <monogramLockup>
  120. <monogram firstName="Tom" lastName="Clark"/>
  121. <title>Tom Clark</title>
  122. <subtitle>Actor</subtitle>
  123. </monogramLockup>
  124. <monogramLockup>
  125. <monogram firstName="Maria" lastName="Ruiz"/>
  126. <title>Maria Ruiz</title>
  127. <subtitle>Actor</subtitle>
  128. </monogramLockup>
  129. </section>
  130. </shelf>
  131. <productInfo>
  132. <infoTable>
  133. <header>
  134. <title>Information</title>
  135. </header>
  136. <info>
  137. <header>
  138. <title>Studio</title>
  139. </header>
  140. <text>Apple</text>
  141. </info>
  142. <info>
  143. <header>
  144. <title>Runtime</title>
  145. </header>
  146. <text>1:54</text>
  147. </info>
  148. <info>
  149. <header>
  150. <title>Format</title>
  151. </header>
  152. <text>Widescreen</text>
  153. </info>
  154. </infoTable>
  155. <infoTable>
  156. <header>
  157. <title>Languages</title>
  158. </header>
  159. <info>
  160. <header>
  161. <title>Primary</title>
  162. </header>
  163. <text>English (Dolby 5.1), Subtitles, CC</text>
  164. </info>
  165. <info>
  166. <header>
  167. <title>Additional</title>
  168. </header>
  169. <text>Cantonese (Subtitles)</text>
  170. </info>
  171. </infoTable>
  172. <infoTable style="tv-line-spacing:10;">
  173. <header>
  174. <title>Accessibility</title>
  175. </header>
  176. <info>
  177. <header>
  178. <textBadge>SDH</textBadge>
  179. </header>
  180. <text>Subtitles for the deaf and Hard of Hearing (SDH) refer to subtitles in the original lanuage with the addition of relevant non-dialog information.</text>
  181. </info>
  182. </infoTable>
  183. </productInfo>
  184. </productTemplate>
  185. </document>
Figure 15-2productTemplate example output (above the fold) image: ../Art/productTemplate_1_2x.png
Figure 15-3productTemplate example output (below the fold) image: ../Art/productTemplate_2_2x.png