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?
Need more information on how to use UI builder ? see help, Tizen Web App Programming
To add Cordova: in app.xml editor
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