Unable to terminate the app by BACK key (*No exit menu in the app)

Unable to terminate the app by BACK key (*No exit menu in the app)

BY 09 Oct 2019 Web Application Development

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.

Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More