Tizen Developers

document.addEventListener('tizenhwkey', function(e) {
var activePage = $.mobile.activePage().attr('id'); // read current page
switch(e.keyName)
{
	case 'back':
		switch(activePage)
		{
			case 'page1':
				tizen.application.getCurrentApplication().exit();
				break;
			default:
				parent.history.back();
				break;
		}
		break;
	case 'menu':
		switch(activePage)
		{
			case 'page2':
				console.log('you are on '+activePage);
				break;
			default:
				//TODO: Do something
				break;
		}
	break;
}});

<div data-role="page" id="page1">
	<div data-role="header" data-add-back-btn="false">
		<h1>Page 1</h1>
	</div>
	<div data-role="content">
		<h2>Welcome</h2>
		<p>This is the default start page</p>
	<div>
	<div data-role="footer">
		<h4>Footer (optionale)</h4>
	</div>
</div>

<div data-role="page" id="page2">
	<div data-role="header" data-add-back-btn="false">
		<h1>Page 2</h1>
	</div>
	<div data-role="content">
		<h2>Welcome on Page 2</h2>
		<p>This is the default page</p>
	<div>
	<div data-role="footer">
		<h4>Footer (optionale)</h4>
	</div>
</div>

Thanks for all the examples:

I have multiple popover in my Web App IQ FitFun ( http://iqfitfun.com/IQFitFunHtml/index.html ) and the following code does the trick (JQuery needed).

Take care (order of else if ...), if you have multiple div-layers.

----- Remark:  ----------------------

If you use web app checker:

https://source.tizen.org/compliance/application-compatibility/web-application-checker-user-guide

you will get error message "tizen:setting'', its property ''hwkey-event'' should not exist".

Just ignore, your app is Tizen 2.2 and the checker uses 2.1 (2.2 version is in preparation).

if (appStoreName == APPSTORE_Tizen) {

    document.addEventListener( 'tizenhwkey', function(e) {

        if (e.keyName === 'back') {

            if ($('#fullversion').is(":visible")) {

                // OK button

                game.toggleFullVersion();

                game.startWithFirstPuzzle();

            }

            else if ($('#resetGameProgressConfirm').is(":visible")) {

                // Cancel button

                game.toggleGameprogressConfirm();

                $('#resetGameProgressButton').focus();

            }

            else if ($('#gameprogress').is(":visible")) {

                // Close game progress popover

                game.toggleGameprogress();

            }

            else if ($('#puzzleshortcome').is(":visible")) {

                // Continue button

                game.startWithFirstPuzzle();                

            }

            else if ($('#about').is(":visible")) {

                // Close about popover

                game.toggleAbout();

                setFocusToFirstAnswer();

            }

            else if ($('#explanation').is(":visible")) {

                // Close explanation popover

                game.toggleExplanation();

            }

            else {

                // Exit app

                tizen.application.getCurrentApplication().exit();

            }

        }

        else if (e.keyName === 'menu') {

            // Currently no menu options 

        }

    });

}

I  make  a such game.
I need when you press a button 'back' on the device then user will go to the previous scene , and if it is the first page (level or Layout),user would be exiting  of the game ('exit').
   in principle at tizen sdk it's done in folder  js - main.js and it

var init = function () {
    // TODO:: Do your initialization job
    console.log("init() called");

    // add eventListener for tizenhwkey
    document.addEventListener('tizenhwkey', function(e) {
        if(e.keyName == "back")
            tizen.application.getCurrentApplication().exit();
    });
};

However,C2  ignores it somehow (main.js) , namely probably as follows:
  file index:

// Pause and resume on page becoming visible/invisible
        function onVisibilityChanged() {
            if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)
                cr_setSuspended(true);
            else
                cr_setSuspended(false);
        };
        
        document.addEventListener("visibilitychange", onVisibilityChanged, false);
        document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);
        document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
        document.addEventListener("msvisibilitychange", onVisibilityChanged, false);
        
    </script>

Question - How to make exit of the game on the first page of the game by clicking the back button device, and in other cases would go to the previous page game (Layout)?

Hello Everyone !

First of all thanks everyone to share your knowledge. I am facing a problem regarding back key event like as -

1. I have a "First_Page.html" and my main.js contain backkey listener and have several div behave as page in "First_Page.html". I logically implement scroll view between those pages (div) and the back key navigation working perfectly.

2. Add another "Another_page.html" with simple html code and navigation between "First_Page.html" & "Another_page.html" is just OK. But 

3. Adding another html page "Problem_page.html" having some JS code which will genreate html element in java script and push through document.write.

But now neighter the main.js backkey listerner nor other implementation didnt works for "Problem_page.html". 

Once i get in "Problem_page.html" page i cant come out using back key. I just stuck over on that page. Please help with your knowledge and experience.

Thanks in advance.

Hello,

You can create Tizen Web Project from Template in IDE, and see how it is implemented.