2 Tizen Web App Dev Tizen Studio

Developing
Tizen Web Applications
* This document is based on Tizen Studio

Table of Contents
Tizen Web Applications Overview 3

Introduction 4
Creating Tizen Web Project 6
Files in Tizen Web Project
8
Implementing Tizen Web Applications 25

Implementation Plan 27
Stage 1: Digital Watch UI Layout 28
Stage 2: Digital Watch Functionality 45
Stage 3: Battery UI Layout 61
Stage 4: Battery Functionality 79
Tizen Web Applications Overview
Introduction
Web applications involve the standards for building and rendering web
pages, such as HTML, CSS, and JavaScript.
Structure
Style and
layout
Interaction
and functionalities
4
Introduction
Web applications offer a range of benefits. It is a perfect way to start
developing Tizen applications.
Benefits of Web Applications
Easy to learn
Compatible across multiple mobile and wearable platforms
Easy to maintain
However, there are still some limitations of Web applications over native
applications. Creation of native applications is discussed later in this tutorial.
Limitations of Web Applications
Relatively low performance

Limited access to the mobile and wearable devices features
5
Creating Tizen Web Project
In the Tizen IDE, click File > New > Tizen Project.
6
In the project wizard pop-up window, select the Template, then
select profile and versions: WEARABLE v2.3.2 application.
7
Select Web Application and click Next. Then select the application template.
Running the
Creating the Generating the Creating the
Application on the
Application Project Author Certificate Emulator Instance
Emulator
8
Change the project name, if you want.
Click More properties, if you want to change more properties.
Leave all other fields in the Project Wizard to their default values, and click
Finish.
Running the
Creating the Generating the Creating the
Application on the
Application Project Author Certificate Emulator Instance
Emulator
9
The following figure illustrates the basic structure of a Tizen Web application.
CSS3
JavaScript Tizen Web app

configuration file
HTML5
The following pages describe each file type in detail.
10
The config.xml file is a Web-standard deployment descriptor for the Web
application. It defines everything about the application that is required when
the application is installed and launched.
11
The Tizen SDK automatically fills in the general information with default
values, and you can change the values using the configuration editor if
necessary.
Web app identifier Start-up file

* Do not change this value (The file must be an
.html file in the project
folder)
Application name which Current version
the app is installed as
Custom icon
(It can be any .png file)
12
You can set the application configuration with various options in each tab.
Overview: Define and edit general information, such as the application name
and icon.
Features: Declare the required software and hardware features.
Privileges: Specify the APIs or API groups accessed and used.
Policy: Request network resource permissions when required to access
external network resources.
Localization: Provide localization support for name, description, and license
elements of the config.xml file.
Preferences: Declare the name-value pairs which can be set or retrieved.
Tizen: Edit the Tizen schema extension properties.
Source: View and edit the code of the config.xml file.
13
The index.html file contains source codes for the structure of the
application view.
14
HTML stands for Hyper Text Markup Language, and the HTML documents are
made up of HTML elements, which are written with a start tag, an end tag,
and contents in between.
<tagname>contents</tagname>
Everything from the start tag to the end tag is called an HTML element.
HTML elements can have attributes, which provide additional information

about the elements.
<tagname attributename=value>contents</tagname>
The list of standard HTML elements is provided by the W3C Working Group:
https://www.w3.org/TR/html-markup/elements-by-function.html
15
The following example explains the elements in a Web applications
index.html file:
index.html
<!DOCTYPE html> The DOCTYPE declaration
<html>
defines the document type
<head>
<meta charset="utf-8" /> to be HTML.
<meta name="viewport"
content="width=device-width, initial-
scale=1.0, maximum-scale=1.0">
The text between <html>
<meta name="description" and </html> describes
content="Tizen Wearable Web Basic Template" />
the entire HTML document
<title>Tizen Wearable Web Basic Application</title>
<link rel="stylesheet" type="text/css" The text between <head>

href="css/style.css" />
<script src="js/main.js"></script>
and </head> provides
</head> information about the
<body> document.
<div id="main" class="page">
<div class="contents">
<span id="content-text">Basic</span> The text between <body>
</div> and </body> describes
</div>
</body> the visible page content.
</html>
16
The HTML code on the left represents the view on the right correspondingly.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
content="width=device-width, initial-
scale=1.0, maximum-scale=1.0">
<meta name="description"
content="Tizen Wearable Web Basic Template" />
<link rel="stylesheet" type="text/css"

href="css/style.css" />
</head>
<body>
<span id="content-text">Basic</span>
</div>
</div>
</body>
</html>
17
The css/style.css file contains the source code for specifying the layout
and the styling of the application views.
18
The CSS file is connected to the HTML file using a <link> tag in the <head>
element.
css/style.css
html,
body {
width: 100%;
height: 100%;
index.html margin: 0 auto;
<!DOCTYPE html> padding: 0;
<html> background-color: #222222;
color: #ffffff;
<head> }
... .page {
width: 100%;
<link rel="stylesheet" type="text/css" height: 100%;
href="css/style.css" /> display: table;
<script src="js/main.js"></script> }
</head> .contents {
display: table-cell;
<body> vertical-align: middle;
... text-align: center;
</body> -webkit-tap-highlight-color: transparent;
}
</html> #content-text {
font-weight: bold;
font-size: 5em;
}
19
CSS stands for Cascading Style Sheets, and it describes how HTML elements
are displayed on the screen.
The CSS rule-set consists of a selector and a declaration block.
selector {
property: value; /* declaration */
}
CSS selectors are used to select HTML elements based on the elements
name, ID, class, attribute, and more:
The element selectors are written written as element_name {}.
The ID selectors are written as #id_name {} .
The class selectors are written as .class_name {}.
The list of the standard HTML elements is provided in the W3C Wiki page:
https://www.w3.org/community/webed/wiki/CSS/Properties
20
The styling of the HTML elements in the index.html file is described in the
style.css file correspondingly.
css/style.css
index.html html,
<!DOCTYPE html> body {
<html> width: 100%;
height: 100%;
<head> margin: 0 auto;
... padding: 0;
background-color: #222222;
<link rel="stylesheet" type="text/css" color: #ffffff;
href="css/style.css" /> }
<script src="js/main.js"></script> .page {
</head> width: 100%;
height: 100%;
<body> display: table;
<div id="main" class="page"> }
<div class="contents"> .contents {
<span id="content- display: table-cell;
text">Basic</span> vertical-align: middle;
</div> text-align: center;
</div> -webkit-tap-highlight-color:
</body> transparent;
}
</html> #content-text {
font-weight: bold;
font-size: 5em;
}
21
The js/main.js file contains the code for handling the application
functionalities.
22
The JavaScript file is connected to the HTML file using a <script> tag in
the <head> element.
js/main.js
window.onload = function() {
// TODO:: Do your initialization job
index.html // Add eventListener for tizenhwkey

<!DOCTYPE html> document.addEventListener('tizenhwkey',
<html> function(e) {
if (e.keyName === "back") {
<head> try {
...
tizen.application.getCurrentApplication().exit();
<link rel="stylesheet" } catch (ignore) {}
type="text/css }
href="css/style.css" /> });
</head> // Sample code
var mainPage = document.querySelector('#main');
<body>
... mainPage.addEventListener("click", function() {
</body> var contentText =
document.querySelector('#content-text');
</html>
contentText.innerHTML =
(contentText.innerHTML === "Basic") ? "Tizen" :
"Basic";
});
};
23
JavaScript is a programming language, and consists of statements to be
executed by the program.
JavaScript statements, which are separated by semicolons, are typically

composed of values, operators, expressions, keywords, and comments.
JavaScript statements to be executed together can be grouped in code blocks

with curly brackets {}, and the code blocks are called JavaScript functions.
// Sample code
mainPage.addEventListener("click", function() {
var contentText = document.querySelector('#content-text');
contentText.innerHTML = (contentText.innerHTML === "Basic") ?

"Tizen" : "Basic";
});
24
With JavaScript, you can:
Add behavior and user interactions
Load and change contents dynamically
Get access to device-specific features using standard Web APIs or
Tizen Web Device APIs.
For example, the following JavaScript code changes the contents of the
<span> element using the standard Web API method element.innerHTM.
index.html js/main.js
<body> // Sample code
<div id="main" class="page"> var mainPage = document.querySelector('#main');
<div class="contents"> mainPage.addEventListener("click", function()
<span id="content- {
text">Basic</span> var contentText =
</div> document.querySelector('#content-text');
</div> contentText.innerHTML =
</body> (contentText.innerHTML === "Basic") ?
"Tizen" : "Basic";
});
25
The following figure summarizes the interactions between the components:
ADDS STYLE
CALLS CALLS
CALLS
ADDS FUNCTIONALITIES
26
Implementing Tizen Web Applications
Implementing Tizen Web Applications Digital Watch
With the understanding of the basic components of Tizen Web applications,
you can create a simple digital watch application.
28
Implementation Plan
The digital watch application is implemented in 4 stages.
Stage 1 Stage 2 Stage 3 Stage 4

Digital watch Digital watch Battery Battery
user interface functionality user interface functionality
layout layout
Texts W3C Box and Tizen Device

Standard API Background API
29
Stage 1: Digital Watch UI Layout Goal
The goal of Stage 1 is to implement the user interface layout of a digital watch
application using HTML and CSS.
In Stage 1-0, the codes for the implementation are preset.
In Stage 1-1, the layout of the digital watch application is defined

using HTML <div> and <span> elements.
In Stage 1-2, the styling to the HTML elements is added using CSS
properties, including font-size and margin-top.
In Stage 1-3, the stage is summarized.

30
Stage 1-0: Digital Watch UI Layout Pre-setting
Start the implementation by resetting the codes in the Basic template
application (myFirstApp application).
Delete the unnecessary code in the index.html file of the myFirstApp
application.
index.html
<!DOCTYPE html>
<html>
<head>
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Tizen Wearable Web Basic Template" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<span id="content-text">Basic</span> Delete the unnecessary code
</div>
</div>
</body>
</html>
31
Delete the unnecessary code in the style.css file of the myFirstApp
application.
style.css
html,
body {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
color: #ffffff;
}
.page {
width: 100%;
height: 100%;
display: table;
}
.contents {
vertical-align: middle;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
#content-text {
font-weight: bold; Delete the unnecessary code
font-size: 5em;
}
32
Delete the unnecessary code in the main.js file of the myFirstApp
application.
main.js
// Add eventListener for tizenhwkey

document.addEventListener('tizenhwkey', function(e) {
try {
} catch (ignore) {}
}
});
// Sample code
mainPage.addEventListener("click", function() {
var contentText = document.querySelector('#content-text');
contentText.innerHTML = (contentText.innerHTML === "Basic") ? "Tizen" : "Basic";

});
};
Delete the unnecessary code
33
Stage 1-1: Digital Watch UI Layout index.html
Plan how to put each element in the index.html file.
You need an area for the time contents and another area for the date
contents. Use <div> elements to create the areas.
Area for time contents
Area for date contents
Then, you need texts for the hours, the colon, the minutes, the seconds, and
the date. Use <span> elements to create the texts.
Text for hour
Text for colon
Text for minute
Text for second

Text for date
34
Stage 1-1: Digital Watch UI Layout index.html
Put all elements in the index.html file and fill in the contents with pseudo
data.
index.html
...
<body>
<div id="time-area" class="contents"> #time- #date-
<span id="hour-text">00</span> area area
<span id="colon-text">:</span>
<span id="minute-text">00</span>
<span id="second-text">00</span>
</div>
<div id="date-area" class="contents">
<span id="date-text">Mon 00 Jan</span>
</div>
</div>
</body> Add new <div> and <span> elements
...
To learn more about the HTML <div> element, see:

http://www.w3schools.com/tags/tag_div.asp
To learn more about the HTML <span> element, see:
http://www.w3schools.com/tags/tag_span.asp
35
Stage 1-2: Digital Watch UI Layout style.css
In this stage, add styling to the HTML elements using the CSS properties.
To check how the elements are displayed right away, you can test the
application in the Web Inspector, which is a debugging tool provided for Web
applications.
To test the app in Web Inspector:

1. Right-click on the project name.
2. Select Debug As > Tizen Web Application.
36
Stage 1-2: Digital Watch UI Layout Debugging
In the Web Inspector, select an element and its placement is shown in the
emulator correspondingly.
37
Try adjusting the font size of <span id=hour-text">00</span>.
1. Select the element in the inspector.
Select the element

in the Web Inspector
38
2. Add font-size: 100px; to element.style on the right column.
Add font-size: 100px;

to element.style.
The size of the font

is changed.
39
The next step is to actually apply the change in the style.css file.
style.css
...
.contents {
...
}
#hour-text {
font-size: 100px; Apply the change.
}
You can see that the <div> elements are aligned horizontally.
This is because the CSS display property of the <div> elements is set to
table-cell.
Next, change the code in the style.css file to align the elements vertically.
To learn more about the CSS font-size property, see:

http://www.w3schools.com/cssref/pr_font_font-size.asp
40
Change the codes in the style.css file to change the display property of
the <div> elements with a class name contents.
style.css
/* old */
.contents {
text-align: center;
}
Change the value of .contents
/* new */ selectors display property
.contents {
display: block;
from table-cell to block.
text-align: center;
}
The texts are no longer aligned vertically in the middle, because the
vertical-align property does not work with the block display.
To learn more about the CSS display property, see:

http://www.w3schools.com/css/css_display_visibility.asp
41
Add all the necessary styling in the style.css file.
style.css
...
#hour-text {
...
}
#time-area { Add styling to the texts
margin-top: 25%;
}
#second-text, #date-text {
font-size: 40px;
}
#colon-text, #minute-text {
font-size: 100px;
}
The Stage 1 is completed, and the layout has been created.
To learn more about the CSS margin property, see:

http://www.w3schools.com/css/css_margin.asp
42
Stage 1-3: Digital Watch UI Layout Summary
By the end of Stage 1, your application should appear as in the following
figure:
43
Your index.html file should appear as in the following example:
index.html
<!DOCTYPE html>
<html>
<head>
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

</head>
<body>
<div id="time-area" class="contents">
<span id="hour-text">00</span>
</div>
</div>
</div>
</body>
</html>
44
Your style.css file should appear as in the following example:
style.css
html, .contents {
body { display: block;
width: 100%; vertical-align: middle;
height: 100%; text-align: center;
margin: 0 auto; -webkit-tap-highlight-color:
padding: 0; transparent;
background-color: #222222; }
color: #ffffff; #hour-text {
} font-size: 100px;
.page { }
width: 100%; #time-area {
height: 100%; margin-top: 25%;
display: table; }
} #second-text, #date-text {
font-size: 40px;
}
The code continues on the right #colon-text, #minute-text {
font-size: 100px;
}
45
Lastly, your main.js file should appear as in the following example:
main.js

try {
} catch (ignore) {}
}
});
};
46
Stage 2: Digital Watch Functionality Goal
The goal of Stage 2 is to implement the functionality of the digital watch
using JavaScript and W3C standard Web API.
In Stage 2-1, create a changeHTML() method using the

document.getElementById() method and element.innerHTML.
In Stage 2-2, create a changeTime() method using the W3C Date() API.
In Stage 2-3, create a changeDate() method using the W3C Date() API.

47
Stage 2-1: Digital Watch Functionality changeHTML()
Take a look at the initial JavaScript codes in the main.js file.
The code in the window.onload method is executed when the window is
loaded, which is when the application is launched.
main.js

try {
} catch (ignore) {}
}
});
};
The file contains a code block which closes the application when the back key
is pressed, but do not worry about the code details for now.
To learn more about the JavaScript onload event, see:

http://www.w3schools.com/jsref/event_onload.asp
48
Stage 2-1: Digital Watch Functionality changeHTML()
Remember that you can change the HTML contents using JavaScript?
Implement a simple method which grabs an HTML element and changes its
content. The new method is named changeHTML().
The method is added above the window.onload method.
main.js Grabs a HTML element with the id

function changeHTML(elemId, newContent) { elemId
var htmlElem = document.getElementById(elemId); and stores the element object
htmlElem.innerHTML = newContent; in the variable htmlElem
}
Changes the content of
... the htmlElem element with
};
newContent
To learn more about the document.getElementById() method:

http://www.w3schools.com/jsref/met_document_getelementbyid.asp
To learn more about element.innerHTML:

http://www.w3schools.com/jsref/prop_html_innerhtml.asp
49
Stage 2-2: Digital Watch Functionality changeTime()
Now, change the contents with real data.
Create a new changeTime() method for changing the texts for the current
hour and minute using the W3C Standard Date() API.
main.js
function changeHTML(elemId, newContent) {
...
}
function changeTime() { Get the values of current hour, minute, and

var date = new Date(),
currentHour = date.getHours(), second, and store the value in the variables.
currentMinute = date.getMinutes(),
currentSecond = date.getSeconds();
changeHTML("hour-text", currentHour); Call the changeHTML method

changeHTML("minute-text",currentMinute);
changeHTML("second-text",currentSecond); with the variables.
}
...
};
To learn more about the W3C Date() API:

http://www.w3schools.com/js/js_date_methods.asp
50
Then, call the changeTime() method in the window.onload method so that
it gets executed when the application is launched.
Moreover, call the method inside the setInterval() method so that the
method gets executed every 1 second as the time changes.
main.js
...
setInterval(function() {
changeTime();
}, 1000);
...
};
To learn more about the setInterval() method, see:

http://www.w3schools.com/jsref/met_win_setinterval.asp
51
Modify the changeTime() method so that the hour text, the minute text, and
the second text are always shown as double-digit numbers.
main.js
function changeTime() {
...
// Make the hour, minute, and second texts show as

// double-digit numbers
if (currentHour < 10) {
changeHTML("hour-text", "0" + currentHour);
} else {
changeHTML("hour-text", currentHour);
}
if (currentMinute < 10) {

changeHTML("minute-text","0" + currentMinute);
} else {
changeHTML("minute-text",currentMinute);
}
if (currentSecond < 10) {

changeHTML("second-text","0" + currentSecond);
} else {
changeHTML("second-text",currentSecond);
}
changeHTML("hour-text", currentHour(); Delete the

changeHTML("minute-text",currentMinute();
changeHTML(second-text",currentSecond(); previous code.
} 52
Stage 2-3: Digital Watch Functionality changeDate()
The next step is to create a new changeDate() method for changing the
texts for the current month, date, and day using the W3C Standard Date()
API.
main.js
...
Get the values of
...
current month, date and day
} and store the value in the variables.
function changeDate() {
var date = new Date(), Combine the values
currentMonth = date.getMonth(),
currentDate = date.getDate(),
of day, date and
currentDay = date.getDay(), month together to
strDate ="";
make a string in
strDate = currentDay + " " + currentDate + " " + currentMonth; Mon 00 Jan
changeHTML("date-text", strDate);
format
} and store the value
... Call the changeHTML method with the strDate variable. in strDate
variable.
To learn more about the W3C Date() API, see:

http://www.w3schools.com/js/js_date_methods.asp
53
Call the changeDate() method in the window.onload method so that it gets
executed when the application is launched.
main.js
...
changeTime();
}, 1000);
changeDate(); Call the changeDate()

... method when the window is
};
loaded
The text for the date does not appear as we expected because the W3C
Date() API returns data for the month and day as an integer value.
Therefore, additional code is required for converting the integer values to the
corresponding string values, such as for month data, converting 0 to Jan.
54
Modify the changeDate() method so that the integer values for month and
day are converted to the corresponding string values.
main.js
var date = new Date(), Add arrays for string values
currentMonth = date.getMonth(), of month and day
currentDay = date.getDay(),
strDate ="",
arrayMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
arrayDay = ["Sun", "Mon", "Tue", "Wed",
"Thu", "Fri", "Sat"];
currentMonth = arrayMonth[currentMonth]; Reset the variables

currentDay = arrayDay[currentDay]; to string values
strDate = currentDay + " " + currentDate + " " +
currentMonth;
}
The Stage 2 is now completed, and the functionality

is implemented. 55
Stage 2-4: Digital Watch Functionality Summary
figure:
56
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0">

</head>
<body>
</div>
</div>
</div>
</body>
</html>
57
style.css
html, .contents {
body { display: block;
width: 100%; vertical-align: middle;
height: 100%; text-align: center;
margin: 0 auto; -webkit-tap-highlight-color:
padding: 0; transparent;
color: #ffffff; #hour-text {
} font-size: 100px;
.page { }
width: 100%; #time-area {
height: 100%; margin-top: 25%;
display: table; }
} #second-text, #date-text {
font-size: 40px;
}
The code continues on the right. #colon-text, #minute-text {
font-size: 100px;
}
58
main.js
var htmlElem = document.getElementById(elemId);
htmlElem.innerHTML = newContent;
}
The code continues on the next page.
59
main.js
currentHour = date.getHours(),
// Make the hour, minute, and second texts show as double-digit numbers
} else {
}

changeHTML("minute-text", "0" + currentMinute);
} else {
changeHTML("minute-text", currentMinute);
}

changeHTML("second-text", "0" + currentSecond);
} else {
changeHTML("second-text", currentSecond);
}
}

60
main.js
strDate ="",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
arrayDay = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
currentMonth = arrayMonth[currentMonth];
currentDay = arrayDay[currentDay];
strDate = currentDay + " " + currentDate + " " + currentMonth;
}
61
main.js
changeTime();
}, 1000);
changeDate();

try {
} catch (ignore) {}
}
});
};
62
Stage 3: Battery UI Layout Goal
The goal of Stage 3 is to implement the user interface layout for the battery,
and add a background image to the digital watch application using HTML and
CSS.
In Stage 3-1, define the layout of the digital watch application using
the HTML <div> elements.
In Stage 3-2, add styling to the HTML elements using CSS properties,
including a border and a background.
63
Stage 3-1: Battery UI Layout index.html
Plan how to place each element in the index.html file .
You need to create an area using <div> elements for the container of the
battery element.
Area for the battery container
You need to create another area using <div> elements inside the container
area for the actual battery element, which is filled accordingly with the battery
level.
Area for the battery
64
Stage 3-1: Battery UI Layout index.html
Add a new <div> element with a battery-container ID on top of the
<div> element with a time-area ID, and add another <div> element
with a battery-fill ID inside the new <div> element.
index.html
...
<div id="battery-container">
<div id="battery-fill"></div>
</div>
</div>
</div>
</div>
...
At the moment, you cannot see any change on the screen because the
<div> elements are empty. Next, add some styling to the <div> elements
so that it appears properly as a battery element.
65
Stage 3-2: Battery UI Layout style.css
Add styling for the <div> element with the battery-container ID.
style.css
...
#colon-text, #minute-text {
font-size: 100px;
}
#battery-container {
Add styling for the #battery-
position: absolute;
width: 10%; container.
height: 5%;
top: 20%;
left: 63%;
border: solid 2px white;
}
To learn more about the CSS position property, see:

http://www.w3schools.com/css/css_positioning.asp
To learn more about the CSS border property, see:
http://www.w3schools.com/css/css_border.asp
66
Also, add styling for the <div> element with the battery-fill ID.
style.css
...
#battery-container {
position: absolute;
width: 10%;
height: 5%;
top: 20%;
left: 63%;
border: solid 2px white;
}
#battery-fill {
width: 50%; Add styling for the
height: 100%;
background-color: white; #battery-fill.
}
To learn more about the CSS background-color property, see:

http://www.w3schools.com/cssref/pr_background-color.asp
67
Stage 3-2: Battery UI Layout Adding Files
Finally, add the background image.
To add a background image for the digital watch, copy the local image file
to the project in the Tizen IDE.
First, create a new folder by right-clicking the project name, and selecting
New > Folder.
68
When the New Folder pop-up appears, fill in the folder name as image, and
click Finish.
The new folder has been created in the Project Explorer.
69
Copy the image file from a local directory to the project folder by dragging
and dropping the file to the image folder in Project Explorer.
You can use any image file from your local directory. Just rename the file as
bg.jpg
70
When the File Operation pop-up appears, select Copy files, and click OK.
The image file (bg.jpg) has been added in the Project Explorer.
71
In the style.css file, add the background image for the html, body
element.
style.css
html,
body {
... Add the background image.
background-image: url('../image/bg.jpg');
background-size: 100%;
color: #ffffff;
}
...
The Stage 3 is now completed, and the battery element
and background image are implemented.
To learn more about the CSS background-image property,

see: http://www.w3schools.com/cssref/pr_background-
image.asp
To learn more about the CSS background-size property,
see:
http://www.w3schools.com/cssref/css3_pr_background-
size.asp
72
style.css
Stage 3-3: Battery UI Layout Summary
figure:
73
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

</head>
74
index.html
<body>
</div>
</div>
</div>
</div>
</body>
</html>
75
style.css
html, #time-area {
body { margin-top: 25%;
width: 100%; }
height: 100%;
margin: 0 auto; #second-text, #date-text {
padding: 0; font-size: 40px;
background-image:
url('../image/bg.jpg'); #colon-text, #minute-text {
background-size: 100%; font-size: 100px;
color: #ffffff; }
} #battery-container {
.page { position: absolute;
width: 100%; width: 10%;
height: 100%; height: 5%;
display: table; top: 20%;
} left: 63%;
.contents { border: solid 2px white;
display: block; }
text-align: center; #battery-fill {
-webkit-tap-highlight-color: width: 50%;
transparent; height: 100%;
} background-color: white;
#hour-text { }
font-size: 100px;
}
The code continues on the right 76

main.js
}
77
main.js
} else {
}

} else {
}

} else {
}
}

78
main.js
strDate ="",
}
79
main.js
changeTime();
}, 1000);
changeDate();

try {
} catch (ignore) {}
}
});
};
80
Stage 4: Battery Functionality Goal
The goal of Stage 4 is to implement the functionality of the battery indicator
using JavaScript and the Tizen Device API.
In Stage 4-1, declare a privilege in the config.xml file to allow the

Tizen System Information API to read system information.
In Stage 4-2, create a changeBattery() method using the Tizen

System Information API.
81
Stage 4-1: Battery Functionality config.xml
Tizen provides API-level access control for security-sensitive operations
which, if not used correctly, can harm user privacy and system stability.
Therefore, applications that use such sensitive APIs must declare the
required privileges in the config.xml file.
To use the Tizen System Information API for getting the data on the battery
level, first learn how to declare the privilege.
Open the config.xml file by double-clicking it in the Project Explorer.
To learn more about Tizen Security and API Privileges, see:

https://developer.tizen.org/development/getting-started/web-
application/understanding-tizen-programming/security-and-api-privileges
82
Select the Privileges tab on the bottom of the config.xml page.
83
In the Privileges tab, click + (Add).
In the Add privilege pop-up, select the textbox for Internal.
84
Enter system in the textbox, select
http://tizen.org/privilege/system in the list, and click Finish.
85
The http://tizen.org/privilege/system privilege has been added.
Press Ctrl + S to save the change in the config.xml file.
You can double-check the change in the source code.

Select the Source tab on the bottom of the config.xml page.
86
A new line for tizen:privilege has been added in the config.xml file.
You are now ready to use the Tizen System Information API.
87
Stage 4-2: Battery Functionality changeBattery()
Implement a function which gets the battery level of the system using the
Tizen System Information API and changes the battery indicator accordingly.
main.js
...
...
}
function changeBattery() {
function onSuccessCallback(battery) {
document.getElementById("battery-fill").style.width = (battery.level * 100) + "%";
}
function onErrorCallback(error) {
alert("Not supported: " + error.message);
}
tizen.systeminfo.addPropertyValueChangeListener("BATTERY", onSuccessCallback,
onErrorCallback);
}
...
};
To learn more about the Tizen System Information API, see:

https://developer.tizen.org/community/tip-tech/system-information-api-
guide
88
Call the changeBattery() method in the window.onload method so that it
gets executed when the application is launched.
main.js
...
changeTime();
}, 1000);
changeDate(); Call the changeBattery

changeBattery();
... method when the window is
}; loaded.
You can use the Event Injector in the Emulator Control Panel to artificially
create and use any data, including the battery state and level, required
during application execution.
Check if the changeBattery() method is working properly.

89
Right-click on the emulator screen to view more options, and click Control
Panel.
90
In the Emulator Control Panel, select Battery under Event Injector Category.
91
Try adjusting the battery level, and confirm that the battery indicator of the
digital watch application changes accordingly.
The Stage 4 is completed and the battery functionality is implemented.

92
Stage 4-3: Battery Functionality Summary
figure:
93
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0">

</head>
94
index.html
<body>
</div>
</div>
</div>
</div>
</body>
</html>
95
style.css
html, #time-area {
body { margin-top: 25%;
width: 100%; }
height: 100%;
margin: 0 auto; #second-text, #date-text {
padding: 0; font-size: 40px;
background-image:
url('../image/bg.jpg'); #colon-text, #minute-text {
background-size: 100%; font-size: 100px;
color: #ffffff; }
} #battery-container {
.page { position: absolute;
width: 100%; width: 10%;
height: 100%; height: 5%;
display: table; top: 20%;
} left: 63%;
.contents { border: solid 2px white;
display: block; }
text-align: center; #battery-fill {
-webkit-tap-highlight-color: width: 50%;
transparent; height: 100%;
} background-color: white;
#hour-text { }
font-size: 100px;
}
The code continues on the right. 96

main.js
}
97
main.js
} else {
}

} else {
}

} else {
}
}

98
main.js
strDate ="",
}
99
main.js
function changeBattery() {
function onSuccessCallback(battery) {
document.getElementById("battery-fill").style.width = (battery.level * 100) + "%";
}
function onErrorCallback(error) {
alert("Not supported: " + error.message);
}
tizen.systeminfo.addPropertyValueChangeListener("BATTERY", onSuccessCallback,
onErrorCallback);
}
100
main.js
changeTime();
}, 1000);
changeDate();

try {
} catch (ignore) {}
}
});
};
101

2 Tizen Web App Dev Tizen Studio

Uploaded by

Copyright:

Available Formats

2 Tizen Web App Dev Tizen Studio

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2 Tizen Web App Dev Tizen Studio

Uploaded by

Copyright:

Available Formats

Developing

Tizen Web Applications

* This document is based on Tizen Studio

Tizen Web Applications Overview 3

Implementing Tizen Web Applications 25

Benefits of Web Applications

Limitations of Web Applications

Relatively low performance

JavaScript Tizen Web app

The following pages describe each file type in detail.

Web app identifier Start-up file

HTML elements can have attributes, which provide additional information

<link rel="stylesheet" type="text/css" The text between <head>

<title>Tizen Wearable Web Basic Application</title>

<link rel="stylesheet" type="text/css"

The CSS rule-set consists of a selector and a declaration block.

index.html // Add eventListener for tizenhwkey

JavaScript statements, which are separated by semicolons, are typically

JavaScript statements to be executed together can be grouped in code blocks

contentText.innerHTML = (contentText.innerHTML === "Basic") ?

Stage 1 Stage 2 Stage 3 Stage 4

Texts W3C Box and Tizen Device

In Stage 1-0, the codes for the implementation are preset.

In Stage 1-1, the layout of the digital watch application is defined

In Stage 1-3, the stage is summarized.

<title>Tizen Wearable Web Basic Application</title>

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

// Add eventListener for tizenhwkey

contentText.innerHTML = (contentText.innerHTML === "Basic") ? "Tizen" : "Basic";

Delete the unnecessary code

Area for time contents

Area for date contents

Text for second

To learn more about the HTML <div> element, see:

To test the app in Web Inspector:

1. Select the element in the inspector.

Select the element

Add font-size: 100px;

The size of the font

To learn more about the CSS font-size property, see:

To learn more about the CSS display property, see:

The Stage 1 is completed, and the layout has been created.

To learn more about the CSS margin property, see:

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

// Add eventListener for tizenhwkey

In Stage 2-1, create a changeHTML() method using the

In Stage 2-4, the stage is summarized.

// Add eventListener for tizenhwkey

To learn more about the JavaScript onload event, see:

main.js Grabs a HTML element with the id

To learn more about the document.getElementById() method:

To learn more about element.innerHTML:

function changeTime() { Get the values of current hour, minute, and

changeHTML("hour-text", currentHour); Call the changeHTML method

To learn more about the W3C Date() API:

To learn more about the setInterval() method, see:

// Make the hour, minute, and second texts show as

if (currentMinute < 10) {

if (currentSecond < 10) {