- tvOS 12.1+
- Xcode 11.2+
- TVMLKit JS
As the user navigates to a menu item along the top of the screen, the screen updates with information related to that menu item. This app shows you how to use events to update the screen when the user moves to a menu item, but doesn’t select the item.
Configure the Sample Code Project
Before running the app, set up a local server on your machine:
In Finder, navigate to the Incorporating Event Listeners directory inside of the Incorporating Event Listeners directory.
In Terminal, enter
cd, followed by a space.
Drag the Incorporating Event Listeners folder from the Finder window into the Terminal window, and press Return. The current directory changes to that folder.
In Terminal, enter
ruby -run -ehttpd . -p9001to run the server.
Build and run the app in Apple TV Simulator.
After testing the sample app in Apple TV Simulator, you can quit the local server by pressing Control-C in Terminal or closing the Terminal window.
Add URL Information to the menuBar Template Code
select attribute to each
menu element inside of the
menu. As the user moves between menu items, an event fires in order to update the onscreen information. The
select attribute identifies the location of the TVML page associated with the highlighted menu item. An example of a formatted menu item follows:
Set Up the Event Listeners
XMLHttp function to load the
add function. The event listener notifies the app when the user moves to a new menu item. The app calls the user-defined
handle function and automatically sends all of the the events to the function.
Respond to an Event
handle function to verify that the event fired for the correct TVML element. The event’s
target property contains the highlighted element. The function then verifies that the highlighted element contains the
select attribute. If the highlighted element is also a
menu element and not a different element with the
select attribute, the function calls the
update function, which will update the displayed document, that is, the information associated with the highlighted menu item.
Update the Document
update function to load the new document from the server. After loading the new document, retrieve the menu item’s parent node and the
Menu object. Finally, associate the new document to the
menu element using the
set. This displays the document associated with the menu item.