How to scroll through items in a list using bezel in Samsung Tizen Gear s2?

Question

I have a question I have been dealing with for some time. I do web app development for gear s2.

What I want to do in my app is something exactly similar to what you do in the watch itself.

in ''settings'' for example, you have a vertical list and you can scroll through items by rotating the bezel.

i know according to this question Rotarty (ring) on Samsung Tizen Gear S2 this event should be used:

 rotaryDetentCallback = function rotaryDetentHandler(e) {
    var direction = e.detail.direction;
    if (direction === "CW") {
        // TODO: do something

    } else if (direction === "CCW") {
        // TODO: do something

    }
};

window.addEventListener("rotarydetent", rotaryDetentCallback);

How can I make it work inside if() to scroll through the items in a list?

Answer 1

It depends on the type of list you want to display.

For static list items, the TAU framework already takes care of this for you. So you won't need anything on the script side to add.

Example of static content:

<ul data-role="listview" >
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
</ul>

For dynamic content, this functionality is still buggy, but possible. You must update the content of your dynamic list in the "pagebeforeshow" (not "pageshow"). Once you do that, it will behave as if it is a static list.

Example of dynamic content:

in your html:

<ul id="myListView" data-role="listview" >
</ul>

in your js:

page.addEventListener("pagebeforeshow", function () {
    var element = document.getElementById("myListView");
    var myListView = tau.widget.Listview(element);

    myListView.addItem("<li>item 1</li>", 1);
    myListView.addItem("<li>item 2</li>", 2);
    myListView.addItem("<li>item 3</li>", 3);
    myListView.addItem("<li>item 4</li>", 4);
    myListView.addItem("<li>item 5</li>", 5);
    myListView.addItem("<li>item 6</li>", 6);
    myListView.addItem("<li>item 7</li>", 7);
    myListView.addItem("<li>item 8</li>", 8);
});

I hope you'll find these examples useful.