- tvOS 12.0+
- Xcode 10.1+
- TVMLKit JS
Configure the Sample Code Project
Before running the app, you need to set up a local server on your machine:
In Finder, navigate to the DataBindings directory in the DataBindings project directory.
In Terminal, enter at the prompt,
cdfollowed by a space.
Drag the DataBindings folder from the Finder window into the Terminal window, and press Return. This changes the directory to that folder.
In Terminal, enter
ruby -run -ehttpd . -p9001to run the server.
Build and run the app.
After testing the sample app in Apple TV Simulator, you can close the local server by pressing Control-C in Terminal. Closing the Terminal window also kills the server.
Set Up the TVML Document
The TVML document uses the
prototypes element to create a reusable collection of elements. Use the
prototype attribute to uniquely identify the elements. The app creates two
lockup elements that contain movie poster information.
Rather than creating a separate
lockup in the TVML document for each JSON object, the sample uses a separate JSON file that contains the data used by the
lockup elements. This creates smaller TVML files that are easier to read and understand. Reusing
lockup elements also improves the loading speed when using large data sets.
lockup contains a set of rules, or queries, that change the color of the movie poster’s title based on the JSON data.
specialize elements contain queries that interact with JSON data and act as
if-then statements. When the JSON data matches the query, the elements inside of the
specialize element replace the
placeholder element with the matching
tag. In the app, a movie poster’s title appears in one of two colors depending on the amount of time remaining for that object’s availability. For example, movie titles appear in a default color when rented by a user; the titles change to an alternate color when the user has less than 24 hours remaining in the rental period.
Retrieve the JSON Data
XMLHttp to retrieve the JSON information from your server. This creates two arrays that hold JSON objects. Each object has the following properties:
hours property contains the data used by the queries in the previous section.
Bind the JSON Data
You must add a type and an identifier to each JSON object, as creating new
Data objects require both a type and a unique identifier for each object. The
type groups like items together and identifies the correct element to populate the
section element. The
ID is used to identify each object and must be unique within each type.
Parse the JSON data into a separate variable. Retrieve the desired
section element and create a new data item for the section. This sample uses the
lockup element to populate two
shelf elements. Inside of each shelf is a
section element that contains the binding variable.
Create a new item to contain the JSON information. A mapping function creates a new
Data object with the
ID from a JSON object. Populate the object with the remaining JSON data. Return the object to map the information to your array of new items.
set method to bind the new data items with the
section data item.