Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

oneupTemplate

Use the oneup template (oneupTemplate) to display a single, full-screen image. Users can navigate left or right on the remote to select another image. Activating an up action on the remote will shrink the image and allow a description to be displayed. Figure 12-2 shows the basic layout for a oneupTemplate page. The default theme for a oneup template is dark.

Figure 12-1Oneup template image: ../Art/ATV_temps_oneup_2x.png

Main Elements of the Oneup Template

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

Listing 12-1oneupTemplate TVML format
  1. <oneupTemplate>
  2. <section>
  3. <lockup>
  4. <img />
  5. <title>…</title>
  6. <row>
  7. </row>
  8. </lockup>
  9. <lockup>
  10. </lockup>
  11. </section>
  12. </oneupTemplate>

Table 12-1oneupTemplate element descriptions

Element name

Description

img

The image to be displayed on screen.

lockup

A single image and related text.

row

Subtitle information relating to the selected image.

section

Multiple lockup elements, each of which contains an item to be displayed.

title

The title to be displayed when a user selects an image.

Oneup Template Example

Listing 12-2 shows the TVML for a oneupTemplate example. The example shows a full screen image, with information about the image displayed along the bottom of the screen when the user zooms into the image. Figure 12-2 shows the output for the example.

Listing 12-2oneupTemplate example TVML
  1. <document>
  2. <oneupTemplate mode="oneup caption" allowsZooming="true">
  3. <section>
  4. <lockup>
  5. <img src="path to images on your server/Car_Movie_1920x1080.png" />
  6. <title>WWDC Roadtrip</title>
  7. <row>
  8. <subtitle>San Francisco</subtitle>
  9. <subtitle>June 8, 2015</subtitle>
  10. </row>
  11. </lockup>
  12. <lockup>
  13. <img src="path to images on your server/Beach_Movie_1920x1080.png" />
  14. <title>Beach time</title>
  15. <row>
  16. <subtitle>Santa Cruz</subtitle>
  17. <subtitle>May 1, 2015</subtitle>
  18. </row>
  19. </lockup>
  20. <lockup>
  21. <img src="path to images on your server/Space_Movie_1920x1080.png" />
  22. <title>Spaced out</title>
  23. <row>
  24. <subtitle>Space station</subtitle>
  25. <subtitle>July 15, 2015</subtitle>
  26. </row>
  27. </lockup>
  28. </section>
  29. </oneupTemplate>
  30. </document>
Figure 12-2oneupTemplate example output image: ../Art/oneupTemplateSS_2x.png