(Part 4 of 5)
This is the fourth part of our tvOS tutorial. Please check out the previous Article to know more about this series.
Before moving forward, I would like to appreciate the work you have done so far.
Note: Even though you are running on your local web server, you could have put this on a live web server or perhaps hooked up to a database.
There are many more properties we can add to a TVML document, and as an experiment, we’ll add a button to the current alertTemplate. Get back to your JavaScript code, and take a look at your current implementation of createAlert. Now, lets add a button to it.
var alertString = `<?xml version=”1.0″ encoding=”UTF-8″ ?>
<document>
<alertTemplate>
<title>${title}</title>
<description>${description}</description>
<button>
<text>OK</text>
</button>
</alertTemplate>
</document>`
Explanation of the code:
- A TVML document starts off by enclosing its contents with <document>.
- Next, we define the template, in our case its <alertTemplate>.
- Within the template you can further design it with a title, description, button and much more. To check all the designing elements available, click here.
Save your file, and build and run. You should see a button associated with your alert view. Yippee., TVML made easy!
Note: The amount of elements you can put within a template vary depending on the specific template. For instance, a loadingTemplate does not allow any buttons. A list of each template’s capabilities can be found here.
Fleshing out the JavaScript Client
In this section, we’ll spend time splitting the logic into different classes for better reusability.
Create a new Javascript file in your client\js directory and name it Presenter.js. In this file, we’ll declare the class Presenter that will handle the navigation stack. This class will be incharge of the navigation and do event handling. Add the following code to Presenter.js.
// 1
makeDocument: function(resource) {
if (!Presenter.parser) {
Presenter.parser = new DOMParser();
}
var doc = Presenter.parser.parseFromString(resource, “application/xml”);
return doc;
},
// 2
modalDialogPresenter: function(xml) {
navigationDocument.presentModal(xml);
},// 3
pushDocument: function(xml) {
navigationDocument.pushDocument(xml);
},
}
Explanation to the code:
- DOMParser — It is a class that can convert TVML string to an Objext-Oriented Presentation. It is created only once and is reiused any number of times. You then add lines to parse a TVML string and return the document.
- modalDialogPresenter — This method takes a TVML document and presents it modally on screen.
- pushDocument — This method pushes a TVM L document onto the navigation stack
Later in this tutorial, we’ll have the Presenter class manage the cell selection as-well. Replace the current implementation of App.onLaunch with the following code:
App.onLaunch = function(options) {
// 1
var javascriptFiles = [
`${options.BASEURL}js/Presenter.js`
];
// 2
evaluateScripts(javascriptFiles, function(success) {
if(success) {
var alert = createAlert(“Hello World!”, “”);
Presenter.modalDialogPresenter(alert);
} else {
var errorDoc = createAlert(“Evaluate Scripts Error”, “Error attempting to evaluate external JavaScript files.”);
navigationDocument.presentModal(errorDoc);
}
});
}
Explanation of code:
- Create a new array of JavaScript files. Recall earlier we passed in a BASEURL in the launchOptions property of the TVApplicationControllerContext. Now we will use it to create a path to the Presenter.js.
- evaluateScripts — This loads the Javascript files.
- The error is handled here, we have added an alert incase of any errors.
