Languages

Menu
Sites
Language
How can I go to previous page in tizen web app?

Hello.

 

I made ui pages with <div> tags, like this :

<div id='firstPage'>

....

</div>

<div id='secondPage'>

...

</div>

And I move the page like this :  tau.changePage(document.getElementById("secondPage"), { transition:"slide"});

 

If I press a back button, I want to go previous page.

I used tau.back(), window.history.back() but they didn't works.

I think it's because I made pages with <div> tags.

Then how can I make it?

List

Responses

3 Replies
Marco Buettner

it should help if you add data-role="page" in your tags than tau.back() should work. Read the documentation about pageHandling and so on.

Armaan-Ul- Islam

div class have to be "ui-page" which is the class for page in TAU framework.

TAU API commands to navigate between pages:

tau.changePage("#pageId");
tau.back();

 

Sharing a code snippet for you here, Implementing both changePage() and back().

 

HTML file:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
	<title>Circular UI</title>
	<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
	<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
	<!-- load theme file for your application -->
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--pageOne-->
<div class="ui-page ui-page-active" id="first">
   <div class="ui-content">
       First page
      <button id="first-button">next</button>
   </div>
</div>

<!--pageTwo-->
<div class="ui-page" id="second">
   <div class="ui-content">
      Second page
      <button id="second-button">next</button>
   </div>
 </div>

<!--pageThree-->
<div class="ui-page" id="third">
   <div class="ui-content">
      Third page
      <button id="third-button">back</button>
   </div>

</div>
	<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
	<script src="app.js"></script>
	<script src="lowBatteryCheck.js"></script>
</body>
</html>

 

Separate JS file (app.js):

( function () {
    

	 var el1 = document.getElementById('first-button');
	 var el2 = document.getElementById('second-button');
	 var el3 = document.getElementById('third-button');

      el1.addEventListener('click', function() { 	  
         tau.changePage("#second");
      });
     
     

      el2.addEventListener('click', function() {
    	 
         tau.changePage("#third");
    	 
      });
      
      el3.addEventListener('click', function() { 
    	  tau.back();
       });      
      

	window.addEventListener( 'tizenhwkey', function( ev ) {
		if( ev.keyName === "back" ) {
			var page = document.getElementsByClassName( 'ui-page-active' )[0],
				pageid = page ? page.id : "";
			if( pageid === "main" ) {
				try {
					tizen.application.getCurrentApplication().exit();
				} catch (ignore) {
				}
			} else {
				window.history.back();
			}
		}
	} );
} () );

 

Hope it helps !!

Armaan-Ul- Islam

Hello, Are you able to navigate to previous page now?