Create Simple Muiltiple Page Navigation on Gear 2

By Lee

29 Jun 2014 02:58 English 3 Replies

I am developing a Simple Standalone WebApp Widget for the Gear 2 using the Tizen for Wearable SDK.

The problem is I am used to using HTML web developement and I understand that I cannot use the standard /page.html or /folder to navigate. The documentation and demos is not great, it simply says to change page I have to use JS and "tau.changePage(to)" but there are NO examples or source code anywhere. The demos in the Wearable SDK does not include a simple web index app with 2 link navigation app.

So I would like the following structure..............

index.html - Menu Title
- Link to Page 1 >Click > Loads Page1
- Link to Page 2 >Click > Loads Page2

Looks really simple, but I cannot solve this because the tau.js function i've discovered only works on 1 click 1 page, not multiple links/different page buttons and I do not understand how I can use more than one link/button.

function changePage(e) {
	tau.changePage("#page2");
}

EXAMPLE HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
	<title>Wearable UI</title>
	<link rel="stylesheet"  href="lib/tau/themes/default/tau.min.css">
	<!-- load theme file for your application -->
	<link rel="stylesheet"  href="css/style.css">
</head>
<body>
	<div class="ui-page ui-page-active" id="main">
		<header class="ui-header">
			<h2 class="ui-title">Wearable UI</h2>
		</header>
		<div class="ui-content">
			<ul class="ui-listview">
				<li><a href="#">List1</a></li>
				<li><a href="#">List2</a></li>
				<li><a href="#">List3</a></li>
				<li><a href="#">List4</a></li>
				<li><a href="#">List5</a></li>
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.min.js"></script>
<!-- load javascript file for your application -->
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
</html>

How do I make the Links in List1, List 2 etc become "clickable" to load "Page 1, Page 2, etc".

Can somone please post a simple HTML / JS code of how to create a basic web app with 2 pages. The rest I can work out.... thanks

Edited by: Lee on 29 Jun, 2014

Responses

3 Replies

Marco Buettner

29 Jun 2014 13:05

You can

<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <title>Wearable UI</title>
	<link rel="stylesheet"  href="lib/tau/themes/default/tau.min.css">
	<!-- load theme file for your application -->
	<link rel="stylesheet"  href="css/style.css">
</head>
<body>
	<div class="ui-page ui-page-active" id="main">
		<header class="ui-header">
			<h2 class="ui-title">Wearable UI</h2>
		</header>
		<div class="ui-content">
			<ul class="ui-listview">
				<li><a href="#main">List1</a></li>
				<li><a href="#page2">List2</a></li>
				<li><a href="#">List3</a></li>
				<li><a href="#">List4</a></li>
				<li><a href="#">List5</a></li>
			</ul>
		</div>
	</div>

    <div class="ui-page" id="page2">
    	<header class="ui-header">
			<h2 class="ui-title">Wearable UI</h2>
		</header>
		<div class="ui-content">
			<ul class="ui-listview">
				<li><a href="#main">List1</a></li>
				<li><a href="#page2">List2</a></li>
				<li><a href="#">List3</a></li>
				<li><a href="#">List4</a></li>
				<li><a href="#">List5</a></li>
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.min.js"></script>
<!-- load javascript file for your application -->
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
</html>

You can easy create pages with follow container: <div class="ui-page"></div>. All you know about page elements and so on you will find on documentation of tizen sdk for wearables.