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

Question

There is so much information on the Tizen developer site, and so much of it is just for mobile and wearables that I'm finding it difficult to find how to build a good, responsive UI for Samsung Tizen TV web apps. Currently, my index.html looks simply like this:

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

As you can see, this is pretty basic, since I'm just now learning web app development. I can use the app well if I have a mouse connected to the TV but I can't do it with a remote control. I can't tell if I'm navigating through the elements because there's no highlighting and I haven't done any key bindings.

Just wondering if anybody could point me to the relevant sections in the development guides or if anybody has code examples of good Tizen TV apps. Thank you.

Edit: I see that there is a UI framework called TAU but it is only available Mobile and Wearable applications, as mentioned in the first paragraph on this site https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui

But then, in the bullet list provided, it mentions that

TAU is optimized for wearable, mobile, and TV devices

So does it work with TV apps or not?

burakk · Answer 1 · 2017-12-23T22:33:47.050

2

Did you have a look at Caph?

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

CAPH is a web UI framework for TV. You can develop high performance web apps using Caph. It has many UI components designed for TV and handles navigation, focus, etc.

edited Dec 23 '17 at 22:33

answered Dec 23 '17 at 20:52

burakk

1,231
2
22
45

score 2 · Accepted Answer · answered Dec 30 '17 at 21:48

I don't know about TAU functionality but:

As burakk says, CAPH is a good library to implement navigation out of mouse inputs, and it's even better with jQuery. Tizen Studio indeed let's you create the project having jQuery+Caph libraries.

It's easy to use:

1.Link the library to your project (if you have chosen the template as I said, go to point 2)

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

2.Create any html component, and add to them the attribute "focusable":

<div focusable>

3.And wrote your controller, Caph elements have many states as you can see here: http://developer.samsung.com/onlinedocs/tv/caphdocs/main.html?type=jquery&doc=tutorial&p1=7

But if you want to start, your simple and main controller should looks like:

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

This code will add red border to the focus element (onFocused), and will set to transparent when you leave the focus on the element (onBlurred).

There are many things to know about CAPH, but I hope this short intro let's you navigate with your key-arrows instead of mouse.

There is more information also here: http://developer.samsung.com/tv/develop/legacy-platform-library/API00007/index

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

2 Answers2