如何在 tizen 中执行默认键操作？答案

【问题标题】：how to perform default key operations in tizen?如何在 tizen 中执行默认键操作？
【发布时间】：2021-06-22 16:42:44
【问题描述】：

我正在尝试开发一个基本的 Tizen 电视应用程序。为此，我创建了两个锚标记和一个按钮。代码如下。

  <!DOCTYPE html>
<html>
<head>
    <title>ReactSampleApp</title>
    <style>
    body,html{
        position:absolute;
        padding:0px;
        margin:0px;
        width:100%;
        height:100%;
        background:#fff;
    }
</style>
<script src="js/main.js"></script>
</head>

<body> 
    <a href="./page2.html">
    <button>click here for some music</button>
    </a>
    <a href="./page3.html">
    <button>click here to go to page3</button>
    </a>
    <button onclick="function(){alert(0)}">click here for an alert</button>
    
</body>
</html>

如您所见，它只是一个普通的 HTML 示例页面，在单击这些按钮时会遍历到不同的页面。

它工作正常，所以没有问题。

问题在于关注元素。好吧，这不完全是我的疑问。

window.onload = function() {

    // add eventListener for keydown
    document.addEventListener('keydown', function(e) {
        switch(e.keyCode){
        case 37: //LEFT arrow
            break;
        case 38: //UP arrow
            break;
        case 39: //RIGHT arrow
            break;
        case 40: //DOWN arrow
            break;
        case 13: //OK button
//          window.open("/page2.html");
            break;
        case 10009:
            tizen.application.getCurrentApplication().exit();
            break;
        default:
            console.log('Key code : ' + e.keyCode);
            break;
        }
    });
    
};

这段代码来自我的 main.js 文件。

我只是写它来处理关键事件——上、下、左、右和回车。现在在这个 switch 块中，我能够编写警报并能够与页面交互。但现在我想给出常规的上、下、左、右输入而不是警报。

含义 - 假设是否有网格（动态网格）。如何通过水平或垂直遍历元素来关注元素？我需要编写显式代码还是我在这里遗漏了什么？ Tizen 是否提供这种带有输入键的基本 Web 元素遍历？

提前致谢

【问题讨论】：

标签： tizen samsung-smart-tv tizen-web-app tizen-tv

【解决方案1】：

为了将远程控制键事件传递到客户端应用程序的 JS 运行时，您首先需要使用 registerKey 方法注册要使用的键事件

https://www.tizen.org/tv/web_device_api/tvinputdevice#::TVInputDevice::TVInputDeviceManager::registerKey

使用本页底部表格中“键名”列中的值：https://developer.samsung.com/smarttv/develop/guides/user-interaction/remote-control.html

例如注册电视遥控器上的“红色”按钮..

window.tizen.tvinputdevice.registerKey("ColorF0Red");

然后您可以在您的 keyDown 处理程序中侦听 403 的键码值

【讨论】：

不，我能够发送按键输入，那里没有问题。 Enter、up、left、down、right 这些键是自动注册的。我对显示消息的每个键都发出了很少的警报。当然，每个键的消息都是唯一的。我的问题是，是否必须编写显式代码以使用这些键在一个 web 元素之间导航，或者是否有更简单的方法来做到这一点？就像您知道一个专注于右侧 Web 元素的内置函数一样。当我点击右键时
@kevingodfrey 抱歉，我误读了原始问题。是的，您必须编写显式代码以将不同的可聚焦元素集中在您的网页上，就像在任何浏览器环境中一样。通常 tab 键可以与 tabindex 属性一起使用来访问浏览器的本机焦点导航，但是 Tizen RC 上没有 tab ky 并且 afaik tab 键事件不能由 JS 以编程方式触发。所以你需要实现自己的自定义焦点管理器。
我担心是这样的，嘿，你知道我们如何自动化这些 tizen tv 应用程序吗？就像正确的一样，我正在寻找一种方法来监视我的网络元素检查它们是否准备好，然后对它们执行一些操作。就像我们如何使用 selenium 自动化 Web 应用程序一样。有没有合适的方法来做到这一点？当我在网上搜索这个。大多数消息来源都指向appium。可惜！它不再受支持。如果您对此有任何见解，请分享。提前致谢
对不起，没有。我们总是让真正的 QA 人员通过遥控器手动测试我们的应用程序。我听说Suitest 有一个产品可以捕获并重新传输RC 命令以及一个测试运行器，但没有任何经验。
一些电视导航库提供了独立聚焦元素的方法。 github.com/NoriginMedia/react-spatial-navigation 提供 setFocus()

【解决方案2】：

要开发空间导航，推荐Luke Chang的js-spatial-navigation。这个库有一个 ReactJS 包装器，但它几乎没有更新过，我不得不自己对其进行修改以使其正常工作。 Xoundboy 建议的库也是一个很好的库，但至少对我来说，它似乎太复杂而无法正确实现，而对于 Tizen，JS 空间导航工作得很好，而且很容易实现。

【讨论】：