Samsung TV Tizenウェブアプリの優れたUIを構築するにはどうすればよいですか？

Tizenの開発者サイトにはたくさんの情報があり、それはモバイルやウェアラブルのためのもので、サムスンのTizen TV Webアプリケーションのための良い、反応性の高いUIを構築する方法を見つけることが難しいと思っています。現在、私のindex.htmlには、単純に次のようになります。Samsung TV Tizenウェブアプリの優れたUIを構築するにはどうすればよいですか？

<!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が

、ウェアラブルモバイル、TVデバイス向けに最適化されていることを言及だから、テレビのアプリかどうかで動作しますか？

出典

2017-12-21 Jvalant Dave

を処理します。

を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コンポーネント、およびそれらに「フォーカス可能を」属性を追加します。

<div focusable>

3.Andがあなたのコントローラを書いたあなたが見ることができるよう、CAPH要素は多くの州を持っていますここに：http://developer.samsung.com/onlinedocs/tv/caphdocs/main.html?type=jquery&doc=tutorial&p1=7

しかし、あなたが起動したい場合は、お使いのシンプルかつメインコントローラは次のようになります必要があります。このコードは、フォーカス要素（onFocused）に赤い境界線を追加します、そして時に透明に設定します

$(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' 
      }); 
     }); 
    }); 
});

要素（onBlurred）にフォーカスを置きます。

CAPHについて知っておくべきことがたくさんありますが、私はこの短い紹介がマウスの代わりにあなたのキーの矢印でナビゲートすることを願っています。

また、ここでより多くの情報があります：http://developer.samsung.com/tv/develop/legacy-platform-library/API00007/index

出典

2017-12-30 21:48:06 Lotan