按钮的TVML链接

  • 本文关键字:链接 TVML 按钮 tvml
  • 更新时间 :
  • 英文 :


我有一个很短的问题,对你们中的一些人来说可能是微不足道的,但是我在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

我想我能帮上忙。你需要有什么是你需要一个参考的新产品页面,你想从页面加载。举个例子:& lt;锁住模板= http://..。>
      <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中的代码。

相关内容

  • 没有找到相关文章

最新更新