how to add footer and back button

BY 11 Jun 2013 Web Application Development

Im developing a simple html5 app (not using the gui designer) and i’m trying to add a footer with the default tizen back button. I have searved through the docs to no avail. can someone provide a link to some sample source.

<UPDATE> Here is the code that I created by following Raghu Kona steps for creating a new application.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="description"

content="A Tizen Web UI FW single-page template generated by Tizen Web IDE" />

<title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework

- Single-Page</title>

<!--NOTE:

        jquery.js and web-ui-fw.js must be included.

        DO NOT REMOVE below code!

    -->

<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>

<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>

<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"

data-framework-theme="tizen-white"></script>

<!--NOTE:

        Additional scripts and css files are to be placed here.

        You can use jQuery namespace($) and all functionalities in jQuery

        in your script.  For example:

            <script src="main.js"></script>

            <link rel="stylesheet" href="my.css">

    -->

<script type="text/javascript" src="./js/main.js"></script>

<link rel="stylesheet" type="text/css" href="./css/style.css" />

</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed">

<h1>Single-Page Application</h1>

</div>

<!-- /header -->

<div data-role="content">

<p>This is a single page boilerplate template that you can copy

to build your first Tizen Web UI Framework page.</p>

</div>

<!-- /content -->

<div data-role="footer" data-position="fixed">

<div data-role="page" id="mainPage" data-add-back-btn="true"/>

<!-- /footer -->

</div>

<!-- /page -->

</body>

</html>

And here is a screenshot so that you can see there is no back button…