TAU: How do we use the PageIndicator for Wearable Devices - html

Question

I am trying the Page Indicator in Tizen Wearable Application for Gear S3 Frontier. When I use the code pasted there, It works fine for text only. E.g. when I try to add controls on each section (being shown as page on the screen) It doesn't work. Even if I set a background image the whole design gets scattered. I've tried some approaches, including the answer given on this question
My Output:
HTML Code:
Page1 of 2
Page2 of 2
CSS:
.ui-content section {
overflow: hidden;
overflow-y: auto;
text-align: center;
}
JavaScript:
/*global tau */
(function() {
var page = document.getElementById("taskListPage"),
changer = document.getElementById("hsectionchanger"),
sections = document.querySelectorAll("section"),
sectionChanger,
elPageIndicator = document.getElementById("pageIndicator"),
pageIndicator,
pageIndicatorHandler;
/**
* pagebeforeshow event handler
* Do preparatory works and adds event listeners
*/
page.addEventListener( "pagebeforeshow", function() {
// make PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
pageIndicator.setActive(0);
// make SectionChanger object
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: true,
orientation: "horizontal",
useBouncingEffect: true
});
});
/**
* pagehide event handler
* Destroys and removes event listeners
*/
page.addEventListener( "pagehide", function() {
// release object
sectionChanger.destroy();
pageIndicator.destroy();
});
/**
* sectionchange event handler
*/
pageIndicatorHandler = function (e) {
pageIndicator.setActive(e.detail.active);
};
changer.addEventListener("sectionchange", pageIndicatorHandler, false);
}());
I am facing an error as well:
file:///lib/tau/wearable/js/tau.min.js (20) :[tau][10/24/2019, 1:28:31

Answer 1

The HTML code is not attached. Basing on the screens I assume that your application has two sections. The SectionChanger widget with "circular" option can be build only with apps that contain at least 3 sections, hence the error in console.
Please change the circular option for section changer to false:
page.addEventListener( "pagebeforeshow", function() {
// make PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
pageIndicator.setActive(0);
// make SectionChanger object
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: true,
orientation: "horizontal",
useBouncingEffect: true
});
});
into:
page.addEventListener( "pagebeforeshow", function() {
// make PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
pageIndicator.setActive(0);
// make SectionChanger object
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: false,
orientation: "horizontal",
useBouncingEffect: true
});
});
This option is responsible for switching between sections mode. If it's set to true user can move from first section to the last one and vice versa.