我有一个很短的问题,对你们中的一些人来说可能是微不足道的,但是我在TVML的文档中找不到任何东西。因为我通常是一个设计师,所以我不需要处理太多的代码。
我使用productBundleTemplate来构建应用的主页面。下面是一个例子:
> <section>
> <lockup>
> <img src="${this.BASEURL}resources/test.jpg" width="332" height="500" />
> <title class="showTextOnHighlight"></title>
> <overlay>
> <progressBar value="0.1" />
> </overlay>
> <relatedContent>
> <infoTable>
> <header>
> <title>Test</title>
> </header>
> <info>
> <header>
> <title></title>
> </header>
> <description allowsZooming="true">This is great</description>
> </info>
> </infoTable>
> </relatedContent>
> </lockup>
现在我想把这个产品链接到另一个产品页面。我需要用什么代码呢?
我的最后一个问题是,如何将按钮链接到其他内容。我猜是一样的,但为了确保我也提到了。我确信在TVML文档中一定有某种参考,但我无法找到任何参考。如有任何帮助,我将不胜感激。
提前感谢,Eric
<img src="${this.BASEURL}resources/test.jpg" width="332" height="500" /> <title class="showTextOnHighlight"></title> <overlay>
在你的present .js文件(我相信你有),你需要有一个函数加载这个模板时,图像被选中。
最后在你的main.js或application.js(无论你叫它什么)你必须添加一个事件监听器到文档。这将加载文件。
如果我刚才说的一切听起来像是胡言乱语,请查看并下载apple的示例tvml项目。它有助于展示如何开始在模板中导航的基础知识。https://developer.apple.com/library/prerelease/tvos/samplecode/TVMLCatalog/Introduction/Intro.html希望这对你有帮助。
当你说"这个产品不同的产品页面的链接",我猜你的意思是,当用户移动的选择项,然后选择它(Siri远程点击触摸板,按选择的红外遥控器,水龙头在偏远的iOS应用程序屏幕),你想要当前显示的基于productBundleTemplate消失和一个新的显示基于productTemplate的显示。此外,"链接按钮到其他内容",我想你的意思是类似的,导航到按钮,然后选择它会进入另一个页面。
有三个部分。在"开箱即用"的情况下,选择项目除了稍微摇动UI外不会做任何事情。(这就像当用户点击链接时,如果网页浏览器没有内置跟踪链接的概念。)
所以第一部分是,您必须为"select"事件设置一个JavaScript事件处理程序。对于列表内部的锁定和按钮,"select"是当用户执行该操作时触发的事件。还有其他的事件,但我认为"select"是你想要的。
第二部分是,你必须决定去哪里。有几种方法可以做到这一点,但最简单的技巧是向接收"select"事件的TVML元素添加一个自定义属性。然后可以在事件处理程序中从事件中解引用元素,读取自定义属性,然后就可以开始运行了。如果您的产品页面是静态生成的,您可能只包含一个实际的URL,甚至可能使用"href"作为属性。如果你的产品页面是动态生成的,你可以定义一个"productid"属性。
第三部分是将新内容放入JavaScript的内存中,然后使用"navigationDocument"对象上的方法将其放在用户面前。如果你处理的是已经存在于某处的TVML文件,比如在应用包或服务器中,那么你可以通过XMLHttpRequest调用来获取它。如果要处理完全在JavaScript中动态构建的TVML,则需要编写代码来完成此操作(但不必非常复杂)。
我所见过的关于"带有url的现有TVML文件"方法的最简单示例如下:
https://gist.github.com/rayh/d023aeba28a25ed7f7f2我所见过的"动态创建TVML"方法的最简单示例是以下教程中的"createAlert"函数:
http://www.raywenderlich.com/114886/beginning-tvos-development-with-tvml-tutorial
如果你正在使用atvjs框架,你的需求是很容易实现的。您所需要做的就是将data-href-page
属性添加到您的可选择元素中,并将value作为您之前创建的页面的名称。框架将自动导航到选择的页面。下面是帮助您入门的代码片段。
// your template
var homepageDoc = `<document>
<productBundleTemplate>
/* usual tvml elements */
<lockup data-href-page="details">
/* usual tvml elements */
</lockup>
</productBundleTemplate>
</document>`;
// create pages
ATV.Page.create({
name: 'homepage',
template: function(data) {
return homepageDoc;
}
});
ATV.Page.create({
name: 'details',
/* and other usual params */
});
// later in your application, navigate to your initial page
ATV.Navigation.navigate('homepage');
免责声明:我是atvjs的创建者和维护者,在写这个答案时,它是唯一的 JavaScript框架,可用于使用TVML和TVJS开发Apple TV。因此,我只能从这个框架中提供参考。
要为TVML应用程序做到这一点,您需要一点javascript和一点TVML。
如果你通过Apple的TVML参考的创建动态页面内容指南(https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/ExpandingYourApp.html#//apple_ref/doc/uid/TP40016718-CH3-SW2)在第二部分(在页面之间导航),它会告诉你需要做什么。
简单地说,你需要在你的javascript中有这样一个函数(取自上面链接中的示例代码):function getDocument(url) {
var templateXHR = new XMLHttpRequest();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {pushDoc(templateXHR.responseXML);}, false);
templateXHR.open("GET", url, true);
templateXHR.send();
}
,然后在TVML中需要一个按钮或其他东西供用户按下。
<button onselect="getDocument('templates/NextPage.xml')">
<text>Next page</text>
</button>
关键是要添加onselect="getDocument('链接到新的tvml页面')",它来自您添加到javascript中的代码。