Essentials of developing_tizen_web_application_en_1.0

Samsung Electronics Co., Ltd.1
Essentials of Developing
Tizen Web Application
for Tizen-based Samsung TV
Version 1.0
2015-05-19

Table of Contents
1. Document History.................................................................................. ３
2. About this document.............................................................................. ４
3. Getting Started ..................................................................................... ５
3.1. Installing Tizen-based Samsung TV SDK .................................................... ５
3.2. Generating Author Certificate ................................................................. ６
3.3. Creating New Project ........................................................................... ６
3.4. Using Emulator ................................................................................... ７
3.5. Differences between Emulator and Simulator for Usage................................. ８
3.6. Using Tizen-based Samsung TV .............................................................. ８
3.7. Structure of Tizen Web App ................................................................... ９
3.8. Features of Tizen-based Samsung TV Web App........................................ １０
4. Developing an App ............................................................................. １１
4.1. Registering Remote Controller Key........................................................ １１
4.2. Set [config.xml] for App with Various Functions........................................ １２
4.3. APIs for VOD Service App................................................................... １５
4.4. APIs for TV Service App ..................................................................... １６
4.5. Other Instructions & Functions ............................................................ １６
4.6. How to Improve App Performance........................................................ １８
5. Releasing Your App............................................................................. ２１
5.1. Procedure of App Release .................................................................. ２１
5.2. Materials for Register your App............................................................ ２１
5.3. App Pre-Test ................................................................................... ２２
5.4. Complete ....................................................................................... ２２

1. Document History
Version Date Contents Author
0.1 2015. 03. 05 Initial version of document. Sukyung Lee
0.2 2015. 03. 31 Add contents Sukyung Lee
0.3 2015. 04. 02 Add contents Sukyung Lee
0.4 2015. 04. 13 Modify contents Sukyung Lee
0.5 2015. 04. 14 Modify contents Sukyung Lee
0.6 2015. 04. 17 Modify and English composition
Sukyung Lee
Hyojin Kim
0.7 2015. 04. 20 Modify spelling Sukyung Lee
0.8 2015. 05. 04 Modify contents
Sukyung Lee
Michal Piotrkowski
0.9 2015. 05. 13 Modify contents
Sukyung Lee
Maria Gorska
1.0 2015. 05. 19 Check whole document
Sukyung Lee
Hyojin Kim

2. About this document
1. This document is for SW developers who have plans to develop web apps for Tizen-
based Samsung TV.
2. This document is clearly dedicated for people with experiences in developing web apps.
To understand Tizen platform and develop web apps, you need to learn the following
sites first.
Tizen Guide
www.tizen.org
www.samsungdforum.com/TizenGuide/?FolderName=tizen2901&FileName=index.html
3. And furthermore, this document builds on VOCs of whole development cycle and
contains things which you can miss from enumerative information.
4. This document covers installing Tizen-based Samsung TV SDK, the structure of an app,
features of a TV, helpful functions and useful APIs. In addition, it helps improving app
performance and releasing on Samsung Apps. Therefore, you can nicely develop Tizen
TV web apps and easily release them.
5. Please note that some contents of this document may not be latest. We strongly
recommend checking the reference URLs provided in each chapter for the most actual
information.

3. Getting Started
3.1. Installing Tizen-based Samsung TV SDK
1. To develop Tizen TV web apps, you need to install a SDK. You can download a SDK
from Samsung Developer Forum site.
SDK Download
www.samsungdforum.com/TizenDevtools/SdkDownload
2. Installing and using a SDK require some conditions.
A. A SDK IDE requires Java Runtime Environment or Java Development Kit in version
8 or higher. From the following site, you can download it.
JDK, JRE Download
www.oracle.com/technetwork/java/javase/downloads/index.html
B. To use a GPU accelerator you should install Intel HAXM(Hardware Accelerated
Execution), otherwise an emulator will not work properly. During installing a SDK,
Intel HAXM should be installed automatically. In case of any errors you can install
manually the following file.
IntelHaxmTizen
For windows 7 (32bit or 64bit)
IntelHaxmTizen.exe
For Mac
IntelHaxmTizen.dmg
C. Because an emulator runs on a virtual machine, you can’t use it in the following
condition. (It is OK to use bootcamp.)
Not Supported Virtualization Programs
Remote Desktop
Virtual Box
VMWare
Parallels(Mac PC)
3. If something is wrong and you can’t use your SDK, please post your questions on SDF
community board.
SDF COMMUNITY
www.samsungdforum.com/SamsungDForum/ForumDashBoard/cd10341507013d28

3.2. Generating Author Certificate
1. All apps must be signed with an author certificate. It is used to identify an app
developer and protect apps from mixing and misusing. It is registered by a SDK
installed on each PC. The following is the guide of registering.
2. On an IDE, click ‘Windows’ and then click ‘Preferences’.
3. Expand ‘Samsung TV SDK’ and then click ‘Security Profiles’.
4. After clicking ‘Add’, input your profile name. And then after clicking ‘Generate’, fill in
data for the author certificate.
5. Click ‘OK’ to complete.
6. After creating the author certificate, please be careful not to lose it. This is the unique
proof for certifying app developer. For this reason, if you lose it, you can’t pass the
process of chapter 5.3 item 4. Ultimately you can’t version up your app.
3.3. Creating New Project
1. If the SDK is installed successfully, you need creating a new project. There are 5 ways to
create a new project.
A. Basic: It is the type of a sample app. So you can figure out the structure of a web
app, key interaction, etc. We recommend checking and analyzing this app before
you start developing your own one.
B. Caph: It is a project based on Caph which is Web UI Framework offered from
Tizen-based Samsung TV. On the following site, you can learn about using Caph.
Caph Guide

www.samsungdforum.com/tizenguide/?Foldername=tizen341&Filename=index.html
C. Empty: It is an empty project.
D. Tizen Web UI Framework: It is a project based on Tizen Web UI Framework. It is
offered from Tizen. On the following site, you can learn about using it.
Tizen Web UI Framework Guide
developer.tizen.org/dev-guide/2.2.1/org.tizen.web.uiwidget.apireference/html/web_ui_framework.htm
E. jQuery Mobile: It is a project based on jQuery Mobile. On the following site, you
can learn about using it.
jQuery Mobile Guide
api.jquerymobile.com/
3.4. Using Emulator
1. Even if you have no Tizen-based Samsung TV, you can run an app by using an
emulator. Please note that an emulator should runs first before running an app. It is
different from other platforms (e.g. Android). The following is way to use an emulator.
2. Run ‘Emulator Manager’ on the bottom left side of an IDE.
3. After clicking ‘Create New’, check the values of CPU VT and GPU fields on the right. If
these values are ‘OFF’ or ‘Disable’, you can’t use an emulator. If it is ‘Disable’, install
Intel HAXM as metioned in chapter 3.1 item 2. If it is ‘OFF’, turn on with clicking the
button.
4. After clicking ‘Confirm’, click ‘▶’ for running an emulator.
5. On ‘Project Explorer’ of an IDE, right-click on the project to open ‘Context Menu’.
6. On ‘Run As’, click ‘1 TV Web Application (Emulator/Device)’ to run the app.
7. As item 6, if you click ‘Debug As’, you can use an emulator with a web inspector.

3.5. Differences between Emulator and Simulator for Usage
1. For usage, if you select an emulator or a simulator, it will help you develop efficiently.
The followings are differences between an emualtor and a simulator.
Emulator Simulator
Describe UI O O (Faster)
Support APIs O △ (Return value is dummy)
2. In case of developing UI, you can use a simulator. After modifying HTML, CSS and etc
files, you can check the UI of an app lightly and quickly with clicking ‘Reload’. Please
refer to the following site.
Tizen TV Web Simulator
www.samsungdforum.com/TizenGuide/?Foldername=tizen2951&Filename=index.html
3. In case of developing functions(APIs), you can use an emulator. An emulator supports
most of APIs and a simulator doesn’t guarantee the result of APIs.
3.6. Using Tizen-based Samsung TV
1. If you have a Tizen-based Samsung TV, you can install an app and run on a TV after a
SDK and TV are remotely connected. The following is way to run an app on a TV.
2. After entering ‘Apps’ on a TV, input combination ‘12345’ by using your remote
controller. And then, you can see the following screen.
3. Set ‘Developer mode’ to ‘On’, input the IP address of your PC and click ‘Confirm’. And
then reboot the TV.
4. Run ‘Remote Device Manager’ next to ‘Emulator Manager’.

5. Click ‘New’, input the name and IP address of the TV and then click ‘Add’.
6. Select the TV which is just created and click ‘Connect’.
7. If you run as metioned in chapter 3.4 item 6, you can check your app on the TV.
3.7. Structure of Tizen Web App
1. Tizen Web App consists of HTML, CSS, JS and [config.xml]. (Please check a basic type
project.)
2. [config.xml] has following items. (Please open [config.xml] and check ‘Source’ Tab.)
A. App ID/Package: It is the unique ID and Package of an app. A package type is
{Random 10 Characters} and an ID type is {Package}.{Project Name}. It is
automatically created when a project is created.
App Id
<tizen:application id=’{Package}.{Project Name}’ … />
Package = {Random 10 Characters}
B. App Version: It is version information of an app. A version type is {0-255}.{0-
255}.{0-65535}.
App Version
<widget … version=’{0-255}.{0-255}.{0-65535}’ … />
C. App Icon: It is the icon of an app which displays on Apps. It consists of the path of
icon image.
App Icon
<icon src=’Icon Path’ />
D. HTML Starting Point: It consists of the path of HTML File to load first when
running an app. By default, it is the path of [index.html] file located in the root
directory, but you can change it to any HTML file within an app.
HTML Starting Point
<content src=’HTML Path’ />
E. Privilege: Because of Tizen Privilege policy, some APIs of Tizen need a privilege
declaration. Also, some APIs of Tizen-based Samsung TV need it.

Privilege
<tizen privilege name=’http://tizen.org/privilege/Privilege Name’ />
<tizen privilege name=’http://developer.samsung.com/privilege/Privilege Name’ />
3.8. Features of Tizen-based Samsung TV Web App
1. Using Remote Controller
Because distance between users and a TV is farther than a mobile, apps should interact
with users having a remote controller. (Of course, apps support a mouse type by a
Smart Controller).
2. UI/UX Requirements
The pose of using a TV is freer than a mobile and a TV input something by a remote
controller. For the reason, an input process should be minimized and you should
consider a UI and UX. You can learn about a UX on the following site.
UX Guide
www.samsungdforum.com/TizenUxGuide/
3. App Resolution
No matter what resolution of Tizen-based Samsung TV, the standard of app resolution
is 1920*1080px and the ratio of that is 16:9. Even if resolution is different from the
standard, the ratio should be kept. Only if you keep the ratio, whitespace and scrollbars
will not appear on a screen when the app is scaled up or down.
4. Tizen TV web app has most of them which general web apps have. You can use web
standard functions: mouse, video tag, animation, VisibilityChange event etc. In addition,
you can use Tizen Web Device APIs and Product APIs supported by Tizen-based
Samsung TV. You can learn about APIs on the following site.
APIs Guide
www.samsungdforum.com/TizenApiGuide/
5. Supported TLS/SSL Version
Between web browsers and web servers, to transmit and receive encrypted information,
Tizen-based Samsung TV supports TLS(Transport Layer Security). The version of TLS
supported is 1.0/1.1/1.2. (SSL(Secure Sockets Layer) is not supported.)

4. Developing an App
4.1. Registering Remote Controller Key
1. As mentioned in chapter 3.8 item 1, an app should be controlled by the KeyCode of a
remote controller. Only if you register the key to use, an app can receive the KeyCode.
2. tizen.tvinputdevice.registerKey
By using the KeyName and the Tizen API, you can register the key. You can get more
information on the following site.
Key Register
tizen.tvinputdevice.registerKey(KeyName);
www.samsungdforum.com/tizenapiguide/?Foldername=tizen3331&Filename=index.html
3. For example, by registering the Play/Pause Key of a remote controller, you can get the
KeyCode(10252) through the KeyDown event handler of body tag. And then, you can
present the user interaction. The following is the guide of developing.
Key Register
var KEY_PLAYPAUSE = 10252;
tizen.tvinputdevice.registerKey(‘MediaPlayPause’);
…
function handleKeydown (e) {
switch (e.keyCode) {
case window.KEY_PLAYPAUSE:
…
break;
…
document.body.addEventListener(‘keydown’, handleKeyDown);
4. tizen.tvinputdevice.getSupportedKeys
By using the getSupportedKeys of Tizen API, you can get all keys supported by the
platform.
Supported Keys
value = tizen.tvinputdevice.getSupportedKeys();
console.log(value);
5. The following is the KeyName and KeyCode supported by Tizen-based Samsung TV.
KeyName KeyCode KeyName KeyCode KeyName KeyCode
ArrowLeft 37 MediaPlayPause 10252 Menu 457
ArrowUp 38 MediaRewind 412 Tools 10135

ArrowRight 39 MediaFastForward 417 Info 457
ArrowDown 40 MediaPlay 415 Exit 10182
Enter 13 MediaPause 19
Back 10009 MediaStop 413 Caption 10221
MediaRecord 416 ChannelList 10073
VolumeUp 447 MediaTrackPrevious 10232 E-Manual 10146
VolumeDown 448 MediaTrackNext 10233 3D 10199
VolumeMute 449
ChannelUp 427 0 48 PictureSize 10140
ChannelDown 428 1 49 Soccer 10228
2 50 Teletext 10200
ColorF0Red 403 3 51
ColorF1Green 404 4 52 Search 10225
ColorF2Yellow 405 5 53 Guide 458
ColorF3Blue 406 6 54 Source 10072
7 55 Extra 10253
8 56 MTS 10195
9 57
Minus 189
PreviousChannel 10190
6. Because you can basically receive KeyCodes of a Left, Up, Right, Down, Enter and
Back(Return) key regardless of no registering, please do not register these keys as item
2.
7. To use registerKey method contained tizen.tvinputdevice, please note that you should
declare privilege in [config.xml] as follows.
Privilege
<tizen:privilege name=‘http://tizen.org/privilege/tv.inputdevice’/>
4.2. Set [config.xml] for App with Various Functions
1. Using Network
Without setting CSP/WARP, Tizen web app cannot use network because of protecting
app contents. To use network, you need to set Security Policy. You can set the URL
accessed by the app in ‘Policy’ Tab of [config.xml].
2. Obtaining Privilege
As mentioned in chapter 3.7 item 2.E, to use specific APIs, you need declare privileges
and obtain privilege levels. To declare privilege, you can click ‘Add’ in ‘Privileges’ Tab.

The following is the list of Privilege for each API which is supported by Tizen-based
Samsung TV and the site you can refer to. (Privilege Level is in chapter 4.5 item 2.)
Tizen API Privilege
Alarm http://tizen.org/privilege/alarm
Application
http://tizen.org/privilege/appmanager.kill
http://tizen.org/privilege/application.launch
http://tizen.org/privilege/appmanager.certificate
http://tizen.org/privilege/application.info
Package
http://tizen.org/privilege/packagemanager.install
http://tizen.org/privilege/package.info
Content
http://tizen.org/privilege/content.read
http://tizen.org/privilege/content.write
Download http://tizen.org/privilege/download
Archive
http://tizen.org/privilege/filesystem.read
http://tizen.org/privilege/filesystem.write
File System
http://tizen.org/privilege/filesystem.read
http://tizen.org/privilege/filesystem.write
System Information
http://tizen.org/privilege/system
http://tizen.org/privilege/systemmanager
Web Setting http://tizen.org/privilege/websetting
TV Audio Control http://tizen.org/privilege/tv.audio
TV Channel http://tizen.org/privilege/tv.channel
TV Display Control http://tizen.org/privilege/tv.display
TV Input Device http://tizen.org/privilege/tv.inputdevice
TV Window http://tizen.org/privilege/tv.window
WebApis API Privilege
DRMInfo http://developer.samsung.com/privilege/drminfo
Electronic Program Guide http://developer.samsung.com/privilege/epg
Logging http://developer.samsung.com/privilege/logging
Network
http://developer.samsung.com/privilege/network.partner
http://developer.samsung.com/privilege/network.public
Product Info http://developer.samsung.com/privilege/productinfo
SSO
http://developer.samsung.com/privilege/sso.partner
http://developer.samsung.com/privilege/sso.public
Widget Data http://developer.samsung.com/privilege/widgetdata
www.samsungdforum.com/tizenguide/?Foldername=tizen3411&Filename=index.html
3. Prelaunch Function

By making that platform previously loads an app in the background before running the
app, you can improve initial app performance. But, it doesn’t mean that all apps like
that are always prelaunched. Only several recently used apps are prelaunched. Default
value is ‘false’.
Prelaunch
<tizen:metadata key=‘http://samsung.com/tv/metadata/prelaunch.support’ value=‘true’ />
4. Multitasking Function
During running an app, users can switch to another app or TV channel. When it does,
you should decide to fully close or just hide your app. If you set ‘true’ as follows, the
app will be hidden. And then multitasking can be supported. (But it requires some
source code. Please refer to it in chapter 4.5 item 4.) Default value is ‘true’.
Multitasking
<tizen:metadata key=‘http://samsung.com/tv/metadata/multitasking.support’ value=‘true’ />
5. MLS(Multi Link Screen) Function
With dividing screen by 2 or 4, you can run multiple apps. The following picture is the
example of MLS function. The left side is a TV channel screen and the right side is an
app.
If you don’t want to support, you can declare as follows. Default value is ‘true’.
MLS
<tizen:metadata key=’http://samsung.com/tv/metadata/multiscreen.support’ value=’false’ />
6. Pointing Device Function (Mouse Function)
In principle, Tizen web apps support interaction by pointing devices. However, if you
don’t want to support them, you can declare as follows. Default value is ‘enable’.
Pointing Device
<tizen:setting pointing-device-support=‘disable’ />

4.3. APIs for VOD Service App
1. There are two ways to play VODs on an app. One way is using video tag which is a
HTML5 standard element. And another way is using webapis.avplay which is product
APIs supported by Tizen-based Samsung TV. The followings are explanations about two
ways and other functions to helpfully use in VODs service apps.
2. Video Tag
Video tag makes VODs playing easy by a HTML5 standard element. If you can enough
develop by using only it, we recommend using it rather than webapis.avplay.
3. webapis.avplay
The following is the list to be difficult or not supported by video tag. When you use
these technologies, you can use webapi.avplay. You can learn to use webapis.avplay on
the following site.
Supported by webapis.avplay
DRM(Digital Rights Management)
HLS(HTTP Live Streaming)
DASH(Dynamic Adaptive Streaming over HTTP)
Smooth Streaming
Adaptive Streaming
3D Contents, Closed Caption etc…
www.samsungdforum.com/tizenapiguide/?FolderName=tizen3001&FileName=index.html
4. webapis.appcommon.setScreenSaver
When there is no user interaction during the long period of time by watching VODs in
an app, a screen saver runs. If you use the setScreenSaver of webapis.appcommon, you
can protect this case. If you set setScreenSaver to ‘0’ shortly before playing VODs, a
screen saver will not run although there is no user interaction. Default value is ‘1’. The
following is way to use.
setScreenSaver
webapis.appcommon.setScreenSaver(0, function(){});
5. Control Volume
To control volume on playing VODs, if you use the volume key of a remote controller,
you can just use it without registering key. In this case, because platform handles the
key, you can use it as the original role of the key. If you want to use Tizen API, please
refer to it in chapter 4.4 item 3.
6. Play/Pause Key
There is a Play/Pause key in Samsung Smart Controller. This key is combined a play key
with a pause key. Its KeyName is MediaPlayPause and KeyCode is 10252. VOD service
apps must handle this key to toggle between play and pause mode.

4.4. APIs for TV Service App
1. tizen.tvwindow
By using Tizen APIs, you can develop PIG(Picture in Graphic). A TV channel screen or
external inputs can be shown on an app by setting source. (Unfortunately, an
HTMLElement cannot appear on a PIG.) As follows, you can use the show API of
tvwindow. Please refer to the following site for more information.
tizen.tvwindow
tizen.tvwindow.show(function(){}, null, [‘0’, ’0’, ‘50%’, ‘50%’], ‘MAIN’);
www.samsungdforum.com/TizenApiGuide/?Foldername=tizen921&Filename=index.html
2. tizen.tvchannel
When a channel screen is shown, you can just use the channel key of a remote
controller without registering key as metioned in chapter 4.3 item 5. If you want to use
Tizen API, you can control a channel which is from the getChannelList API of tvchannel.
The following is the guide of this.
tizen.tvchannel
tizen.tvchannel.getChannelList(function(channels){}, null, ‘ALL’, 0, 10);
tizen.tvchannel.tune({major:channelList[0].major},function(){});
www.samsungdforum.com/TizenApiGuide/?FolderName=tizen881&FileName=index.html
3. tizen.tvaudiocontrol
In case of volume, you use it as mentioned in chapter 4.3 item 5 or tvaudiocontrol API.
And then you can control volume or mute status. The following is the guide of this.
tizen.audiocontrol
tizen.tvaudiocontrol.setMute(true);
tizen.tvaudiocontrol.setVolume(10);
www.samsungdforum.com/TizenApiGuide/?FolderName=tizen841&FileName=index.html
4.5. Other Instructions & Functions
1. WebApis
WebApis, the product API of Tizen-based Samsung TV is used to get the information of
platform, set subtitle and play VODs, etc. It can offer firmware version, DUID,
ModelCode, CaptionChange and some APIs of webapis.avplay as mentioned above. You
can refer to information from the following sites.
WebApis
www.samsungdforum.com/tizenapiguide/?FolderName=tizen1761&FileName=index.html
2. Privilege Level

As mentioned in chapter 4.2 item 2, some APIs need to declare privileges and to
acquire privilege levels. However most of Privilege Levels are ‘Public’ which means they
can be used by everyone without acquiring. Because the following privileges are
‘Partner’ or ‘Platform’ level, you need to acquire privilege levels to use. You can contact
your content manager in Samsung HQ to use these privileges.
Privilege Privilege Level
http://tizen.org/privilege/appmanager.kill Partner
http://tizen.org/privilege/appmanager.certificate Partner
http://tizen.org/privilege/packagemanager.install Platform
http://developer.samsung.com/privilege/drminfo Partner
http://developer.samsung.com/privilege/network.partner Partner
3. IME(Input Method Editor)
A. If you insert only input or textarea tag in HTML, an IME appears when a focus is
given to these tags. (However, if you connect to an actual keyboard and input any
key, the IME will disappear.) Contents enterd on an IME becomes automatically the
value of tag.
B. You can get the KeyCode by using the KeyDown event handler of input or textarea
tag. Registering keys is not needed. The following is how it is implemented.
Key
var KEY_DONE = 65376; var KEY_CANCEL = 65385;
var KEY_ENTER = 13; var KEY_ESC = 10009;
…
function handleKeydown (e) {
switch (e.keyCode) {
case window.KEY_DONE:
…
break;
…
document.getElementById(‘Tag ID’).addEventListener(‘keydown’, handleKeyDown);
C. The following table is the KeyCode of a Done key and a Cancel key which is
included in an IME. Please note that the Done and Cancel key of an IME are
different from the Enter and ESC key of a keyboard.
Key KeyCode
Done of IME 65376
Cancel of IME 65385
Enter of Keyboard 13 (Same as Enter of remote controller)
ESC of Keyboard 10009 (Same as Return of remote controller)
4. VisibilityChange Event

A. As mentioned in chapter 4.2 item 4, if you set multitasking to ‘true’, the app will
be shown or hidden by platform.
B. VisibilityChange event is fired when an app is shown or hidden. You can handle
each operation by registering this event in an app. In this event callback, you can
check whether an app is shown or hidden. The following is how it is implemented.
VisibilityChange Event
document.addEventListener('visibilitychange', function () {
if (document.hidden) {…}
else {…}
});
5. Viewport
A. As mentioned in chapter 3.8 item 3, the standard resolution of an app is
1920*1080px. If you create a smaller or bigger app than the standard, you can
scale up and down size of the app by using viewport meta tag.
B. For example, when the resolution of an app is 1280*720px, if you set the app as
follows, it will exactly fit on a screen without a margin or a scroll. Because screen
size is recognized as the value of viewport width.
Viewport
<meta name=‘viewport’ content=‘width=1280, user-scalable=no’>
C. If resolution and ratio are different from the standard without using viewport, a
margin will occur at right or bottom side. The following table is a explanation for
app appearance depending on resolution.
App Resolution(px) Right Side Bottom Side
1920↓ * 1080↓ White Space White Space
1920↑ * 1080
No Scroll
(Shrink to fit perfectly)
White Space
1920 * 1080↑ No White Space Scroll
4.6. How to Improve App Performance
1. This chapter contains how to start an app quickly, optimize JS and improve
performance while an app runs. You can expect a excellent performance app, if you
follow this.
2. JS Basic tips
A. We recommend using local variables instead of global variables. If you store the
value of global variables in local variables, you can improve processing
performance.
Define local variables

var doc = document;
var a = doc.getElementById(‘aaa’);
var b = doc.getElementById(‘bbb’);
B. If frequently used HTML elements should be assigned to variables, you can
improve processing performance.
Define local variables
var trash = document.getElementById(‘trash’);
var forms = document.getElementsByTagName(‘form’);
C. For-in loops and with() statements are not recommended.
D. Closure is very useful, but it is one of causes for reducing performance. We
recommend using it only where necessary.
3. Improving app launch speed
A. To reduce a initial start time, it is important to minimize the number of JS files
loaded in HTML on an app launch. If you don’t load files which are unnecessary for
a first screen, you can reduce time for showing first screen.
B. While communicating with servers or loading JS files, please display the
background of a first screen and then fill all contents brick by brick. If so, users can
feel less stuffy. If you make the speed of loading images fast, the speed of a
loading app looks quick.
C. Minifying JS files can make to reduce a loading time.
D. If using Image Lazy Loading, you can avoid loading images which will not be
shown on a screen. If so, you can reduce a loading time. You can easily develop by
using jQuery as follows. You can refer to information from the following sites.
Image Lazy Loading
<script type=‘text/JavaScript’ src=‘jquery.js’></script>
<script type=‘text/JavaScript’ src=‘jquery.lazyload.js’></script>
<script>
function onLoad() {
$(‘img.lazy’).lazyload();
}
</script>
<body>
<img class=‘lazy’ data-original=‘img/example.jpg’ width=‘765’ height=‘574’>
www.appelsiini.net/projects/lazyload
E. You need to reduce a total time spent on communication with server as much as
possible. To achieve this, it is important to start sending requests as soon as
possible and process independent data in parallel communications.
4. Improving performance during running an app

A. You can improve performance as changing CSS classes instead of the changing
style of an HTMLElement.
Change Class
.elm { background-color: #fff; padding-left: 0px; }
...
<div class=‘elm’>...</div>
B. You can improve rendering performance by using a GPU accelerator. Simply
changing a top and left value will be occurred reflow. If you use -webkit-transform,
it will be renderd by a GPU accelerator.
Use GPU Accelerator
@-webkit-keyframes ‘move’ {
from { -webkit-transform:translateX(0px);}
to { -webkit-transform:translateX(200px);}
}

5. Releasing Your App
5.1. Procedure of App Release
1. After completing your app development, you can publish your app on Samsung Apps.
To publish it, the following procedure is required.
2. Visit Seller Office site and sign up.
Seller Office is a system on which you can accomplish a whole process for releasing
app.
Seller Office
seller.samsungapps.com/tv/portal/main
3. Select sequentially ‘App Registration’ and ‘Tizen-based Samsung TV SDK’.
4. Fill in an app name and check availability.
5. Fill in Basic Information: developer information, app information, country for release and
etc.
6. Fill in Test Information: TV model for release, app document and etc.
7. Progress Pre-Test: Refer to it in chapter 5.3.
8. Complete to register the app.
9. After checking whether your app is proper, you can confirm your app on a TV.
5.2. Materials for Register your App
1. As preparing the below things, you can easily progress registering your app.
App Code App Icon App Picture
Count 1 1 4
Size - 512*423px
960*540px
1280*720px
1920*1080px
Format WGT JPG, PNG JPG
Max Volume - 300 KB 500 KB
2. Also, you need to prepare a app name and description in the language of each country
for releasing.

5.3. App Pre-Test
1. After registering your app information and app code, system progresses Pre-Test. It
essentially checks whether required information are missed and it has security issues
and common defects. The following things are the list of checking during Pre-Test. If
you don’t keep the rules, Pre-Test will be failed. In such case, you should review and fix
problems and resubmit your app code.
2. Check the submitted file
File Check
Format WGT
Name
No special characters except for underscore.( _ )
Below 100 Bytes
Compression ZIP(Able to decompress)
3. Check the [config.xml]
[config.xml] Check
Mandatory items
[config.xml] File
App ID
App Version
Feature
App ID
For a new app, check if your app ID is not used by other apps.
For version up, check if the app ID is same as previous one.
App Version
Check if format is {0-255}.{0-255}.{0-65535}
For version up, check if the version is higher than previous one.
Required_version Check if format is {number}.{number}
Privilege Check if you have the privilege for ‘Partner’ or ‘Platform’ levels
4. Check the [author-signature.xml]
[author-signature.xml] Check
Mandatory items [author-signature.xml] File
Author Certificate
For a new app, check if the certificate is a proper format
For version up, check if the author is same as previous one.
5.4. Complete
1. After passing Pre-Test and completing your app register, our system starts real an app
test. If there are no defects, your app is released on Samsung Apps. Then you can
check your app on TVs.

2. If your app has defects, you should review and fix it. Then you should resubmit a new
version app. Otherwise the app will not be published. The detailed defect list can be
found on Seller Office. On ‘Applications’ menu, click ‘Defect Resolution’.
3. For version up, you can similarly process with registering an app. On ‘Applications’
menu, click ‘Management’ and then click the app. you can process to upgrade your app
by clicking ‘Version Up’ on ‘App Information’.
4. In case of any questions about a release process, defects or system features, you can
contect managers on Seller Office. On ‘Support’ menu, click ‘1:1 Q&A’.

Essentials of developing_tizen_web_application_en_1.0

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Essentials of developing_tizen_web_application_en_1.0

Similar to Essentials of developing_tizen_web_application_en_1.0 (20)

More from Saima Ashiq

More from Saima Ashiq (7)

Recently uploaded

Recently uploaded (20)

Essentials of developing_tizen_web_application_en_1.0