在Samsung Smart Tv应用程序中通过Remote导航

Question

I am creating a samsung smart Tv javascript application, the HTML page is finished and now its time to integrate remote control options in it.

My application contains tabs/images for different chanells etc which when the user selects through remote, he will be redirected to. Now the the problem is that how this navigation will work?? how the user can go left right or up and down on these channel tabs using the remote control?

In the samsung smart tv documentation they have given info about their keys library but how can i use it in my application to move to different elements?

Answer 1

can not give you a fully working solution, but at least some practices from how we did this.

You can organize your HTML into different navigations zones and types. A navigation zone has a navigation type, typically list or a grid .

A JavaScript navigation controller keeps track of what zone you are in. It also handles keypress (up/down/left/right/enter), and figure out what is next item to highlight based on navigation type.

Lets say you have a list of tabs:

<div id="maintabs" class="tabs nav-current-zone" data-nav-type="list">
    <span class="tab nav-current-item">Tab 1</span>
    <span class="tab">Tab 2</span>
    <span class="tab">Tab 3</span>
</div>

The JavaScript would typically look like this:

if($(".nav-current-zone").data("nav-type") === "list"){
    if(key === "down"){
       var currentItem = $(currentZone).find("nav-current-item");
       var nextItem =  $(currentItem).next();
       $(currentItem).removeClass("nav-current-item");
       $(nextItem).addClass("nav-current-item");
    } else if(key === "up"){
    ...
}

What if you are at the top/bottom of list and navigate out of list? In this case you can either do nothing or define an other zone to enter.

<div id="maintabs" data-nav-type="list" data-nav-leave-down="anotherZone">
    ...
</div>

<div id="anotherZone" data-nav-type="list" data-nav-leave-up="maintabs">
    ...
</div>

So lets handled this:

if(key === "down"){
   var nextItem =  $(currentZone).find("nav-current").next();
   if($(next).size() === 0){
        var nextZone = $(currentZone).data("nav-leave-down");
        //navigate to the other zone
   }
}