I tried many times to submit my app to Samsung but I always get rejected because the back button or exit button of the watch doesn't work.
My app is a multiple page in one single HTML, as explained in the Tizen Documentation.
I don't know if it's a problem with the code within the app.js file where a problem with the multiple page in one single HTML file.
App.js file:
( function () {
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 {
tau.changePage("#main");
}
}
} );
} () );
index.html file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>BRStocks</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>
<div class="ui-page ui-page-active" id="main">
<header>
<h2 class="ui-title">BR Stocks</h2>
</header>
<div class="ui-content content-padding">
<ul class="ui-listview">
<li><a href="#two" id="first-button" onclick="link(event);" ticker_id="BVSP">BVSP</a></li>
<li><a href="#two" id="IBOV" onclick="link(event);" ticker_id="IBOV">IBOV</a></li>
<li><a href="#two" id="ABEV3" onclick="link(event);" ticker_id="ABEV3">ABEV3</a></li>
<li><a href="#two" id="AZUL4" onclick="link(event);" ticker_id="AZUL4">AZUL4</a></li>
<li><a href="#two" id="BTOW3" onclick="link(event);" ticker_id="BTOW3">BTOW3</a></li>
</ul>
</div>
</div>
<div class="ui-page" id="two">
<span id='ABEV3'>START</span>
<header>
<h2 class="ui-title" id="title">Loading...</h2>
</header>
<div class="ui-content">
<div id="container">
<pre><span id="ticker"></span></pre>
<pre><span id="price"></span></pre>
<pre><span id="pctChange"></span></pre>
<a class="back" href="main" onClick="Clear();">Voltar</a>
</div>
</div>
</div>
<script>
function Clear()
{
document.getElementById('title').innerHTML="Loading...";
document.getElementById('ticker').innerHTML = '';
document.getElementById('price').innerHTML = '';
document.getElementById('pctChange').innerHTML = '';
}
function link(event) {
var element = event.target;
var ticker_id = element.getAttribute("ticker_id");
// do what you will with hike_id
console.log(ticker_id);
getPrice(ticker_id);
return;
}
function getPrice(y) {
if (self.fetch) {
console.log("fetch ok!")
fetch('xxxxxxxxxxxxxxxx')
.then(response => response.json())
.then(data => {
console.log("Fetching...")
//document.getElementById('title').innerHTML = data[y]['name']
var CompanyName = data[y]['name'];
var CompanyTicker = data[y]['ticker'];
var lastPrice = Number(data[y]['lastPrice']);
var pctChange = Number(data[y]['pctChange']);
pctChange = pctChange.toFixed(2);
document.getElementById('ticker').innerHTML = CompanyTicker;
document.getElementById('title').innerHTML = CompanyName;
document.getElementById('price').innerHTML = lastPrice.toLocaleString('pt-BR');
document.getElementById('pctChange').innerHTML = pctChange.replace('.',',') + '%';
if (pctChange < 0) {
console.log('Achou o sinal negativo');
document.getElementById('pctChange').className = 'redFont';
}else{
document.getElementById('pctChange').className = 'greenFont';
}
});
} else {
console.log("Something went wrong...")
}
}
function red(){
var elements = document.getElementById('pctChange').innerHTML;
console.log('Elemento: '+elements);
if (elements.includes('-')) {
console.log('Achou o sinal negativo');
document.getElementById('pctChange').className = 'redFont';
}else{
document.getElementById('pctChange').className = 'greenFont';
}
}
</script>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/circle-helper.js"></script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</body>
</html>
The html file is pretty simple. The multiple page works with href pointing to id tags (in this case is #two and #main the pages).
For any reason, the button back in the emulator and real gadget is not working. Neither back to previous page, nor exit the application.
I have just figure out that for the buttons to work (and also the function tizenhwkey) you have to setup the config.xml file of your project.
I have just added the line below:
<tizen:setting background-support="disable" encryption="disable" hwkey-event="enable"/>
And now the function and buttons work fine!