Adding circular page indicators to your app

Posted on Posted in Development, Wearables
Circular page indicator example
Overview

This tutorial will show you how to implement circular page indicators in your Tizen wearable web app like shown above. These are the dots seen at the top of the screen in the app launcher and while scrolling between notifications. They indicate which page you are currently on within a group of pages.

Set up your project

Page indicators require the Tizen Web UI framework TAU (Tizen Advanced UI) to function.

Create a new TAU Basic wearable project, or if you already have a TAU project, open the HTML and JavaScript files to edit. See the following article to get up and running with Tizen.

Edit the HTML

Make the following additions to the HTML code:

<div class="ui-page ui-page-active" id="main">
	<header class="ui-header">
		<h2 class="ui-title">Heading</h2>
	</header>
	<div id="pageIndicator" class="ui-page-indicator"></div>
	<div id="sectionChanger" class="ui-content">
		<div>
			<section class="ui-section-active">
				<p>Section 1</p>
			</section>
			<section>
				<p>Section 2</p>
			</section>
			<section>
				<p>Section 3</p>
			</section>
			<section>
				<p>Section 4</p>
			</section>
			<section>
				<p>Section 5</p>
			</section>
		</div>
	</div>
</div>

If you include the header element in lines 2-4, you will have a heading at the top of the screen that persists through all pages. The page indicator is defined in line 5 and is paired with a section changer in line 6 as well as 5 different sections below.

The sections will be the different pages that can be scrolled between and the page indicator shows the current page relative to the rest. Setting one section as the ui-section-active class will show that as the default page.

Edit the JavaScript

Make the following additions to your JavaScript code (e.g. add it to your onload event):

var self = this,
	page = document.getElementById( "main" ),
	changer = document.getElementById( "sectionChanger" ),
	sectionChanger,
	elPageIndicator = document.getElementById("pageIndicator"),
	pageIndicator,
	pageIndicatorHandler;

page.addEventListener( "pagebeforeshow", function() {
// Create PageIndicator
pageIndicator =  tau.widget.PageIndicator(elPageIndicator, 
	{ numberOfPages: 5, layout: "circular" });
pageIndicator.setActive(0);

sectionChanger = new tau.widget.SectionChanger(changer, {
	circular: true,
	orientation: "horizontal",
	useBouncingEffect: true
	});
});

page.addEventListener( "pagehide", function() {
	sectionChanger.destroy();
	pageIndicator.destroy();
});

// Indicator setting handler
pageIndicatorHandler = function (e) {
	pageIndicator.setActive(e.detail.active);
};

// Bind the callback
changer.addEventListener("sectionchange", pageIndicatorHandler, false);

Of particular note are lines 11 and 12 where the page indicator is initialized with the element and options. setActive in line 13 sets the dot at the specified index to active.

numberOfPages is the only required option, which specifies the number of pages to be linked. Others such as maxPage, layout, and intervalAngle are optional.

If maxPage is set to a value less than numberOfPages, then the central (or central right for even numberOfPages) dot indicates multiple pages. For example, if numberOfPages is 10, and maxPage is 5, the central dot will indicate 6 sections while the remaining 4 dots indicate 1 section each.

intervalAngle sets the angle between each dot and has a default value of 6. Below on the left is the default (6), and on the right is when intervalAngle is set to 12.

Circular page indicator example
intervalAngle set to 12

There you go! That should be enough to get you started with page indicators. See the API documentation at developer.tizen.org for more details.

Leave a Reply