Languages

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

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.

Responses

1 Replies
gui reif

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!