TVML MenuBar Ausgabe

Question

Ich entwickle eine Vorlage für TVOS App mit TVML. Die App verwendet MenuBar. Diese Menüleiste wird jedoch nur geöffnet, wenn der Benutzer auf die Schaltfläche Start/Zurück klickt. Ich will es nur schaffen, indem ich nach oben wische. Wie es in Youtube App für TVOS ist. Code of index.xml (wo MenuBar ist):

<?xml version="1.0" encoding="UTF-8" ?> 
<document> 
    <menuBarTemplate> 
    <menuBar> 
     <menuItem documentURL="/templates/MyProject/Events.xml" autoHighlight="true"> 
     <title>Events</title> 
     </menuItem> 
     <menuItem documentURL="/templates/MyProject/News.xml"> 
     <title>News</title> 
     </menuItem> 
     <menuItem documentURL="/templates/MyProject/Programs.xml"> 
     <title>Programs and Courses</title> 
     </menuItem> 
     <menuItem documentURL="/templates/MyProject/Settings.xml"> 
     <title>Settings</title> 
     </menuItem> 
    </menuBar> 
    </menuBarTemplate> 
</document> 

Answer 1

Sie müssen die Funktionalität, um Ihre application.js, zum Beispiel hinzufügen (von https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/AddingaMenuBar.html):

var baseURL; 

function loadingTemplate() { 
    var loadingDoc = "<document><loadingTemplate><activityIndicator> 
    <text>Loading Page</text></activityIndicator></loadingTemplate> 
    </document>"; 
var parser = new DOMParser(); 
var parsedTemplate = parser.parseFromString(loadingDoc, "application/xml"); 
return parsedTemplate; 
} 

function alertTemplate() { 
    var alertDoc = "<document><alertTemplate><title>Error</title> 
<description>Page failed to load</description></alertTemplate></document>"; 
    var parser = new DOMParser(); 
    var parsedTemplate = parser.parseFromString(alertDoc, 
    "application/xml"); 
    return parsedTemplate; 
} 

function loadAndPushDocument(url) { 
    var loadingDocument = loadingTemplate(); 
    navigationDocument.pushDocument(loadingDocument); 
    var request = new XMLHttpRequest(); 
    request.open("GET", url, true); 

request.onreadystatechange = function() { 
    if (request.readyState != 4) { 
     return; 
    } 

    if (request.status == 200) { 
     var document = request.responseXML; 
     document.addEventListener("select", handleSelectEvent); 
     navigationDocument.replaceDocument(document, loadingDocument) 
    } 
    else { 
     navigationDocument.popDocument(); 
     var alertDocument = alertTemplate(); 
     navigationDocument.presentModal(alertDocument); 
    } 
}; 
request.send(); 
} 

function updateMenuItem(menuItem, url) { 
    var request = new XMLHttpRequest(); 
    request.open("GET", url, true); 

request.onreadystatechange = function() { 
    if (request.status == 200) { 
     var document = request.responseXML; 
     document.addEventListener("select", handleSelectEvent); 
     var menuItemDocument = 
menuItem.parentNode.getFeature("MenuBarDocument"); 
     menuItemDocument.setDocument(document, menuItem) 
    } 
}; 

request.send(); 
} 

function handleSelectEvent(event) { 
    var selectedElement = event.target; 

    var targetURL = selectedElement.getAttribute("selectTargetURL"); 
    if (!targetURL) { 
    return; 
    } 
targetURL = baseURL + targetURL; 

if (selectedElement.tagName == "menuItem") { 
    updateMenuItem(selectedElement, targetURL); 
} 
else { 
    loadAndPushDocument(targetURL); 
    } 
} 

App.onLaunch = function(options) { 
    baseURL = options.BASEURL; 
    var startDocumentURL = baseURL + "templates/menuBar.xml"; 

    loadAndPushDocument(startDocumentURL) 
}