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.6 2015. 04. 17 Modify and English composition Sukyung Lee

Hyojin Kim

0.7 2015. 04. 20 Modify spelling Sukyung Lee


Michal Piotrkowski


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

http://endic.naver.com/enkrEntry.nhn?entryId=948a0a2451f5464c8c2ed95f6647331e&query=%EB%AA%A8%EC%8A%B5


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

Economy & Finance

Essentials of developing_tizen_web_application_en_1.0