app development using tvmlkit - apple inc. · building an app with tvmlkit xcode tvml and styles...
TRANSCRIPT
![Page 1: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/1.jpg)
© 2016 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
Part 1
App Frameworks #WWDC16
Session 212
App Development Using TVMLKit
Nurinder Manj tvOS Engineer
![Page 2: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/2.jpg)
Agenda
What is TVMLKit?
![Page 3: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/3.jpg)
Agenda
What is TVMLKit?Building an app with TVMLKit
![Page 4: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/4.jpg)
Agenda
What is TVMLKit?Building an app with TVMLKitNew features
![Page 5: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/5.jpg)
![Page 6: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/6.jpg)
![Page 7: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/7.jpg)
![Page 8: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/8.jpg)
![Page 9: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/9.jpg)
TVMLKit
![Page 10: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/10.jpg)
TVMLKit
![Page 11: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/11.jpg)
What is TVMLKit?
Native experience
![Page 12: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/12.jpg)
What is TVMLKit?
Native experienceXML and JavaScript
![Page 13: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/13.jpg)
What is TVMLKit?
Native experienceXML and JavaScriptConfigurable
![Page 14: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/14.jpg)
What is TVMLKit?
Native experienceXML and JavaScript ConfigurableExtensible
![Page 15: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/15.jpg)
What is TVMLKit?
Native experienceXML and JavaScriptConfigurableExtensibleNot a web browser
![Page 16: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/16.jpg)
Building an App With TVMLKit
![Page 17: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/17.jpg)
Building an App With TVMLKit
Xcode
![Page 18: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/18.jpg)
Building an App With TVMLKit
XcodeTVML and Styles
![Page 19: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/19.jpg)
Building an App With TVMLKit
XcodeTVML and StylesTVMLKit JS
![Page 20: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/20.jpg)
Application Architecture
TVMLKit
![Page 21: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/21.jpg)
Application Architecture
TVMLKitTVMLKit JS
Storage
DOM
XMLHttpRequest App
Settings
NavigationDocument
Player
Playlist
MediaItem
![Page 22: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/22.jpg)
Application Architecture
TVMLKitTVMLKit JS
Storage
DOM
XMLHttpRequest App
Settings
NavigationDocument
Player
Playlist
MediaItem
![Page 23: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/23.jpg)
Xcode windowTVML Application Template
![Page 24: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/24.jpg)
// Bootstrapping TVMLKit App
class AppDelegate: ..., TVApplicationControllerDelegate {
...
static let tvBaseURL = "http://localhost:9001/"
static let tvBootURL = "\(AppDelegate.tvBaseURL)/application.js"
func application(..., didFinishLaunchingWithOptions launchOptions: ...) -> Bool {
...
let appControllerContext = TVApplicationControllerContext()
if let javaScriptURL = NSURL(string: AppDelegate.tvBootURL) {
appControllerContext.javaScriptApplicationURL = javaScriptURL
}
...
appController = TVApplicationController(context: appControllerContext, window: window,
delegate: self)
...
return true
}
}
![Page 25: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/25.jpg)
// Bootstrapping TVMLKit App
class AppDelegate: ..., TVApplicationControllerDelegate {
...
static let tvBaseURL = "http://localhost:9001/"
static let tvBootURL = "\(AppDelegate.tvBaseURL)/application.js"
func application(..., didFinishLaunchingWithOptions launchOptions: ...) -> Bool {
...
let appControllerContext = TVApplicationControllerContext()
if let javaScriptURL = NSURL(string: AppDelegate.tvBootURL) {
appControllerContext.javaScriptApplicationURL = javaScriptURL
}
...
appController = TVApplicationController(context: appControllerContext, window: window,
delegate: self)
...
return true
}
}
![Page 26: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/26.jpg)
// Bootstrapping TVMLKit App
class AppDelegate: ..., TVApplicationControllerDelegate {
...
static let tvBaseURL = "http://localhost:9001/"
static let tvBootURL = "\(AppDelegate.tvBaseURL)/application.js"
func application(..., didFinishLaunchingWithOptions launchOptions: ...) -> Bool {
...
let appControllerContext = TVApplicationControllerContext()
if let javaScriptURL = NSURL(string: AppDelegate.tvBootURL) {
appControllerContext.javaScriptApplicationURL = javaScriptURL
}
...
appController = TVApplicationController(context: appControllerContext, window: window,
delegate: self)
...
return true
}
}
![Page 27: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/27.jpg)
// Bootstrapping TVMLKit App
class AppDelegate: ..., TVApplicationControllerDelegate {
...
static let tvBaseURL = "http://localhost:9001/"
static let tvBootURL = "\(AppDelegate.tvBaseURL)/application.js"
func application(..., didFinishLaunchingWithOptions launchOptions: ...) -> Bool {
...
let appControllerContext = TVApplicationControllerContext()
if let javaScriptURL = NSURL(string: AppDelegate.tvBootURL) {
appControllerContext.javaScriptApplicationURL = javaScriptURL
}
...
appController = TVApplicationController(context: appControllerContext, window: window,
delegate: self)
...
return true
}
}
![Page 28: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/28.jpg)
TVML and Styles
![Page 29: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/29.jpg)
TVML and Styles
Markup to define template
![Page 30: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/30.jpg)
TVML and Styles
Markup to define templateTemplates have default style
![Page 31: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/31.jpg)
TVML and Styles
Markup to define templateTemplates have default styleCustomize appearance with styles
![Page 32: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/32.jpg)
// Document XML Structure
<?xml version="1.0" encoding="UTF-8" ?>
<document>
<head>
<style>
<!-- custom styles -->
</style>
</head>
<templateName>
<!-- template content -->
</templateName>
</document>
![Page 33: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/33.jpg)
// Document XML Structure
<?xml version="1.0" encoding="UTF-8" ?>
<document>
<head>
<style>
<!-- custom styles -->
</style>
</head>
<templateName>
<!-- template content -->
</templateName>
</document>
![Page 34: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/34.jpg)
// Document XML Structure
<?xml version="1.0" encoding="UTF-8" ?>
<document>
<head>
<style>
<!-- custom styles -->
</style>
</head>
<templateName>
<!-- template content -->
</templateName>
</document>
![Page 35: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/35.jpg)
![Page 36: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/36.jpg)
<stackTemplate>
<collectionList>
<carousel>...</carousel>
<shelf>...</shelf>
...
</collectionList>
</stackTemplate>
![Page 37: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/37.jpg)
![Page 38: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/38.jpg)
<carousel>
<section>
<lockup><img ... /></lockup>
...
</section>
</carousel>
![Page 39: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/39.jpg)
<shelf>
<header>...</header>
<section>
<lockup>...</lockup>
...
</section>
</shelf>
![Page 40: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/40.jpg)
<lockup>
<img ... />
<title>
...
</title>
</lockup>
<lockup>
<img ... />
</lockup>
![Page 41: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/41.jpg)
![Page 42: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/42.jpg)
// Configure text elements
<document>
<head>
<style>
.lockupTitle {
tv-text-highlight-style: marquee-and-show-on-highlight;
}
</style>
</head>
<stackTemplate>
...
<lockup>
<img src="..." width="..." height="..." />
<title class="lockupTitle">...</title>
...
</lockup>
...
</stackTemplate>
</document>
![Page 43: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/43.jpg)
![Page 44: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/44.jpg)
![Page 45: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/45.jpg)
![Page 46: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/46.jpg)
![Page 47: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/47.jpg)
TVMLKit JS
![Page 48: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/48.jpg)
TVMLKit JS
XMLHttpRequest
DOM
Storage
![Page 49: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/49.jpg)
TVMLKit JS
XMLHttpRequest
DOM
Storage
App
Restrictions
Settings
NavigationDocument
MenuBarDocument
Keyboard
Slideshow
Device
![Page 50: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/50.jpg)
TVMLKit JS
XMLHttpRequest
DOM
Storage
App
Restrictions
Settings
NavigationDocument
MenuBarDocument
Player
Playlist
MediaItem
Keyboard
Slideshow
Device
![Page 51: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/51.jpg)
App lifecycleTVMLKit JS
When TVApplicationController is initialized
App.onLaunch = function(options) {
var locationStr = options['location'];
...
};
![Page 52: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/52.jpg)
App error handlerTVMLKit JS
Capture uncaught exceptions
App.onError = function(message, sourceURL, line) {
console.error("Uncaught Exception!", message, sourceURL, line);
};
![Page 53: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/53.jpg)
NavigationDocumentTVMLKit JS
Manage document hierarchyGlobal instanceDismiss handled by framework
![Page 54: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/54.jpg)
NavigationDocumentTVMLKit JS
Manage document hierarchyGlobal instanceDismiss handled by framework
navigationDocument.pushDocument(document)
navigationDocument.replaceDocument(document, oldDocument)
navigationDocument.presentModal(document)
![Page 55: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/55.jpg)
// Presenting documents
let loadingMarkup = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<loadingTemplate>
<activityIndicator>
<text>Loading ...</text>
</activityIndicator>
</loadingTemplate>
</document>`;
let loadingDocument = new DOMParser().parseFromString(loadingMarkup, ‘application/xml');
navigationDocument.pushDocument(loadingDocument);
// Later ...
let stackDocument = createStackDocument(...);
navigationDocument.replaceDocument(stackDocument, loadingDocument);
48
![Page 56: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/56.jpg)
// Presenting documents
let loadingMarkup = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<loadingTemplate>
<activityIndicator>
<text>Loading ...</text>
</activityIndicator>
</loadingTemplate>
</document>`;
let loadingDocument = new DOMParser().parseFromString(loadingMarkup, ‘application/xml');
navigationDocument.pushDocument(loadingDocument);
// Later ...
let stackDocument = createStackDocument(...);
navigationDocument.replaceDocument(stackDocument, loadingDocument);
49
![Page 57: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/57.jpg)
// Presenting documents
let loadingMarkup = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<loadingTemplate>
<activityIndicator>
<text>Loading ...</text>
</activityIndicator>
</loadingTemplate>
</document>`;
let loadingDocument = new DOMParser().parseFromString(loadingMarkup, ‘application/xml');
navigationDocument.pushDocument(loadingDocument);
// Later ...
let stackDocument = createStackDocument(...);
navigationDocument.replaceDocument(stackDocument, loadingDocument);
50
![Page 58: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/58.jpg)
NavigationDocumentTVMLKit JS
Manage document hierarchyGlobal instanceDismiss handled by framework
navigationDocument.pushDocument(document)
navigationDocument.replaceDocument(document, oldDocument)
navigationDocument.presentModal(document)
![Page 59: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/59.jpg)
Media Playback
![Page 60: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/60.jpg)
// Setting up a TVMLKit JS Video Player
var video = new MediaItem('video', 'https://example.com/video.m3u8');
video.title = 'My Great Movie';
video.description = 'An extensive description…';
video.resumeTime = 10.0; // seconds
var playlist = new Playlist();
playlist.push(video);
var player = new Player();
player.playlist = playlist;
player.play(); // Present the player
![Page 61: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/61.jpg)
// Setting up a TVMLKit JS Video Player
var video = new MediaItem('video', 'https://example.com/video.m3u8');
video.title = 'My Great Movie';
video.description = 'An extensive description…';
video.resumeTime = 10.0; // seconds
var playlist = new Playlist();
playlist.push(video);
var player = new Player();
player.playlist = playlist;
player.play(); // Present the player
![Page 62: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/62.jpg)
// Setting up a TVMLKit JS Video Player
var video = new MediaItem('video', 'https://example.com/video.m3u8');
video.title = 'My Great Movie';
video.description = 'An extensive description…';
video.resumeTime = 10.0; // seconds
var playlist = new Playlist();
playlist.push(video);
var player = new Player();
player.playlist = playlist;
player.play(); // Present the player
![Page 63: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/63.jpg)
// Setting up a TVMLKit JS Video Player
var video = new MediaItem('video', 'https://example.com/video.m3u8');
video.title = 'My Great Movie';
video.description = 'An extensive description…';
video.resumeTime = 10.0; // seconds
var playlist = new Playlist();
playlist.push(video);
var player = new Player();
player.playlist = playlist;
player.play(); // Present the player
![Page 64: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/64.jpg)
![Page 65: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/65.jpg)
// Setting up a TVML JS Audio Player
var audio = new MediaItem('audio', 'https://example.com/audio.mp3');
audio.title = 'My Great Song';
audio.artworkImageURL = 'https://example.com/audio-artwork.jpg';
var playlist = new Playlist();
playlist.push(audio);
var player = new Player();
player.playlist = playlist;
player.play(); // Present the player
![Page 66: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/66.jpg)
![Page 67: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/67.jpg)
Background audio app playbackAVFoundation
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { // ... let audioSession = AVAudioSession.sharedInstance() let success = try? audioSession.setCategory(AVAudioSessionCategoryPlayback) // ... }
![Page 68: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/68.jpg)
DemoBuilding TVMLKit application
Jeff Tan-Ang tvOS Design Engineer
![Page 69: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/69.jpg)
Recap
Setup project using Xcode
![Page 70: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/70.jpg)
Recap
Setup project using XcodeConstruct and manage documents
![Page 71: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/71.jpg)
Recap
Setup project using XcodeConstruct and manage documentsHandle events
![Page 72: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/72.jpg)
Recap
Setup project using XcodeConstruct and manage documentsHandle eventsPlayback videos
![Page 73: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/73.jpg)
New Features
Parry Panesar tvOS Engineer
![Page 74: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/74.jpg)
TVMLKitSlideshow Interactive Video Overlays
ECMAScript 6
New Player API’s
Multi-row Shelf
Web Inspector Enhancements
New Lockups
Audio Now Playing
Embedded Video
Custom Collection Cells
Image PlaceholdersAnimatable DOM Updates
New Styles and Attributes
Light and Dark Appearance
![Page 75: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/75.jpg)
TVMLKitSlideshow Interactive Video Overlays
ECMAScript 6
New Player API’s
Multi-row Shelf
Web Inspector Enhancements
New Lockups
Audio Now Playing
Embedded Video
Custom Collection Cells
Image PlaceholdersAnimatable DOM Updates
New Styles and Attributes
Light and Dark Appearance
![Page 76: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/76.jpg)
![Page 77: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/77.jpg)
![Page 78: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/78.jpg)
TVMLKitSlideshow Interactive Video Overlays
ECMAScript 6
New Player API’s
Multi-row Shelf
Web Inspector Enhancements
New Lockups
Audio Now Playing
Embedded Video
Custom Collection Cells
Image PlaceholdersAnimatable DOM Updates
New Styles and Attributes
Light and Dark Appearance
![Page 79: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/79.jpg)
![Page 80: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/80.jpg)
TVMLKitSlideshow Interactive Video Overlays
ECMAScript 6
New Player API’s
Multi-row Shelf
Web Inspector Enhancements
New Lockups
Audio Now Playing
Embedded Video
Custom Collection Cells
Image PlaceholdersAnimatable DOM Updates
New Styles and Attributes
Light and Dark Appearance
![Page 81: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/81.jpg)
TVMLKitSlideshow Interactive Video Overlays
ECMAScript 6
New Player API’s
Multi-row Shelf
Web Inspector Enhancements
New Lockups
Audio Now Playing
Embedded Video
Custom Collection Cells
Image PlaceholdersAnimatable DOM Updates
New Styles and Attributes
Light and Dark Appearance
![Page 82: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/82.jpg)
Light / Dark NEW
![Page 83: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/83.jpg)
Light / Dark NEW
![Page 84: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/84.jpg)
// tv-theme media query property
<document>
<head>
<style>
.foo { color: rgb(0, 0, 0); }
</style>
</head>
<templateName>
...
<title class="foo">text</title>
...
</templateName>
</document>
![Page 85: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/85.jpg)
// tv-theme media query feature
<document>
<head>
<style>
@media tv-template and (tv-theme:light) {
.foo { color: rgb(0, 0, 0); }
}
@media tv-template and (tv-theme:dark) {
.foo { color: rgb(255, 255, 255); }
}
</style>
</head>
<templateName>
...
<title class="foo">text</title>
...
</templateName>
</document>
![Page 86: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/86.jpg)
Embedded Video Playback
![Page 87: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/87.jpg)
![Page 88: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/88.jpg)
![Page 89: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/89.jpg)
NEWEmbedded Video Playback
Playback context inside templates
![Page 90: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/90.jpg)
NEWEmbedded Video Playback
Playback context inside templatesPlays on focus, or always
![Page 91: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/91.jpg)
NEWEmbedded Video Playback
Playback context inside templatesPlays on focus, or alwaysTransitions to full screen
![Page 92: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/92.jpg)
NEWEmbedded Video Playback
Playback context inside templatesPlays on focus, or alwaysTransitions to full screenSupports all player functionality
![Page 93: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/93.jpg)
NEW
Steps to configureEmbedded Video Playback
Configure template
![Page 94: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/94.jpg)
NEW
Steps to configureEmbedded Video Playback
Configure templateConfigure player
![Page 95: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/95.jpg)
NEW
Steps to configureEmbedded Video Playback
Configure templateConfigure playerTransition to fullscreen
![Page 96: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/96.jpg)
NEW
Configure templateEmbedded Video Playback
Wrap <img> with <mediaContent>
![Page 97: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/97.jpg)
NEW
Configure templateEmbedded Video Playback
Wrap <img> with <mediaContent>Configure playback mode
![Page 98: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/98.jpg)
NEW
Configure templateEmbedded Video Playback
Wrap <img> with <mediaContent>Configure playback mode
<lockup> <mediaContent playbackMode="onFocus">
<img src="http://host/image.jpg" width="548" height="308"/>
</mediaContent>
<lockup>
![Page 99: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/99.jpg)
Configure templateEmbedded Video Playback
Wrap <img> with <mediaContent>Configure playback mode
NEW
<lockup> <mediaContent playbackMode="onFocus">
<img src="http://host/image.jpg" width="548" height="308"/>
</mediaContent>
<lockup>
![Page 100: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/100.jpg)
Configure templateEmbedded Video Playback
Wrap <img> with <mediaContent>Configure playback mode
<lockup> <mediaContent playbackMode="onFocus">
<img src="http://host/image.jpg" width="548" height="308"/>
</mediaContent>
<lockup>
NEW
![Page 101: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/101.jpg)
NEW
Configure playerEmbedded Video Playback
Player per <mediaContent>Access with ‘Player’ feature
![Page 102: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/102.jpg)
NEW
Configure playerEmbedded Video Playback
Player per <mediaContent>Access with ‘Player’ feature
var mediaContentElement = document.getElementsByTagName('mediaContent').item(0); var player = mediaContentElement.getFeature('Player');
player.playlist = playlist;
![Page 103: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/103.jpg)
Transition to fullscreenEmbedded Video Playback
Does not transition automatically
NEW
![Page 104: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/104.jpg)
Transition to fullscreenEmbedded Video Playback
Does not transition automatically
NEW
document.addEventListener('select', function(event) { var mediaContentElement = event.target.getElementsByTagName('mediaContent').item(0);
var player = mediaContentElement.getFeature('Player');
player.present();
});
![Page 105: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/105.jpg)
Does not transition automatically
document.addEventListener('select', function(event) { var mediaContentElement = event.target.getElementsByTagName('mediaContent').item(0);
var player = mediaContentElement.getFeature('Player');
player.present();
});
Transition to fullscreenEmbedded Video Playback NEW
![Page 106: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/106.jpg)
Transition to fullscreenEmbedded Video Playback
Does not transition automatically
NEW
document.addEventListener('select', function(event) { var mediaContentElement = event.target.getElementsByTagName('mediaContent').item(0);
var player = mediaContentElement.getFeature('Player');
player.present();
});
![Page 107: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/107.jpg)
Interactive Video Overlays
![Page 108: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/108.jpg)
![Page 109: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/109.jpg)
![Page 110: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/110.jpg)
![Page 111: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/111.jpg)
NEWInteractive Video Overlays
One per playerUse any templatePresented on full screen video
![Page 112: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/112.jpg)
NEWInteractive Video Overlays
One per playerUse any templatePresented on full screen video
// Set a document to present over the player. player.modalOverlayDocument = document;
![Page 113: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/113.jpg)
DemoAppearance, embedded video andinteractive video overlay
Jeff Tan-Ang tvOS Design Engineer
![Page 114: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/114.jpg)
Recap
Adopt dark appearance
![Page 115: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/115.jpg)
Recap
Adopt dark appearanceImmersive using embedded videos
![Page 116: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/116.jpg)
Recap
Adopt dark appearanceImmersive using embedded videosInteractive video overlays
![Page 117: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/117.jpg)
Summary
Native experience
![Page 118: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/118.jpg)
Summary
Native experienceRapid development
![Page 119: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/119.jpg)
Summary
Native experienceRapid developmentNew features
![Page 120: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/120.jpg)
More Information
https://developer.apple.com/wwdc16/212
![Page 121: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/121.jpg)
Related Sessions
Designing for tvOS Presidio Tuesday 4:00PM
Mastering UIKit on tvOS Presidio Wednesday 10:00AM
Focus Interaction on tvOS Mission Wednesday 4:00PM
Developing tvOS Apps Using TVMLKit: Part 2 Mission Thursday 4:00PM
![Page 122: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/122.jpg)
Labs
tvOS Lab Frameworks Lab D Wednesday 2:00PM
TVMLKit Lab Graphics, Games, and Media Lab B Wednesday 3:00PM
tvOS Lab Frameworks Lab D Thursday 9:00AM
TVMLKit Lab Graphics, Games, and Media Lab C Friday 9:00AM
![Page 123: App Development Using TVMLKit - Apple Inc. · Building an App With TVMLKit Xcode TVML and Styles TVMLKit JS. Application Architecture TVMLKit. Application Architecture TVMLKit TVMLKit](https://reader036.vdocument.in/reader036/viewer/2022070901/5f4b1eea82ecc83ba34c5f28/html5/thumbnails/123.jpg)