Implementing Lateral Navigation

By Joel Ivory Johnson

10 Sep 2018 16:50 English 2 Replies

I am trying ti figure out how to implement lateral navigation. But the documentation and code samples that I've looked at don't illustrate how it's done. The design documentation talks about it, but that's as much as I have been able to find.

https://developer.tizen.org/design/wearable/ux-overview/navigation-views-on-circular-type-wearable-device

Horizontal View

The following are examples of screen types that you can refer to when designing horizontal navigation views.

When you design a page in the horizontal view, design the contents on the screen to be navigated by both the touch inputs and the rotary actions.

Pages Type

The pages type screen is ideal for presenting multiple cards. As you navigate to the left or right on the screen, the next page or the previous page snaps into the screen.

So I understand the concept. But how do I do this in a Tizen Web application for Wearables (Circular Galaxy Gear/Watch)

Edited by: Joel Ivory Johnson on 10 Sep, 2018

Responses

2 Replies

Armaan-Ul- Islam

10 Sep 2018 23:46

You can apply Horizontal navigation view using TAU Section Changer, TAU Page Indicator and By Handling rotary Bezel event. TAU refers to Tizen Advanced UI library for Tizen web application.

Here's a Sample Code on how to achieve Horizontal navigation view.

<div id="main" class="ui-page" data-enable-page-scroll="false" >
    	<header class="ui-header">
			<h2 class="ui-title">SectionChanger</h2>
		</header>	
	    <div id="sectionchanger" class="ui-content">
		      <!--Section changer has only one child-->
				      <div>
				         <section>
				            <h3>LEFT1 PAGE</h3>
				         </section>
				         <section class="section-active">
				            <h3>MAIN PAGE</h3>
				         </section>
				         <section>
				            <h3>RIGHT1 PAGE</h3>
				         </section>
				      </div>
		   </div>
</div>


var page = document.getElementById("main"),
element = document.getElementById("sectionchanger"),
sectionChanger, idx=1;

page.addEventListener("pageshow", function() {
   /* Create the SectionChanger object */
   sectionChanger = tau.widget.SectionChanger(element, {
      circular: true,
      orientation: "horizontal",
      useBouncingEffect: true
   });
});

page.addEventListener("pagehide", function() {
   /* Release the object */
   sectionChanger.destroy();
});


document.addEventListener("rotarydetent", function(event){
 if (event.detail.direction === "CW") { 
    		sectionChanger.setActiveSection(sectionChanger.getActiveSectionIndex() + 1, 100);
		} else { 
			sectionChanger.setActiveSection(sectionChanger.getActiveSectionIndex() - 1, 100);
		}
 }, false);

Reference Code Snippet

Guide: Changing the Section Changer Index

Make Sure you add TAU library to your tizen web project (both js & css) or Start from New > Template > Wearable > Web > TAU Basic.