Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

productBundleTemplate

Use the product bundle template (productBundleTemplate) to display detailed information about a product bundle; for example, a page that describes a television series, including information about the actors, ratings, and series episodes. General information about the product is displayed in the top two-thirds of the screen with a row of related items, such as episodes of the show, directly below. The user can then scroll down and access detailed information about the product, such as critical reviews, actor biographies, and information about any included extras. Figure 14-1 shows the basic layout for a productBundleTemplate page. The default theme for a product bundle template is dark when a background image is specified; otherwise, the product bundle template defaults to the system preference.

Figure 14-1Product bundle template image: ../Art/ATV_temps_productbundle_2x.png

Main Elements of the Product Bundle Template

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

Listing 14-1productBundleTemplate TVML format
  1. <document>
  2. <productBundleTemplate>
  3. <background>
  4. </background>
  5. <banner>
  6. <stack>
  7. <title>…</title>
  8. <row>
  9. </row>
  10. <text>…</text>
  11. <description>…</description>
  12. <row>
  13. <buttonLockup>
  14. </buttonLockup>
  15. </row>
  16. </stack>
  17. <heroImg src="…" />
  18. </banner>
  19. <shelf>
  20. </shelf>
  21. !— Everthing following is under the fold —>
  22. <shelf>
  23. </shelf>
  24. <productInfo>
  25. </productInfo>
  26. </productBundleTemplate>
  27. </document>
Table 14-1productBundleTemplate element descriptions

Element name

Description

background

Images or audio to be presented in the background.

banner

Element containing various elements that provide primary information about the product, such as a TV show title and episode title, description, and buttons for purchasing or previewing.

buttonLockup

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

description

The text that describes the show.

heroImg

An image of the show.

productInfo

Technical information about the product bundle, such as a show’s 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.

text

The text used to describe the surrounding elements.

title

The title describing its containing element.

Product Bundle Template Example

Listing 14-2 shows the TVML for a productBundleTemplate example. Figure 14-2 shows the output for the example when it first appears on the screen. Figure 14-3 shows the output as the user scrolls down the screen.

Listing 14-2productBundleTemplate TVML example
  1. <document>
  2. <productBundleTemplate>
  3. <background>
  4. </background>
  5. <banner>
  6. <stack>
  7. <title>WWDC Road Trip</title>
  8. <row>
  9. <text><badge src="resource://tomato-fresh"/> 99%</text>
  10. <text>1hr 54min</text>
  11. <text>Comedy</text>
  12. <text>2015</text>
  13. <badge src="resource://mpaa-pg" class="badge" />
  14. <badge src="resource://cc" class="badge" />
  15. </row>
  16. <text>Follow the crazy adventures of a determined developer</text>
  17. <description allowsZooming="true" moreLabel="more">The story of an aspiring developer who needs a ticket to WWDC, but can't afford one, so he hires on as a cook at the conference. Follow his trip across the country as he heads to WWDC.</description>
  18. <row>
  19. <buttonLockup>
  20. <badge src="resource://button-preview" />
  21. <title>Preview</title>
  22. </buttonLockup>
  23. <buttonLockup type="buy">
  24. <text>$9.99</text>
  25. <title>Buy</title>
  26. </buttonLockup>
  27. </row>
  28. </stack>
  29. <heroImg src="path to images on your server/Cooking_Show_720x1080.png" />
  30. </banner>
  31. <shelf>
  32. <header>
  33. <title>3 Episodes</title>
  34. </header>
  35. <section>
  36. <lockup>
  37. <img src="path to images on your server/Cooking_Show_250x375_A.png" width="150" height="226" />
  38. <title>Turn</title>
  39. </lockup>
  40. <lockup>
  41. <img src="path to images on your server/Cooking_Show_250x375_B.png" width="150" height="226" />
  42. <title>Road</title>
  43. </lockup>
  44. <lockup>
  45. <img src="path to images on your server/Cooking_Show_250x375_C.png" width="150" height="226" />
  46. <title>Helicopter</title>
  47. </lockup>
  48. </section>
  49. </shelf>
  50. <shelf>
  51. <header>
  52. <title>Reviews and Ratings</title>
  53. </header>
  54. <section>
  55. <ratingCard>
  56. <title>4.1 / 5</title>
  57. <ratingBadge value="0.7"></ratingBadge>
  58. <description>Average of 2,241 iTunes user ratings and reviews.</description>
  59. </ratingCard>
  60. <ratingCard>
  61. <title><badge src="resource://tomato-fresh" /> 99%</title>
  62. <text>Tomatometer</text>
  63. <infoTable>
  64. <info>
  65. <header>
  66. <title>175</title>
  67. </header>
  68. <text>Reviews</text>
  69. </info>
  70. <info>
  71. <header>
  72. <title>173</title>
  73. </header>
  74. <text>Fresh</text>
  75. </info>
  76. <info>
  77. <header>
  78. <title>2</title>
  79. </header>
  80. <text>Rotten</text>
  81. </info>
  82. </infoTable>
  83. </ratingCard>
  84. <reviewCard>
  85. <badge src="resource://tomato-fresh-m" />
  86. <title>WWDC Review</title>
  87. <description>Brief review here</description>
  88. <text>Ravi Patel June, 8 2015</text>
  89. </reviewCard>
  90. </section>
  91. </shelf>
  92. <shelf>
  93. <header>
  94. <title>Cast and Crew</title>
  95. </header>
  96. <section>
  97. <monogramLockup>
  98. <monogram firstName="Anne" lastName="Johnson"/>
  99. <title>Anne Johnson</title>
  100. <subtitle>Actor</subtitle>
  101. </monogramLockup>
  102. <monogramLockup>
  103. <monogram firstName="Tom" lastName="Clark"/>
  104. <title>Tom Clark</title>
  105. <subtitle>Actor</subtitle>
  106. </monogramLockup>
  107. <monogramLockup>
  108. <monogram firstName="Maria" lastName="Ruiz"/>
  109. <title>Maria Ruiz</title>
  110. <subtitle>Actor</subtitle>
  111. </monogramLockup>
  112. </section>
  113. </shelf>
  114. <productInfo>
  115. <infoTable>
  116. <header>
  117. <title>Information</title>
  118. </header>
  119. <info>
  120. <header>
  121. <title>Studio</title>
  122. </header>
  123. <text>Apple</text>
  124. </info>
  125. <info>
  126. <header>
  127. <title>Runtime</title>
  128. </header>
  129. <text>1:54</text>
  130. </info>
  131. <info>
  132. <header>
  133. <title>Format</title>
  134. </header>
  135. <text>Widescreen</text>
  136. </info>
  137. </infoTable>
  138. <infoTable>
  139. <header>
  140. <title>Languages</title>
  141. </header>
  142. <info>
  143. <header>
  144. <title>Primary</title>
  145. </header>
  146. <text>English (Dolby 5.1), Subtitles, CC</text>
  147. </info>
  148. <info>
  149. <header>
  150. <title>Additional</title>
  151. </header>
  152. <text>Cantonese (Subtitles)</text>
  153. </info>
  154. </infoTable>
  155. <infoTable style="tv-line-spacing:10;">
  156. <header>
  157. <title>Accessibility</title>
  158. </header>
  159. <info>
  160. <header>
  161. <textBadge>SDH</textBadge>
  162. </header>
  163. <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>
  164. </info>
  165. </infoTable>
  166. </productInfo>
  167. </productBundleTemplate>
  168. </document>
Figure 14-2productBundleTemplate example output (above the fold) image: ../Art/productBundle_1_2x.png
Figure 14-3productBundleTemplate example output (below the fold) image: ../Art/productBundle_2_2x.png