Apple TV Docs

Let's add some content to our application.

Note

This article is a section in the Building Your First App walkthrough, so if you skipped here, some parts may be in reference to earlier sections of that. This article will still cover the ins and outs of creating a page and adding TVML content to it.

Adding Content to the Start Screen

Let's add some basic content to our application, in particular, we will use our Start Screen. To navigate into the editor for the start screen, go to Admin Tools > Apple TV Apps > Your App > Start Screen.

Now comes the fun part... Let's take a look at our list of templates to see which one is fitting for a start screen. The Main Template is good for a start screen, and is what this tutorial will use.

Let's begin by adding a simple menu bar.

<document>
    <head>
        <!-- Our document styles -->
        <style>
        </style>
    </head>
    <mainTemplate>
        <menuBar>
          <section>
            <!-- Tab 1 -->
            <menuItem>
              <title>Content</title>
            </menuItem>
            
            <!-- Tab 2 -->    
            <!-- If someone is already logged in, we want to show a Profile button.
             If someone isn't, we want to show a Log In button -->
            {% if CurrentPerson == null %}
            <menuItem>
              <title>Log In</title>
            </menuItem>
            {% else %}
            <menuItem>
              <title>Profile</title>
            </menuItem>
            {% endif %}
          </section>
        </menuBar>
    </mainTemplate>
</document>

Launch the application, and cool! That was pretty easy. You should see an outcome like this:

The Background

That's great and all... But it looks pretty bland. Something neat about the Main Template is the implementation of rotating images as the background, so let's go ahead and add in a background with four photos. This tutorial will use four randomly selected photos using PicSum.

<document>
    <mainTemplate>
        <background>
            <!-- Four random background images -->
            {% webrequest url:'https://picsum.photos/v2/list' parameters:'page^2|limit^4' %}
                {% for item in results %}
            	    <img src="{{ item.download_url }}" />
                {% endfor %}
            {% endwebrequest %}  
        </background>
        <menuBar>
            ...
        </menuBar>
    </mainTemplate>
</document>

Cool! We can also add a tv-transition-interval to our styles to set the duration in seconds that we would like each image to rotate, like such. Two is a pretty short interval for the sake of demonstration.

<document>
    <head>
        <style>
            * {
                tv-transition-interval: 2;
            }
        </style>
    </head>
    <mainTemplate>
        ...
    </mainTemplate>
</document>

The Start Screen

Your TVML should look like this when it's complete:

<document>
    <head>
        <style>
            * {
                tv-transition-interval: 3;
            }
        </style>
    </head>
    <mainTemplate>
        <background>
            <!-- Four random background images -->
            {% webrequest url:'https://picsum.photos/v2/list' parameters:'page^2|limit^4' %}
                {% for item in results %}
            	    <img src="{{ item.download_url }}" />
                {% endfor %}
            {% endwebrequest %}  
        </background>
        <menuBar>
          <section>
            <!-- Tab 1 -->
            <menuItem>
              <title>Content</title>
            </menuItem>
            
             <!-- Tab 2 -->    
            <!-- If someone is already logged in, we want to show a Profile button. If someone isn't, we want to show a Log In button -->
            {% if CurrentPerson == null %}
            <menuItem>
              <title>Log In</title>
            </menuItem>
            {% else %}
            <menuItem>
              <title>Profile</title>
            </menuItem>
            {% endif %}
          </section>
        </menuBar>
    </mainTemplate>
</document>

Which produces an outcome of:

Sweet!

Creating a Page

To start this process, let's create a page by clicking the add button in the bottom right of our application detail.

You should see the screen editor. It looks like this:

Let's break this screen down.

Page Name

The name of the page you are creating/editing.

Description

An optional description of the page.

Page TVML

The TVML content that is rendered on the page.

Cacheability Type

Determines how the object will be treated in cache. There are currently four options:

Public -This item can be cached on the browser or any other shared network cache like a CDN.

Private - This item can only be cached in the browser.

No-Cache -The item will be checked on every load, but if it is deemed to not have changed since the last load it will use a local copy.

No-Store -This item will never be stored by the local browser. This is used for sensitive files like check images.

Adding Content