如何为 Samsung TV Tizen 网络应用构建良好的 UI？

Question

Tizen 开发者网站上有很多信息，其中很多仅适用于移动设备和可穿戴设备，我发现很难找到如何为三星构建一个好的、响应迅速的 UI Tizen TV 网络应用程序。目前，我的 index.html 看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen TV basic template generated by Samsung TV Web IDE"/>

    <title>Tizen TV Web IDE - Tizen TV - Tizen TV basic Application</title>

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="jquery-3.2.1.js"></script>
    <script src="js/main.js"></script>
</head>

<body>  
  <h1>Enter Web Server Url</h1>
  <div>
    <form id="webServerUrl" name="webServerUrl">
        <!-- <p>IP Address</p><br> -->
        <input type="text" id="serverUrl" name="serverUrl" placeholder="Enter Web Server IP Address" class="inputBox">

        <button class="submitButton">Submit</button><br><br><br>
        <button class="showGlobalUrlValue">Show Web Server Url</button>
    </form><br><br><br>
  </div>

  <h1>Log In</h1>
  <div>
    <form id="signIn" name="signIn">
        <!-- <p class="regularText">Username</p> -->
        <input type="text" id="username" name="username" placeholder="Enter Username" class="inputBox"> <br><br>

        <!-- <p class="regularText">Password</p> -->
        <input type="password" id="password" name="password" placeholder="Enter Password" class="inputBox"> <br><br>

        <button class="submitUserAndPass">Submit</button>
    </form>
   </div>

   <button class="doActivationButton">Perform Activation</button> 

</body>
</html>

如您所见，这是非常基础的，因为我刚刚开始学习 Web 应用程序开发。如果我将鼠标连接到电视，我可以很好地使用该应用程序，但我无法使用遥控器进行操作。我无法判断我是否在浏览元素，因为没有突出显示并且我没有进行任何键绑定。

只是想知道是否有人可以指点我开发指南中的相关部分，或者是否有人有好的 Tizen TV 应用程序的代码示例。谢谢。

编辑：我看到有一个名为 TAU 的 UI 框架，但它仅适用于移动和可穿戴应用程序，如本网站第一段所述 https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui

但是，在提供的项目符号列表中，它提到

TAU 针对可穿戴设备、移动设备和电视设备进行了优化

那么它是否适用于电视应用程序？

Answer 1

你看过 Caph 了吗？

http://developer.samsung.com/tv/develop/extension-libraries/caph-30

CAPH 是一个网络 UI 电视框架。您可以使用 Caph 开发高性能 Web 应用程序。它有许多 UI 专为电视设计的组件，可处理导航、焦点等。

Answer 2

我不知道 TAU 功能但是：

正如 burakk 所说，CAPH 是一个很好的库，可以通过鼠标输入实现导航，jQuery 甚至更好。 Tizen Studio 确实可以让您创建具有 jQuery+Caph 库的项目。

使用方便：

1.Link你项目的库（如果你按照我说的选择了模板，请转到第 2 点）

<!-- include the CAPH Package for jquery -->
<script src="lib/caph/3.1.0/caph-jquery.min.js" type="text/javascript"></script>

2.Create 任何 html 组件，并向它们添加属性 "focusable":

<div focusable>

3.And 写了你的控制器，Caph 元素有很多状态，你可以在这里看到：http://developer.samsung.com/onlinedocs/tv/caphdocs/main.html?type=jquery&doc=tutorial&p1=7

但是如果你想开始，你的简单主控制器应该是这样的：

$(document).ready(function(){

    $.caph.focus.activate(function(nearestFocusableFinderProvider, controllerProvider) {

        controllerProvider.onFocused(function(event, originalEvent) {
            $(event.currentTarget).css({
                border: '3px solid red'
                });
            });

        controllerProvider.onBlurred(function(event, originalEvent) {
            $(event.currentTarget).css({
                border : '3px solid transparent'
            });
        });
    }); 
});

此代码将向焦点元素 (onFocused) 添加红色边框，并且当您将焦点留在元素 (onBlurred) 上时将设置为透明。

有很多关于 CAPH 的知识，但我希望这个简短的介绍能让您使用键箭头而不是鼠标进行导航。

这里还有更多信息：http://developer.samsung.com/tv/develop/legacy-platform-library/API00007/index

如何为 Samsung TV Tizen 网络应用构建良好的 UI？

How to build a good UI for Samsung TV Tizen web apps?

tizen

tizen-web-app