{"id":1951,"date":"2015-09-10T19:42:12","date_gmt":"2015-09-11T01:42:12","guid":{"rendered":"http:\/\/jamesonquave.com\/blog\/?p=1951"},"modified":"2015-09-24T16:31:37","modified_gmt":"2015-09-24T22:31:37","slug":"developing-tvos-apps-for-apple-tv-part-2","status":"publish","type":"post","link":"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/","title":{"rendered":"Developing tvOS Apps for Apple TV [Part 2]"},"content":{"rendered":"

Looking for some help building your Apple TV tvOS App? I’m available for consulting and development, contact me<\/a>.<\/strong><\/p>\n<\/head>\n

This is part 2 of the tvOS tutorial. If you haven’t gone through part 1<\/a> yet, I suggest you run through that first.<\/p>\n

Adding Interactivity<\/h2>\n

In the first section we created a simple TVML document with a few buttons. It looked something like this:<\/p>\n

<document><\/code><\/div>
    <\/code><alertTemplate><\/code><\/div>
        <\/code><title><\/code>Hello<\/code> tvOS!<\/title><\/code><\/div>
        <\/code><button><\/code><\/div>
            <\/code><text>A <\/code>Button<\/code><\/text><\/code><\/div>
        <\/code><\/button><\/code><\/div>
        <\/code><button><\/code><\/div>
            <\/code><text>A <\/code>Second<\/code> Button<\/code><\/text><\/code><\/div>
        <\/code><\/button><\/code><\/div>
    <\/code><\/alertTemplate><\/code><\/div>
<\/document><\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
This is an alert with a few buttons, and they don’t do anything. It’s also rather specific and hard-coded, so maybe what would be better is to generate the XML on the fly. We can do this fairly easily in JS. Let’s add a new function to our main.js file that will encapsulate this alert in to a simpler alert with just an OK button.<\/p>\n
function alert(str) {<\/code><\/div>
  <\/code>var<\/code> alertXMLString = `<?xml version=<\/code>\"1.0\"<\/code> encoding=<\/code>\"UTF-8\"<\/code> ?><\/code><\/div>
  <\/code><document><\/code><\/div>
    <\/code><alertTemplate><\/code><\/div>
      <\/code><title><\/code>Hey<\/code> Listen<\/code>!<\/title><\/code><\/div>
      <\/code><description>${str}<\/description><\/code><\/div>
      <\/code><button><\/code><\/div>
        <\/code><text><\/code>OK<\/code><\/text><\/code><\/div>
      <\/code><\/button><\/code><\/div>
    <\/code><\/alertTemplate><\/code><\/div>
  <\/code><\/document>`<\/code><\/div>
  <\/code>var<\/code> parser = <\/code>new<\/code> DOMParser<\/code>();<\/code><\/div>
  <\/code>var<\/code> alertDOMElement = parser.parseFromString(alertXMLString, <\/code>\"application\/xml\"<\/code>);<\/code><\/div>
  <\/code>navigationDocument.presentModal(alertDOMElement);<\/code><\/div>
}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
What we’re doing here is creating a string called alertXMLString<\/code> that contains the TVML contents of a simple alert template with just 1 button. However for the description we’re using the TVJS string concatenation ${variable}<\/code> to inject the value of str<\/code>.<\/p>\n
Next, we create a new DOMParser object that converts this string in to an actual XML DOM element.<\/p>\n
Finally, we can present the DOM element modally using the presentModal method of the navigationDocument, a globally defined variable that will always contain the root navigation document.<\/p>\n
Now, in our onLaunch function, let’s remove the code we had from before and simply call an alert…<\/p>\n
App<\/code>.onLaunch = function(options) {<\/code><\/div>
    <\/code>alert(<\/code>\"Hello!\"<\/code>);<\/code><\/div>
}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
\"tvOS<\/p>\n
Run the app and you’ll see a cool tvOS alert saying “Hello!” However, clicking OK does nothing. So how do we handle event’s such as touch?<\/p>\n
Basically, if you want to stay in JavaScript and TVML, you will want to add an event listener to the DOM element. So for example, we could add a second argument to the alert function, so that we can pass in a function that is called when the OK button sends the event for being “selected”. We’ll add this argument and call it doneCallback<\/code>. To add the event listener, we can simply do so like this:<\/p>\n
alertDOMElement.addEventListener(<\/code>\"select\"<\/code>, function() { doneCallback }, <\/code>false<\/code>);<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
So after updating the entire function, it should look like this:<\/p>\n
function alert(str, doneCallback) {<\/code><\/div>
  <\/code>var<\/code> alertXMLString = `<?xml version=<\/code>\"1.0\"<\/code> encoding=<\/code>\"UTF-8\"<\/code> ?><\/code><\/div>
  <\/code><document><\/code><\/div>
    <\/code><alertTemplate><\/code><\/div>
      <\/code><title><\/code>Hey<\/code> Listen<\/code>!<\/title><\/code><\/div>
      <\/code><description>${str}<\/description><\/code><\/div>
      <\/code><button><\/code><\/div>
        <\/code><text><\/code>OK<\/code><\/text><\/code><\/div>
      <\/code><\/button><\/code><\/div>
    <\/code><\/alertTemplate><\/code><\/div>
  <\/code><\/document>`<\/code><\/div>
  <\/code>var<\/code> parser = <\/code>new<\/code> DOMParser<\/code>();<\/code><\/div>
  <\/code>var<\/code> alertDOMElement = parser.parseFromString(alertXMLString, <\/code>\"application\/xml\"<\/code>);<\/code><\/div>
  <\/code>alertDOMElement.addEventListener(<\/code>\"select\"<\/code>, doneCallback, <\/code>false<\/code>);<\/code><\/div>
  <\/code>navigationDocument.presentModal(alertDOMElement);<\/code><\/div>
}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
Now, we can modify our original onLaunch function to add a callback function that will present a TVML screen. Before we do that, let’s also add a function called getDocumentContents<\/code> which similarly implements a callback function when loading is done, which passes in the XMLHttpRequest object’s response to the callbacks only argument. This allows us to more easily load in various types of TVML files.<\/p>\n
function getDocumentContents(url, loadCallback) {<\/code><\/div>
  <\/code>var<\/code> templateXHR = <\/code>new<\/code> XMLHttpRequest<\/code>();<\/code><\/div>
  <\/code>templateXHR.responseType = <\/code>\"document\"<\/code>;<\/code><\/div>
  <\/code>templateXHR.addEventListener(<\/code>\"load\"<\/code>, function() { loadCallback(templateXHR) }, <\/code>false<\/code>);<\/code><\/div>
  <\/code>templateXHR.open(<\/code>\"GET\"<\/code>, url, <\/code>true<\/code>);<\/code><\/div>
  <\/code>templateXHR.send();<\/code><\/div>
  <\/code>return<\/code> templateXHR;<\/code><\/div>
}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
This is nearly the same code as the getDocument method we defined earlier, except this is asynchronous and does not actually push anything on to the view.<\/p>\n
Now, with this function we can perform this call and then do a screen replace of the alert when the OK button is clicked.<\/p>\n
App<\/code>.onLaunch = function(options) {<\/code><\/div>
    <\/code>alert(<\/code>\"Hello!\"<\/code>, function() {<\/code><\/div>
      <\/code>var<\/code> helloDocument = getDocumentContents(<\/code>\"http:\/\/localhost:8000\/hello.tvml<\/a>\"<\/code>, function(xhr) {<\/code><\/div>
        <\/code>navigationDocument.dismissModal();<\/code><\/div>
        <\/code>navigationDocument.pushDocument(xhr.responseXML);<\/code><\/div>
      <\/code>});<\/code><\/div>
    <\/code>});<\/code><\/div>
}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
Let’s also change our hello.tvml file to use the stackTemplate, since it’s more interesting to look at. A stackTemplate is a nice way to lay out a list of content with title’s and images. Here’s the example I’ll be using in my demo:<\/p>\n
<document><\/code><\/div>
    <\/code><stackTemplate><\/code><\/div>
        <\/code><banner><\/code><\/div>
            <\/code><title><\/code>Which<\/code> Artist<\/code> Do<\/code> You<\/code> Prefer<\/code>?<\/title><\/code><\/div>
        <\/code><\/banner><\/code><\/div>
        <\/code><collectionList><\/code><\/div>
            <\/code><shelf><\/code><\/div>
                <\/code><section><\/code><\/div>
                    <\/code><lockup><\/code><\/div>
                        <\/code><img src=<\/code>\"http:\/\/localhost:8000\/nina.png<\/a>\"<\/code> width=<\/code>\"256\"<\/code> height=<\/code>\"256\"<\/code> \/><\/code><\/div>
                        <\/code><title><\/code>Nina<\/code> Simone<\/code><\/title><\/code><\/div>
                    <\/code><\/lockup><\/code><\/div>
                    <\/code><lockup><\/code><\/div>
                        <\/code><img src=<\/code>\"http:\/\/localhost:8000\/coltrane.png<\/a>\"<\/code> width=<\/code>\"256\"<\/code> height=<\/code>\"256\"<\/code> \/><\/code><\/div>
                        <\/code><title><\/code>John<\/code> Coltrane<\/code><\/title><\/code><\/div>
                    <\/code><\/lockup><\/code><\/div>
                <\/code><\/section><\/code><\/div>
            <\/code><\/shelf><\/code><\/div>
        <\/code><\/collectionList><\/code><\/div>
    <\/code><\/stackTemplate><\/code><\/div>
<\/document><\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
So basically this is just the way a stackTemplate is laid out, the banner is the top banner, the collectionList is just something that contains many shelf objects, which is just something that contains section objects, which contains lockup objects. The lockup object is what actually contains our image and title. In my case I added some images to work with to my directory called nina.png and coltrane.png<\/p>\n
\"tvOS<\/p>\n","protected":false},"excerpt":{"rendered":"
Looking for some help building your Apple TV tvOS App? I’m available for consulting and development, contact me. This is part 2 of the tvOS tutorial. If you haven’t gone through part 1 yet, I suggest you run through that first. Adding Interactivity In the first section we created a simple TVML document with a…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_links_to":"","_links_to_target":""},"categories":[75,10,71,74],"tags":[34,33,78,76],"yoast_head":"\nDeveloping tvOS Apps for Apple TV [Part 2] - Jameson Quave<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Developing tvOS Apps for Apple TV [Part 2] - Jameson Quave\" \/>\n<meta property=\"og:description\" content=\"Looking for some help building your Apple TV tvOS App? I’m available for consulting and development, contact me. This is part 2 of the tvOS tutorial. If you haven’t gone through part 1 yet, I suggest you run through that first. Adding Interactivity In the first section we created a simple TVML document with a...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Jameson Quave\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-11T01:42:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-24T22:31:37+00:00\" \/>\n<meta name=\"author\" content=\"Jameson Quave\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jameson Quave\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/\",\"url\":\"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/\",\"name\":\"Developing tvOS Apps for Apple TV [Part 2] - Jameson Quave\",\"isPartOf\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/#website\"},\"datePublished\":\"2015-09-11T01:42:12+00:00\",\"dateModified\":\"2015-09-24T22:31:37+00:00\",\"author\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc\"},\"breadcrumb\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jamesonquave.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developing tvOS Apps for Apple TV [Part 2]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#website\",\"url\":\"https:\/\/jamesonquave.com\/blog\/\",\"name\":\"Jameson Quave\",\"description\":\"Using computer technology to educate, and improve lives.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jamesonquave.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc\",\"name\":\"Jameson Quave\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg\",\"caption\":\"Jameson Quave\"},\"sameAs\":[\"http:\/\/jamesonquave.com\"],\"url\":\"https:\/\/jamesonquave.com\/blog\/author\/jquave\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Developing tvOS Apps for Apple TV [Part 2] - Jameson Quave","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/","og_locale":"en_US","og_type":"article","og_title":"Developing tvOS Apps for Apple TV [Part 2] - Jameson Quave","og_description":"Looking for some help building your Apple TV tvOS App? I’m available for consulting and development, contact me. This is part 2 of the tvOS tutorial. If you haven’t gone through part 1 yet, I suggest you run through that first. Adding Interactivity In the first section we created a simple TVML document with a...","og_url":"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/","og_site_name":"Jameson Quave","article_published_time":"2015-09-11T01:42:12+00:00","article_modified_time":"2015-09-24T22:31:37+00:00","author":"Jameson Quave","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jameson Quave","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/","url":"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/","name":"Developing tvOS Apps for Apple TV [Part 2] - Jameson Quave","isPartOf":{"@id":"https:\/\/jamesonquave.com\/blog\/#website"},"datePublished":"2015-09-11T01:42:12+00:00","dateModified":"2015-09-24T22:31:37+00:00","author":{"@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc"},"breadcrumb":{"@id":"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jamesonquave.com\/blog\/developing-tvos-apps-for-apple-tv-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jamesonquave.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Developing tvOS Apps for Apple TV [Part 2]"}]},{"@type":"WebSite","@id":"https:\/\/jamesonquave.com\/blog\/#website","url":"https:\/\/jamesonquave.com\/blog\/","name":"Jameson Quave","description":"Using computer technology to educate, and improve lives.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jamesonquave.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc","name":"Jameson Quave","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg","caption":"Jameson Quave"},"sameAs":["http:\/\/jamesonquave.com"],"url":"https:\/\/jamesonquave.com\/blog\/author\/jquave\/"}]}},"_links":{"self":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/1951"}],"collection":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/comments?post=1951"}],"version-history":[{"count":3,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/1951\/revisions"}],"predecessor-version":[{"id":1967,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/1951\/revisions\/1967"}],"wp:attachment":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/media?parent=1951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/categories?post=1951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/tags?post=1951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}