Languages

Menu
Sites
Language
how to add footer and back button

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...

 

Thanks!

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

11 Replies
Raghu Kona
Hi, You can add the default Tizen back button selecting the Tizen WebUI Framework application. Add the "data-add-back-btn" attribute to the page. <div data-role="page" id="mainPage" data-add-back-btn="true"> Regards, Raghu Kona
Josh Dobbs
Thanks for the quick reply. So there's no way to add it into a regular javascript app? Im not using the UI builder
Raghu Kona
UI builder is not required. If you want the Tizen feel, you have to include tizen-web-ui-fw.js and tizen-web-ui-fw-libs.js files in your application. You can get this file, when you create a new application using File -> Other -> Tizen -> Tizen Web Project -> Tizen Web UI Framework -> Any Application Template. Regards, Raghu Kona
Josh Dobbs
I created a new project tizen web ui framework app and i still do not see the back button. Tizen Web IDE - Template - Tizen - Tizen Web UI Framework - Single-Page

Single-Page Application

This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.

Raghu Kona
Add the "data-add-back-btn" attribute to the page. <div data-role="page" id="mainPage" data-add-back-btn="true"> in index.html Regards, Raghu Kona
Josh Dobbs
I have done this but I still do not see the back button
Josh Dobbs
I have updated the first post with the code and a screenshot. Can you please tell me why the back button is not displayed?
Raghu Kona
Hi, I think there is a confusion here, actually the attribute should be added to the whole page, in which the header and footer resides. Please try modifying your code, by adding "data-add-back-btn" to the page div placed immediate next to <body> <div data-role="page"data-add-back-btn="true"> remove the div tag from the footer, I mean (<div data-role="page" id="mainPage" data-add-back-btn="true"/>) part Regards, Raghu Kona
Josh Dobbs
Wow! Yes i was very confused! Thanks for clearing that up! :) It's working now.
Hi, I'm having a similar problem, I have a single html file with multiple "page" div in it. How can I get all of them to have a back button without splitting my file into multiple ones. Here is a snippet of the code used : 
  <div data-role="page" id="home" data-add-back-btn="true">
    <div data-role="header" data-position="fixed"><!--header--></div>
    <div data-role="footer" data-position="fixed"><!--footer--></div>
    <div data-role="content"><!--page content--></div>
  </div>
  <div data-role="page" id="options" data-add-back-btn="true">
    <div data-role="header" data-position="fixed"><!--header--></div>
    <div data-role="footer" data-position="fixed"><!--footer--></div>
    <div data-role="content"><!--page content--></div>
  </div>
Regards,
Josh Dobbs
why would you have multiple page divs in a single file? can you explain why you would do this to help us bette understand and suggest a solution.