JoaoGFarias/interface.html

## interface.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="A single-page template generated by Tizen Web IDE"/>

    <title>HTMl 5 - JSon - Test</title>

    <link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css"/>
    <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
    <div data-role="page" id = "homePage" data-theme = "a" >
        <div data-role="header" data-position="fixed" data-tap-toggle="false" >
            <h1>HTMl 5 - JSon - Test </h1>
        </div><!-- /header -->

      <!-- Here is the main code of the interface
            We have three inputs, one for the key and two values
            The localStorageExample calls the storeAndRetrieve
            Javascript function, passing these arguments-->

		<form>
			<label for="key">Key:</label> <input type = "text" id="formKey" name="keyValue" />
	        <label for="value1">Value 1:</label> <input type = "text" id="formValue1" name="value1" />
	        <label for="value2">Value 2:</label> <input type = "number" id="formValue2" name="value2" />

	        <input  type="button"
	            			name = "localStorageExample"
	            			id="storeAndRetrieveButton"
	            			onclick="storeAndRetrieve(this.form.keyValue.value,this.form.value1.value,this.form.value2.value)"
	            			value = "Store and Retrieve Data"/>

        <!-- The JS will put its results here -->
        <div id="response" style="text-align:center"></div>
		</form>
        <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
            <h4>HTMl 5 - JSon - Test - João Farias</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>
</html>

## localStorageLogic.js
// Tizen default functions

var backEventListener = null;

var unregister = function() {
    if ( backEventListener !== null ) {
        document.removeEventListener( 'tizenhwkey', backEventListener );
        backEventListener = null;
        window.tizen.application.getCurrentApplication().exit();
    }
}

//Initialize function
var init = function () {
    // register once
    if ( backEventListener !== null ) {
        return;
    }

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

    var backEvent = function(e) {
        if ( e.keyName == "back" ) {
            try {
                if ( $.mobile.urlHistory.activeIndex <= 0 ) {
                    // if first page, terminate app
                    unregister();
                } else {
                    // move previous page
                    $.mobile.urlHistory.activeIndex -= 1;
                    $.mobile.urlHistory.clearForward();
                    window.history.back();
                }
            } catch( ex ) {
                unregister();
            }
        }
    }

    // add eventListener for tizenhwkey (Back Button)
    document.addEventListener( 'tizenhwkey', backEvent );
    backEventListener = backEvent;
};

$(document).bind( 'pageinit', init );
$(document).unload( unregister );
// End of tizen defaults functions


// Here is the function called by the HTML
function storeAndRetrieve(key,val1,val2){

	// Stores a javascript object using HTML5 Local Storage
	// JSON is used to serialization

	var obj = [val1,val2];
	localStorage[key] = JSON.stringify(obj);

	//You could use the setItem method
	//localStorage.setItem("key",  JSON.stringify(obj));

	var storedData = localStorage[key];

		var stored = JSON.parse(storedData);
		//Uses the DOM to put the results on the HTML
		document.getElementById('response').innerHTML = "Value 1: " + stored[0] + " Value 2: " + stored[1];


}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<meta name="description" content="A single-page template generated by Tizen Web IDE"/>

	<title>HTMl 5 - JSon - Test</title>

	<link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css"/>
	<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
	<script type="text/javascript" src="./js/main.js"></script>
	<link rel="stylesheet" href="./css/style.css" />
	</head>

	<body>
	<div data-role="page" id = "homePage" data-theme = "a" >
	<div data-role="header" data-position="fixed" data-tap-toggle="false" >
	<h1>HTMl 5 - JSon - Test </h1>
	</div><!-- /header -->

	<!-- Here is the main code of the interface
	We have three inputs, one for the key and two values
	The localStorageExample calls the storeAndRetrieve
	Javascript function, passing these arguments-->

	<form>
	<label for="key">Key:</label> <input type = "text" id="formKey" name="keyValue" />
	<label for="value1">Value 1:</label> <input type = "text" id="formValue1" name="value1" />
	<label for="value2">Value 2:</label> <input type = "number" id="formValue2" name="value2" />

	<input type="button"
	name = "localStorageExample"
	id="storeAndRetrieveButton"
	onclick="storeAndRetrieve(this.form.keyValue.value,this.form.value1.value,this.form.value2.value)"
	value = "Store and Retrieve Data"/>

	<!-- The JS will put its results here -->
	<div id="response" style="text-align:center"></div>
	</form>
	<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
	<h4>HTMl 5 - JSon - Test - João Farias</h4>
	</div><!-- /footer -->
	</div><!-- /page -->
	</body>
	</html>
	// Tizen default functions

	var backEventListener = null;

	var unregister = function() {
	if ( backEventListener !== null ) {
	document.removeEventListener( 'tizenhwkey', backEventListener );
	backEventListener = null;
	window.tizen.application.getCurrentApplication().exit();
	}
	}

	//Initialize function
	var init = function () {
	// register once
	if ( backEventListener !== null ) {
	return;
	}

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

	var backEvent = function(e) {
	if ( e.keyName == "back" ) {
	try {
	if ( $.mobile.urlHistory.activeIndex <= 0 ) {
	// if first page, terminate app
	unregister();
	} else {
	// move previous page
	$.mobile.urlHistory.activeIndex -= 1;
	$.mobile.urlHistory.clearForward();
	window.history.back();
	}
	} catch( ex ) {
	unregister();
	}
	}
	}

	// add eventListener for tizenhwkey (Back Button)
	document.addEventListener( 'tizenhwkey', backEvent );
	backEventListener = backEvent;
	};

	$(document).bind( 'pageinit', init );
	$(document).unload( unregister );
	// End of tizen defaults functions


	// Here is the function called by the HTML
	function storeAndRetrieve(key,val1,val2){

	// Stores a javascript object using HTML5 Local Storage
	// JSON is used to serialization

	var obj = [val1,val2];
	localStorage[key] = JSON.stringify(obj);

	//You could use the setItem method
	//localStorage.setItem("key", JSON.stringify(obj));

	var storedData = localStorage[key];

	var stored = JSON.parse(storedData);
	//Uses the DOM to put the results on the HTML
	document.getElementById('response').innerHTML = "Value 1: " + stored[0] + " Value 2: " + stored[1];


	}