Wie erstellt man eine gute Benutzeroberfläche für Samsung TV Tizen Web Apps?

Es gibt so viele Informationen auf der Tizen-Entwickler-Website, und so viel davon ist nur für mobile Geräte und Wearables, die ich finde es schwierig zu finden, wie eine gute, responsive Benutzeroberfläche für Samsung Tizen TV-Web-Anwendungen zu bauen. Derzeit sieht mein index.html einfach so:Wie erstellt man eine gute Benutzeroberfläche für Samsung TV Tizen Web Apps?

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

Wie Sie sehen können, das ist ziemlich einfach, da ich gerade jetzt Web-App-Entwicklung zu lernen. Ich kann die App gut verwenden, wenn ich eine Maus an den Fernseher angeschlossen habe, aber ich kann es nicht mit einer Fernbedienung tun. Ich kann nicht sagen, ob ich durch die Elemente navigiere, weil es keine Hervorhebung gibt und ich keine Tastenbelegungen gemacht habe.

Ich frage mich nur, ob mich jemand auf die relevanten Abschnitte in den Entwicklungsleitfäden hinweisen kann oder ob jemand Codebeispiele für gute Tizen TV-Apps hat. Vielen Dank.

Edit: Ich sehe, dass eine UI-Framework gibt TAU, aber es ist nur verfügbar, Mobile und Wearable-Anwendungen aufgerufen wird, wie im ersten Absatz auf dieser Seite https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui

erwähnte Aber dann, sofern in der Aufzählungsliste, es erwähnt, dass

TAU für tragbare, mobile und TV-Geräte optimiert mit TV-Anwendungen

es funktioniert so funktioniert oder nicht?

Quelle

2017-12-21 Jvalant Dave

Ich weiß nicht, über TAU Funktionalität aber:

Wie burakk sagt, ist CAPH eine gute Bibliothek Navigation von Mauseingaben zu implementieren und es ist noch besser mit jQuery. Tizen Studio in der Tat können Sie das Projekt mit jQuery + Caph-Bibliotheken erstellen.

Es ist einfach zu bedienen:

1.Link die Bibliothek zu einem Projekt (wenn Sie die Vorlage gewählt haben, wie gesagt, gehen zu Punkt 2)

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

2.Create beliebige HTML-Komponente und das Attribut „fokussierbarem“, um sie hinzuzufügen:

<div focusable>

3.Und schrieb Ihren Controller, haben Caph Elemente viele Staaten wie Sie sehen können hier: http://developer.samsung.com/onlinedocs/tv/caphdocs/main.html?type=jquery&doc=tutorial&p1=7

Aber wenn Sie, Ihr einfacher und Haupt-Controller sollte gestartet werden sollen wie folgt aussieht:

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

Dieser Code rot Grenze zum Fokuselement (onFocused) hinzufügen, und wird auf transparent gesetzt, wenn Sie belassen den Fokus auf das Element (onBlurred).

Es gibt viele Dinge über CAPH zu wissen, aber ich hoffe, dieses kurze Intro lässt Sie mit Ihren Schlüsselpfeilen navigieren, anstatt mit der Maus.

Es gibt mehr Informationen auch hier: http://developer.samsung.com/tv/develop/legacy-platform-library/API00007/index

Quelle

2017-12-30 21:48:06 Lotan

Haben Sie sich Caph angeschaut?

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

CAPH ist ein Framework, Web-UI für TV. Mit Caph können Sie leistungsstarke Web-Apps entwickeln. Es hat viele UI-Komponenten hat für TV entwickelt und Griffe Navigation, Fokus etc.

Quelle

2017-12-23 20:52:24 burakk

Während dieser Link, um die Frage beantworten kann, es besser ist, die die wesentlichen Teile der Antwort auf umfassen hier und geben Sie den Link Referenz. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - [Aus Bewertung] (/ review/low-quality-posts/18340305) – bcsb1001

Wie erstellt man eine gute Benutzeroberfläche für Samsung TV Tizen Web Apps?

Antwort

Verwandte Themen