TizenWebUI Sample version 1

this example is based on the multiple pages Tizen Web UI FrameWork with UIBuilder.

it is adding Cordova using a “cordova” Subfolder that holds codova: (other options are possible)

/cordova codova.js cordova-tizen.css /sounds beep.wav

/page holds two pages defined by the templates page1 and page 2

inside pages , only page1.js and pages2.js are editable files others are generated by the UI Builder page editor of TIZEN SDK IDE (eclipse)

note: page1.page and page2.page are actually xml file that holds data generated by the editor and used to generate other files. the SDJK is presenting is as a kind of folder on the Project Files view of Eclipse IDE

/tizen-ui-builder-fw /tizen-web-ui-fw

tizen web and ui builder frameworks

/app.xml a cluster file shown as a folder the xml file is holding data generated by the app editor and used to generate other app related files app.js is the only editable files

What does the sample do?

• it gets the battery level
• on the two pages a button is showing as its title the battery status.
• when the button is tapped , callback are registered on Cordova battery status events
• it uses global variable in app.js

Need more information on how to use UI builder ? see help, Tizen Web App Programming

To add Cordova: in app.xml editor

• add a new library and select cordova.js
• add a new stylesheet and select cordova-tizen.css

In app.js :

app.onload = function() { // TODO:: Do your app initialization job console.log(“loaded”);

// Initialize function called when page loading is finished
document.addEventListener("deviceready", function() {
	gAppDeviceReady = true;
    console.log("Device = " + device.platform + ", Version = " + device.version);
}, false);

window.setTimeout(function() {
    if (!gAppDeviceReady) {
        alert("Cordova initialization failed !!!");
    }
}, 1000);

};

Extract of the app.html file generated , to show the JavaScript Lib and the Style Sheets sections :

<!-- Javascripts -->

<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>
<script src="./tizen-ui-builder-fw/page-system.js"></script>
<script src="./app.managed.js"></script>
<script src="page/page1.managed.js"></script>
<script src="page/page1.js"></script>
<script src="page/page2.managed.js"></script>
<script src="page/page2.js"></script>
<script src="./tizen-ui-builder-fw/app-entry.js"></script>
<script src="./cordova/cordova.js"></script>
<script src="./app.js"></script>

<!-- Style sheets -->

<link rel="stylesheet" type="text/css" href="./cordova/cordova-tizen.css">
<link rel="stylesheet" type="text/css" href="./app.css">

Last but not least this is the extract of project privileges in config.xml <tizen:privilege name=“http://tizen.org/privilege/application.launch”/> <tizen:privilege name=“http://tizen.org/privilege/contact.read”/> <tizen:privilege name=“http://tizen.org/privilege/contact.write”/> <tizen:privilege name=“http://tizen.org/privilege/filesystem.read”/> <tizen:privilege name=“http://tizen.org/privilege/filesystem.write”/> <tizen:privilege name=“http://tizen.org/privilege/unlimitedstorage”/> <tizen:privilege name=“http://tizen.org/privilege/setting”/> <tizen:privilege name=“http://tizen.org/privilege/package.info”/> <tizen:privilege name=“http://tizen.org/privilege/notification”/> <tizen:privilege name=“http://tizen.org/privilege/system”/> <tizen:privilege name=“http://tizen.org/privilege/content”/> <tizen:privilege name=“http://tizen.org/privilege/content.read”/> <tizen:privilege name=“http://tizen.org/privilege/content.write”/> <tizen:privilege name=“http://tizen.org/privilege/mediacapture”/>
<tizen:privilege name=“http://tizen.org/privilege/application.launch”/>

note: system is needed to get cordova ‘deviceready’ event that is registered in app.onload() function