[2010]app development guide for internet@tv[v1.09]

100
Application Development Guide for Internet@TV Year 2010 Version 1.09 Internet@TV

Upload: leo-sei

Post on 28-Mar-2015

4.171 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide

for Internet@TV

Year 2010

Version 1.09

Internet@TV

Page 2: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

2

APPLICATION DEVELOPMENT GUIDE................................................................................................................... 1

FOR INTERNET@TV ..................................................................................................................................................... 1

YEAR 2010 ........................................................................................................................................................................ 1

VERSION 1.09 ................................................................................................................................................................... 1

INTERNET@TV .............................................................................................................................................................. 1

PREFACE ............................................................................................................................................................................ 7

1. INTRODUCTION .................................................................................................................................................... 8

1.1. WHAT IS INTERNET@TV? ................................................................................................................................... 8

2. SAMSUNG INTERNET@TV ................................................................................................................................. 9

2.1. OPERATING PRINCIPLE ......................................................................................................................................... 9

2.2. OPERATING ENVIRONMENT .................................................................................................................................. 9

3. APPLICATIONS .................................................................................................................................................... 10

3.1. WHAT ARE APPLICATIONS? ................................................................................................................................. 10

3.2. STRUCTURE OF AN APPLICATION ........................................................................................................................ 10

3.3. DISPLAY TYPE OF APPLICATIONS ........................................................................................................................ 11

3.4. RUNNING AN APPLICATION ................................................................................................................................. 12

3.5. APPLICATION MANAGER .................................................................................................................................... 12

3.6. FEATURES OF SAMSUNG APPLICATIONS ............................................................................................................. 13

4. CREATING AN APPLICATION .......................................................................................................................... 14

4.1. WHAT YOU NEED TO CREATE AN APPLICATION.................................................................................................... 14

4.2. HOW TO MAKE AN APPLICATION ........................................................................................................................ 14

4.2.1. Writing config.xml ..................................................................................................................................... 15

4.2.2. Writing index.html ..................................................................................................................................... 16

4.2.3. Writing JavaScript .................................................................................................................................... 16

4.2.4. Writing a CSS ............................................................................................................................................ 17

4.2.5. Use of the remote control .......................................................................................................................... 18

4.2.6. Complete your work & Sample code ......................................................................................................... 20

4.2.6.1. config.xml ............................................................................................................................................................... 20

4.2.6.2. index.html ............................................................................................................................................................... 21

4.2.6.3. Main.js .................................................................................................................................................................... 21

4.2.6.4. Main.css .................................................................................................................................................................. 22

Page 3: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

3

4.3. CONFIG.XML ....................................................................................................................................................... 23

4.3.1. Tag information ......................................................................................................................................... 23

4.3.2. Example .................................................................................................................................................... 26

4.4. SINGLE-SIGN-ON ............................................................................................................................................... 27

4.4.1. What is Single-Sign-On ............................................................................................................................. 27

4.4.2. Registration of Account Information on Service Sites............................................................................... 28

4.4.3. How to download account information on service sites in applications ................................................... 30

4.5. RESET ................................................................................................................................................................ 32

4.5.1. What is Reset? ........................................................................................................................................... 32

4.5.2. How Reset Works? .................................................................................................................................... 32

4.5.3. Necessary Features Developers Should Realize ....................................................................................... 32

4.5.4. Guide for Config.xml Realization ............................................................................................................. 32

4.5.5. Guide for Module Realization ................................................................................................................... 32

4.6. EXAMPLE FOR XHR COMMUNICATION .............................................................................................................. 34

5. COMMON MODULES .......................................................................................................................................... 37

5.1. APPLICATION MANAGER’S COMMON MODULES ................................................................................................. 37

5.2. HOW TO USE COMMON MODULES ....................................................................................................................... 37

5.3. TVKEYVALUE ................................................................................................................................................... 37

5.4. WIDGET ............................................................................................................................................................. 40

5.4.1. sendReadyEvent() ..................................................................................................................................... 40

5.4.2. sendExitEvent() ......................................................................................................................................... 41

5.4.3. sendReturnEvent() .................................................................................................................................... 41

5.4.4. blockNavigation() ..................................................................................................................................... 41

5.4.5. putInnerHTML() ....................................................................................................................................... 42

5.4.6. getChannelWidgetListPath() ..................................................................................................................... 43

5.4.7. getSearchWidgetListPath() ....................................................................................................................... 43

5.4.8. runSearchWidget() .................................................................................................................................... 44

5.4.9. checkSapTicket () ...................................................................................................................................... 44

5.4.10. requestSapTicket () .................................................................................................................................... 45

5.5. PLUGIN .............................................................................................................................................................. 45

5.5.1. setOnWatchDog() ...................................................................................................................................... 47

5.5.2. setOffWatchDog() ...................................................................................................................................... 47

5.5.3. setOnOSDState() ....................................................................................................................................... 48

5.5.4. setOffOSDState() ....................................................................................................................................... 48

5.5.5. registKey()................................................................................................................................................. 49

5.5.6. unregistKey() ............................................................................................................................................. 49

Page 4: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

4

5.5.7. registIMEKey() ......................................................................................................................................... 49

5.5.8. unregistIMEKey()...................................................................................................................................... 50

5.5.9. registAllKey............................................................................................................................................... 50

5.5.10. unregistAllKey() ........................................................................................................................................ 51

5.5.11. registFullWidgetKey() ............................................................................................................................... 51

5.5.12. registPartWidgetKey() .............................................................................................................................. 52

5.5.13. SetBannerState() ....................................................................................................................................... 52

5.5.14. ShowTools()............................................................................................................................................... 53

5.5.15. setOnIdleEvent() ....................................................................................................................................... 54

5.5.16. setOffIdleEvent() ....................................................................................................................................... 54

5.5.17. setOnScreenSaver() ................................................................................................................................... 54

5.5.18. setOffScreenSaver()................................................................................................................................... 55

5.5.19. isViewerKey() ............................................................................................................................................ 55

5.5.20. setOnFullScreen () .................................................................................................................................... 56

5.5.21. setOffFullScreen() ..................................................................................................................................... 56

5.6. CIMAGEVIEWER ................................................................................................................................................ 57

5.6.1. CImageViewer? ......................................................................................................................................... 57

5.6.2. Specifications ............................................................................................................................................ 57

5.6.3. Basic Instructions ..................................................................................................................................... 57

5.6.4. Transition Effect ........................................................................................................................................ 58

5.6.4.1. Action Principles of Slideshow ............................................................................................................................... 59

5.6.4.2. How to Realize Transition Effect ............................................................................................................................ 60

5.6.4.3. Slideshow Mode and Restrictions ........................................................................................................................... 61

5.6.5. Events ........................................................................................................................................................ 62

5.6.6. Play local files .......................................................................................................................................... 62

5.6.6.1. Play Images in an Application ................................................................................................................................ 62

5.6.6.2. Play images in USB ................................................................................................................................................ 63

5.6.7. Reference................................................................................................................................................... 64

5.6.7.1. CImageViewer ........................................................................................................................................................ 64

5.6.7.2. Effect ...................................................................................................................................................................... 65

5.6.7.3. clearScreen() ........................................................................................................................................................... 66

5.6.7.4. destroy() .................................................................................................................................................................. 66

5.6.7.5. endSlideshow() ....................................................................................................................................................... 67

5.6.7.6. getStopFlag() .......................................................................................................................................................... 67

5.6.7.7. hide() ....................................................................................................................................................................... 68

5.6.7.8. isEffectAvailable() .................................................................................................................................................. 68

Page 5: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

5

5.6.7.9. play() ....................................................................................................................................................................... 68

5.6.7.10. prepareNext() ..................................................................................................................................................... 69

5.6.7.11. setFrameArea() ................................................................................................................................................... 70

5.6.7.12. setOnBufferingComplete() ................................................................................................................................. 71

5.6.7.13. setOnBufferingStart() ......................................................................................................................................... 71

5.6.7.14. setOnNetworkError() .......................................................................................................................................... 72

5.6.7.15. setOnRenderError() ............................................................................................................................................ 72

5.6.7.16. setOnRenderingComplete () ............................................................................................................................... 73

5.6.7.17. show() ................................................................................................................................................................. 73

5.6.7.18. showNow () ........................................................................................................................................................ 73

5.6.7.19. startSlideshow () ................................................................................................................................................. 74

5.6.7.20. stop () ................................................................................................................................................................. 75

6. TIPS FOR APPLICATION DEVELOPERS ........................................................................................................ 76

6.1. FUNCTION NECESSARY TO BE CALLED WHEN YOU OPEN AN APPLICATION .......................................................... 76

6.2. ACCESS POINT ................................................................................................................................................... 76

6.3. HANDLING REMOTE CONTROL KEY EVENTS ....................................................................................................... 76

6.4. REMOTE CONTROL KEYS FOR APPLICATIONS ...................................................................................................... 77

6.5. CLOSING AN APPLICATION .................................................................................................................................. 79

6.6. PREVENTION OF CLOSING THE TV SCREEN BY THE RETURN OR EXIT KEY .......................................................... 79

6.7. ADDITIONAL INFORMATION ............................................................................................................................... 79

6.8. WHAT CSS NEED TO CONTAIN ........................................................................................................................... 80

6.9. LOADING IMAGES IN ADVANCE .......................................................................................................................... 80

6.10. CHARACTER OF THE <INPUT> TAG ................................................................................................................. 81

6.11. SCROLL BAR ...................................................................................................................................................... 81

6.12. MAKING DYNAMIC WEB PAGES ...................................................................................................................... 81

6.13. SETTING FOR LETTER-SPACING ...................................................................................................................... 82

6.14. MEMORY MANAGEMENT ................................................................................................................................ 82

6.14.1. Using XMLHttpRequest ............................................................................................................................ 82

6.14.2. Freeing up the memory ............................................................................................................................. 82

6.15. WATCH DOG .................................................................................................................................................. 82

6.16. PREVENTION FOR OSD DISTORTION............................................................................................................... 83

6.17. SUPPORT CSS TEXT-OVERFLOW ..................................................................................................................... 83

6.18. DIRECTIONS FOR CREATING VIDEO APPLICATION ............................................................................................ 83

6.19. USING IME .................................................................................................................................................... 83

6.20. MINIMIZING INITIAL ENTRY SPEED OF AN APPLICATION .................................................................................. 83

6.20.1. Load Javascript On-Demand .................................................................................................................... 83

Page 6: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

6

6.20.2. Load CSS Background Image On-Demand ............................................................................................... 84

6.20.3. Separation of Main.onLoad functions ....................................................................................................... 84

6.21. DIRECTIONS FOR DYNAMIC LOADING OF CSS ............................................................................................... 85

7. MAPLE BROWSER .............................................................................................................................................. 87

7.1. MAPLE? ............................................................................................................................................................. 87

7.2. STANDARD SPECIFICATIONS ............................................................................................................................... 87

8. FILE API ................................................................................................................................................................. 88

8.1. FILE API? .......................................................................................................................................................... 88

8.2. API .................................................................................................................................................................... 88

8.2.1. FileSystem() .............................................................................................................................................. 88

8.2.2. openCommonFile() ................................................................................................................................... 89

8.2.3. closeCommonFile() ................................................................................................................................... 90

8.2.4. deleteCommonFile() ................................................................................................................................. 90

8.2.5. createCommonDir() .................................................................................................................................. 91

8.2.6. deleteCommonDir() .................................................................................................................................. 91

8.2.7. isValidCommonPath() ............................................................................................................................... 92

8.2.8. readLine() ................................................................................................................................................. 92

8.2.9. writeLine() ................................................................................................................................................ 93

8.2.10. readlAll() ................................................................................................................................................... 93

8.2.11. writeAll() ................................................................................................................................................... 94

8.2.12. readDir() ................................................................................................................................................... 94

8.2.13. openFile() ................................................................................................................................................. 95

9. APPENDIX .............................................................................................................................................................. 97

9.1. COUNTRY CODE ................................................................................................................................................. 97

9.2. LANGAUAGE CODE ............................................................................................................................................ 98

9.3. REGION CODE .................................................................................................................................................... 99

9.4. PRODUCT CATEGORY ....................................................................................................................................... 100

Page 7: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

7

Preface

Purpose of Document

This document is written to help application developers who enjoy the Internet@TV service by providing

an overview of the service and basic knowledge required to be obtained by application developers. Using

this document, developers can develop and manage applications for digital TVs.

Target Readers

This document is aimed at programmers who have used web development languages such as HTML, CSS

and JavaScript. This document will be even more helpful for those who have web development experience.

Page 8: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

8

1. Introduction

This section describes what Internet@TV is, how it is configured and how it works.

1.1. What is Internet@TV?

SAMSUNG Internet@TV is a web-based application running on an application engine installed in digital TVs

connected to the Internet. The Internet@TV service makes it possible to extend the functions of the TV by

applying a variety of web functions to it, so that users can obtain useful information and interesting

content on their TV screens. Users can check internet services such as news, weather, stock, UCC with

simple operation.

With Internet@TV, digital TV users can not only download applications from HubSite and install them in

their TVs but also personally develop applications tailored to their needs and install them in their TVs.

HubSite

PAVV

HubSite

PAVV

Page 9: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

9

2. Samsung Internet@TV

This section describes the operating principle and environment of Samsung Internet@TV.

2.1. Operating principle

With Samsung Internet@TV installed in the TV, users can run Internet-based applications on the TV screen.

An application is a special type of web page that is implemented on a web browser and runs on the TV

screen. Viewing an application is very much like viewing web pages using a web browser on an ordinary PC.

Differences between applications and web pages are made by screen resolution, hardware specifications

and remote controller, the user interface for Internet@TV installed TVs.

2.2. Operating environment

Browser Maple 5.1

TV screen resolution 960 Ⅹ 540 pixel

We will look at Maple, the browser dedicated to internet TVs manufactured by Samsung, in Chapter 7.

Maple.

Page 10: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

10

3. Applications

This section looks at applications that we will develop for Samsung TVs.

3.1. What are applications?

Applications are web-based small

applications that are run in digital TVs

connected to the internet. They are

installed in TVs via the Internet and are

run on Maple. It is safe to say that they are

web pages displayed on the TV screen

having the remote control as the only user

interface. The Application Manager

(N.Navi.) controls installing and removing applications, and performing other works for them.

You can exploit the Software development kit (SDK) to develop new applications designed to be run on

your TV screen.

3.2. Structure of an application

An application is a web page consisting of HTML, CSS and JavaScript, and for Samsung TVs it is run on

Maple. The HTML page shows the structure of the application, the CSS file does the style, and the

JavaScript file controls the behavior of the application. If you want to run an application on the TV screen,

you have to create a config.xml file containing information on the operating environment and the version

of the application. If you want to get more information about config.xml, see Ch. 4.3 config.xml.

Page 11: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

11

3.3. Display type of applications

Display type Description Screen layout

Full-screen

application

Fills the entire screen with an

application.

Single-wide

application

Makes an application displayed

only on part of the screen.

Ticker

Keeps an application on the

screen while you do other

things with your TV.

* The application will be launched in Europe must be Full-screen application.

Page 12: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

12

3.4. Running an application

In order to start an application, you are required to follow the steps below:

Step Instruction description

Get the Application

Manager started

Press the INTERNET(INFO.L) button on the remote control or go through Menu>

Application>Internet@TV to open the application

Select an application Press arrow button located in the center of the remote control to select an

application.

Implement an

application

Press the Enter button to implement an application. The Application Manager

reads the information from the config.xml file of the currently running

application to set an operating environment, and reads index.html to implement

the application.

3.5. Application Manager

The Application Manager serves as a “manager” that has the authority to authenticate, install, delete,

update, open and finish applications. With the Application Manager, users can install or delete

applications, and also register applications they‟ve developed and run them on the TV. The Application

Manager is also an application that is continuously updated via the Internet.

뚯Entry Screen Samsung Apps

Page 13: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

13

Settings

3.6. Features of Samsung applications

Applications for Samsung Internet@TV allow you to enjoy functions that only TVs have, unlike general web

pages. For example, using plugins, you can volume up or down the application and play video other than

broadcasting on the TV screen. In addition, you can use a file storage system. If you want to get detailed

information on plug-ins and file storage system, refer to Ch. 7 and 8 File API.

The Application Manager provides several JavaScript modules used in applications. This enhances

convenience of application development. If you want to get detailed information on use of a common

module, see Ch. 5 Common modules.

Page 14: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

14

4. Creating an application

This section guides you to create a simple application.

4.1. What you need to create an application

Our final goal is to create applications and run them on the TV screen. To this end, you need a Samsung

TV connected to the Internet and an SDK or a text editor with which you can write HTML, JavaScript and

CSS files. The SDK is equipped with a simulator with which you can run an application you‟ve created

before actually installing it in your TV. So, if you use an SDK, you can make an application in a more

convenient way.

4.2. How to make an application

An application should contain at least the following elements:

An index.html file. The file serves as the access point of the application.

An application configuration file. This is an XML file in the root of the application structure that holds

information about setting an application.

JavaScript files. These are used for a preview of the application and for controlling the behavior of

the application.

CSS files. The look of the application is determined by these files.

Image files, which are used by your application.

Let‟s make an application that displays text written in CSS and responds to remote control buttons events.

The structure and look of an application we will make now are shown as below.

Page 15: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

15

4.2.1. Writing config.xml

The config.xml file is called first among all the files the application has in it. <ver> tag value decides

whether to update the application and images designated in <ThumbIcon> tag are shown in thumbnail. For

information about other tags, turn to Ch. 4.3. config.xml.

<?xml version="1.0" encoding="UTF-8"?> <widget> <ThumbIcon>Resource/image/icon/picasa_106.png</ThumbIcon> <BigThumbIcon>Resource/image/icon/picasa_115.png</BigThumbIcon> <ListIcon>Resource/image/icon/picasa_85.png</ListIcon> <BigListIcon>Resource/image/icon/picasa_95.png</BigListIcon> <category>lifestyle</category> <autoUpdate>y</autoUpdate> <cpname>MyCP</cpname> <cpauthjs></cpauthjs> <login>y</login> <ver>0.930</ver> <mgrver>1.000</mgrver> <fullwidget>n</fullwidget> <srcctl>n</srcctl> <ticker>n</ticker> <childlock>n</childlock> <audiomute>n</audiomute> <videomute>n</videomute> <dcont>y</dcont> <network>y</network> <hubsite>n</hubsite> <widgetname>HelloWorld</widgetname> <description>Welcome!</description> <width>960</width> <height>540</height> <author> <name>Samsung Electronics Co. Ltd.</name> <email></email> <link>http://www.sec.co.kr/</link> <organization>Samsung Electronics Co. Ltd.</organization> </author>

</widget>

Page 16: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

16

4.2.2. Writing index.html

What you have to do next is writing index.html which will be the access point of the application. The

following example is about HTML code that includes the Main.js file under the JavaScript folder and calls

the Main.onLoad() function when the document is loaded.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Hello World!!</title>

<script type="text/javascript" language="javascript" src="JavaScript/Main.js"></script>

</head>

<body onload="Main.onLoad();">

<div>Welcome to Samsung application world!</div>

</body>

</html>

4.2.3. Writing JavaScript

If the HTML document is loaded, the onLoad() function of the Main object is called, because you

registered the Main.onLoad() function in the onload property in the <body> tag. Make a Main object and

add the onload function.

var Main = { // Main object

}

Main.onLoad = function () { // called by <body>'s onload event

alert("Main.onLoad()");

/**

* JavaScript code Here!

*/

}

If you have done all the work, you will get a debug message of Main.onLoad(). But the „Welcome to

Samsung application world!‟ that you entered will not appear on the TV screen. If the application is

successfully loaded, it has to ask the Application Manager to display itself on the screen using the common

module provided by the Application Manager. The common module is a library containing essential

functions provided by the Application Manager. For more information, refer to Ch. 5 Common Modules. Add

the following code to <head> of index.html.

Page 17: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

17

<script type="text/javascript" language="javascript"

src="$MANAGER_WIDGET/Common/API/Widget.js"></script>

If the above code is added, a common module is available to use by JavaScript. Declare the common

module as a global variable for Main.js you were working on and call the sendReadyEvent() function. By

doing this, you can make the Application Manager display an application on the screen.

var Main = { // Main object

}

var widgetAPI = new Common.API.Widget(); // Create Common module

Main.onLoad = function () { // called by <body>'s onload event

alert("Main.onLoad()");

widgetAPI.sendReadyEvent(); // Send ready message to Application Manager

/**

* JavaScript code Here!

*/

}

Ok, now run the application you‟ve just made. You will see the words “Welcome to Samsung application

world!” that you entered in the index.html file appearing on the screen. Maybe you don‟t like the look of

the application because its font size is too small and font color is just simple black. You may want to make

your application more stylish. Then, you can give the application a style using CSS.

4.2.4. Writing a CSS

Add the following string in <head> in the index.html file.

<link rel='stylesheet' type='text/css' href = 'CSS/Main.css'/>

Assign an ID to <div> in the index.html file.

<div id='welcome'>Welcome to Samsung application world!</div>

Create a file in the CSS folder and enter text as you see in the below box to specify the style of the

„welcome‟ element.

body {

margin: 0;

padding: 0;

Page 18: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

18

background-color: transparent;

}

#welcome {

position: absolute;

left: 50px;

top: 50px;

width: 500px;

height: 50px;

background-color: #AFAFAF;

color: #99FFFF;

font-size: 30px;

text-align: center;

}

4.2.5. Use of the remote control

Now, we‟ll make your application respond to the remote control. By pressing any of the five buttons

located in the center of the remote control, you can change the words your application displays on the

screen.

If a button on the remote control is pressed, a „keydown‟ event occurs. An element having focus is

required to receive the event to the index.html file. Add <a> element and Register a function that will be

executed when that event occurs in the onkeydown property. Place focus on <a> and press the remote

control key, the function registered previously is executed.

Add <a> which executes Main.keyDown() method when a „keydown‟ event occurs.

<body onload="Main.onLoad();">

<div id='welcome'>Welcome to Samsung application world!</div>

<a href='javascript:void(0);' id='anchor' onkeydown='Main.keyDown();'></a>

</body>

Write a keyDown() method bringing key code value when pressing the remote control key

Main.keyDown = function(){ // Key handler

var keyCode = event.keyCode;

alert("Main Key code : " + keyCode);

}

In a function processed by keys such as keydown(), each key has its own key code value.

The Application Manager provides a common module containing key code values to distinguish keys. Add

Page 19: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

19

the below code to <head> in the index.html file to use a common module „TVKeyValue‟.

<script type="text/javascript" language="javascript"

src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

Modify Main.js in order to change the contents of „welcome‟ Div. This creates common module objects,

classify keys in keydown() method, and define actions for each key. For detailed information on common

modules and key code list, see Chapter 5. Common Modules.

var Main = { // Main object

}

var widgetAPI = new Common.API.Widget(); // Create Common module

var tvKey = new Common.API.TVKeyValue();

Main.onLoad = function(){ // called by <body>'s onload event

alert("Main.onLoad()");

widgetAPI.sendReadyEvent(); // Send ready message to Application Manager

document.getElementById("anchor").focus(); // Focus to Anchor for handling key inputs

// from remote controller

/**

* JavaScript code Here!

*/

}

Main.keyDown = function(){ // Key handler

var keyCode = event.keyCode;

alert("Main Key code : " + keyCode);

switch (keyCode) {

case tvKey.KEY_LEFT:

alert("left");

document.getElementById("welcome").innerHTML = "Nice to meet you.";

/**

* Code for Left key event!

*/

break;

case tvKey.KEY_RIGHT:

alert("right");

document.getElementById("welcome").innerHTML = "I'm so happy.";

break;

case tvKey.KEY_UP:

alert("up");

document.getElementById("welcome").innerHTML = "I Love you.";

break;

case tvKey.KEY_DOWN:

alert("down");

document.getElementById("welcome").innerHTML = "Good job.";

break;

case tvKey.KEY_ENTER:

Page 20: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

20

alert("enter");

break;

case tvKey.KEY_RETURN:

break;

}

}

You will see the value of the „welcome‟ Div tag change as you press the up, down, left or right button.

4.2.6. Complete your work & Sample code

With Samsung Internet@TV, you can do almost everything you do on a web page. You can create “TV-

oriented” applications with extended functions using many plugins.

The below are the codes we‟ve written until now.

4.2.6.1. config.xml

<?xml version="1.0" encoding="UTF-8"?>

<widget> <ThumbIcon>Resource/image/icon/picasa_106.png</ThumbIcon> <BigThumbIcon>Resource/image/icon/picasa_115.png</BigThumbIcon> <ListIcon>Resource/image/icon/picasa_85.png</ListIcon> <BigListIcon>Resource/image/icon/picasa_95.png</BigListIcon>

<previewjs>PreviewHelloWorld</previewjs>

<cpname>Junyoung</cpname>

<cplogo>Resource/image/settings_logo.png</cplogo>

<cpauthjs></cpauthjs>

<ver>0.930</ver>

<mgrver>1.000</mgrver>

<fullwidget>n</fullwidget>

<srcctl>n</srcctl>

<ticker>n</ticker>

<childlock>n</childlock>

<audiomute>n</audiomute>

<videomute>n</videomute>

<dcont>y</dcont> <network>y</network>

<hubsite>n</hubsite>

<widgetname>HelloWorld</widgetname>

<description>Welcome!</description>

<width>960</width>

<height>540</height>

Page 21: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

21

<author>

<name>Samsung SDS</name>

<email></email>

<link>http://acme-widget.example.com</link>

<organization>Acme Examples, Inc.</organization>

</author>

</widget>

4.2.6.2. index.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Hello World!!</title>

<script type="text/javascript" language="javascript"

src="$MANAGER_WIDGET/Common/API/Widget.js"></script>

<script type="text/javascript" language="javascript"

src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

<script type="text/javascript" language="javascript" src="JavaScript/Main.js"></script>

<link rel='stylesheet' type='text/css' href = 'CSS/Main.css'/>

</head>

<body onload="Main.onLoad();">

<div id='welcome'>Welcome to Samsung widget world!</div>

<a href='javascript:void(0);' id='anchor' onkeydown='Main.keyDown();'></a>

</body>

</html>

4.2.6.3. Main.js

var Main = { // Main object

}

var widgetAPI = new Common.API.Widget(); // Create Common module

var tvKey = new Common.API.TVKeyValue();

Main.onLoad = function(){ // called by <body>'s onload event

alert("Main.onLoad()");

widgetAPI.sendReadyEvent(); // Send ready message to Application Manager

document.getElementById("anchor").focus(); // Focus to Anchor for handling key inputs

// from remote controller

/**

* JavaScript code Here!

*/

}

Main.keyDown = function(){ // Key handler

var keyCode = event.keyCode;

Page 22: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

22

alert("Main Key code : " + keyCode);

switch (keyCode) {

case tvKey.KEY_LEFT:

alert("left");

document.getElementById("welcome").innerHTML = "Nice to meet you.";

/**

* Code for Left key event!

*/

break;

case tvKey.KEY_RIGHT:

alert("right");

document.getElementById("welcome").innerHTML = "I'm so happy.";

break;

case tvKey.KEY_UP:

alert("up");

document.getElementById("welcome").innerHTML = "I Love you.";

break;

case tvKey.KEY_DOWN:

alert("down");

document.getElementById("welcome").innerHTML = "Good job.";

break;

case tvKey.KEY_ENTER:

alert("enter");

break;

case tvKey.KEY_RETURN:

break;

}

}

4.2.6.4. Main.css

body {

margin: 0;

padding: 0;

background-color: transparent;

}

#welcome {

position: absolute;

left: 50px;

top: 50px;

width: 500px;

height: 50px;

background-color: #AFAFAF;

color: #99FFFF;

font-size: 30px;

text-align: center;

}

Page 23: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

23

4.3. config.xml

The config.xml file contains information about the application‟s execution, update, operating environment

setting and other related issues. Depending on that information, the Application Manager controls the

version of your application, sets an environment in which your application is run, and creates and manages

user accounts. The config.xml file should be located in the directory in which the application is installed,

and contain the following elements.

4.3.1. Tag information

Element Description Value

<widget> Indicates that the information is relevant to the application. -

<ThumbIcon> An icon image displayed in the Application Manager.

It is used in case of no focus and its size is 106 x 86pixel. File path

<BigThumbIcon>

An icon image displayed in the Application Manager.

It is used in case that the focus is placed on an image and its size is 115

x 95 pixel.

File path

<ListIcon> An icon image displayed in the Application Manager.

The size is 85 x 70 pixel. File path

<BigListIcon> An icon image displayed in the Application Manager.

The size is 95 x 78 pixel. File path

<category> The category to distinguish applications, available items are video,

sports, game, lifestyle, information, others. String

<autoUpdate> Decides whether to synchronize with hub site. The

application which doesn‟t need synchronization chooses ‟n‟. y | n

<apptype> Shows information on contents type.(11:javascript, 12: flash, 13: game,

…) Number

<contents> File route at the initial execution of contents (Limited to non-Javascript

based applications) File Path

<channelType> Channel Bound Service Type(optional) root | child

<channelRoot>

Confirms the relations with root-child clarifying root application ID.

(Optional, Only when the channel bound service type is child.)

When connected to more than one root, roots are distinguished by ::.

Application

ID

<channelName>

Channel information to be executed channel bound

service (Distinguish each channel using :: Ex

AAA::BBB::CCC)

(Optional, only if channel bound service type is root.)

String

Page 24: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

24

<channelDisplay>

It decides whether the installed channelbound service is displayed on

the first main screen or not.

(If you want to hide the service in the first main screen, select „n‟.)

y | n

<previewjs> deleted String

<cpname> Enter the application provider in this tag. String

<cpauthjs>

The name of the JavaScript file that allows you to confirm account

information of application providers. This file has to be written in a

defined format.

String

<cplogo> deleted File path

<preIcon> deleted File path

<login>

Decides a service is available to signin or not. If you select „y‟, you can

enter ID and password in Integrated Sign-in site of Application Manager

for sign-in. Validity verification should be preceded in JavaScript file

corresponding to <cpauthjs> tag value.

y | n

<ver>

Indicates the application version. Depending on that version

information, the server computer updates the corresponding

application.

x.xxx

<mgrver> Indicates the Application Manager‟s version that is required to run an

application having the config.xml file. x.xxx

<fullwidget>

Indicates whether the application is a full-screen or a single-wide one.

Display type affects the audio policy of the application when it‟s run.

Refer to Chapter. 6.4. Using Keys on Remote Control for details.

y | n

<srcctl>

If source conversion is needed, set this tag to y. (ex. YouTube

application).

If you select „y‟, the TV source automatically switched from current TV

channel or external input to the internal media player, and back again

when the application is finished.

y | n

<childlock> Determines whether to use the childLock function. This function enables

the user to lock an application. y | n

<audiomute>

Turns on and off the audio. If you select „y‟, TV broadcasting sound is

not outputted when entering the application. Set „y‟ if the application

occupies full screen and set „n‟ if the application occupies parts of the

screen.

y | n

<videomute> Turns on and off the video. If you select „y‟, TV broadcasting is not on

the screen when entering the application. y | n

<dcont> Sets the Disable dynamic contrast function. y | n

Page 25: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

25

Dynamic contrast is the function to adjust TV contrast ratio and brighten

TV screen by darkening the dark screen and lightening the light screen.

The screen might get lighter or darker when application is on with

Dynamic contrast.

„y‟ turns off the Dynamic contrast, and „N‟ turns on the Dynamic

contrast. If the application is occupied on full screen, select „y‟ to

remove sparkling. If the application is partially occupied, select „n‟.

<movie>

Application playing video files can bring problems as stated below.

1. If a video file is played in a device connected to HDMI port such as

DVD Player when executing an application (ex. YouTube) converting

sources, sounds can be mixed.

2. Sparkling at the entry for appliction due to the difference of Frame

rate between the TV image and playing video file.

If you select „y‟, you can prevent it from the problem above by ending

operating the connected HDMI device when executing the application

and fixing the Frame rate.

y | n

<widgetname> Enter a name of application. String

<description> Enter a brief description of the application. String

<width> <height> Enter the screen area that the application will be occupying. Generally,

it is recommended to enter 960 * 540 pixels, digital TV specification. Number

<author> Enter a description of the author. string

<network>

This tage is used when needed to check network while operating an

application. If the tage value is „y‟ and the network test result is „fail‟,

entry for the application can be blocked with a message indicating the

failure.

Without any set value, default is „y‟.

y | n

<hubsite>

This tage is used when needed to check whether the hubsite has been

authorized or not while operating an application. If the tage value is „y‟,

and the hubsite has not been authorized, entry for the application can

be blocked with a message indicating the failure.

Without any set value, default is „n‟.

y | n

<pushNotice> Indicates whether the application provides Push Notification Service.

Without any set value, default is „n‟. y | n

<pushControl> This tag is reserved for former Push Notification Service.

Without any set value, default is „n‟. y | n

Page 26: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

26

<pushUerbinding> Indicates whether Push Notification Service is provided for specific user.

Without any set value, default is „n‟. y | n

4.3.2. Example

<?xml version="1.0" encoding="UTF-8"?> <widget> <ThumbIcon>Resource/image/icon/picasa_106.png</ThumbIcon> <BigThumbIcon>Resource/image/icon/picasa_115.png</BigThumbIcon> <ListIcon>Resource/image/icon/picasa_85.png</ListIcon> <BigListIcon>Resource/image/icon/picasa_95.png</BigListIcon> <category>lifestyle</category> <autoUpdate>y</autoUpdate> <cpname>Picasa</cpname> <cpauthjs>Auth11101000000</cpauthjs> <login>y</login> <ver>2.000</ver> <mgrver>1.035</mgrver> <fullwidget>y</fullwidget> <srcctl>n</srcctl> <ticker>n</ticker> <childlock>n</childlock> <audiomute>y</audiomute> <videomute>y</videomute> <dcont>y</dcont> <movie>y</movie> <network>y</network> <hubsite>n</hubsite> <widgetname>Picasa Web Albums</widgetname> <description>View photo albums online</description> <width>960</width> <height>540</height> <author> <name>Samsung Electronics Co. Ltd.</name> <email></email> <link>http://www.sec.co.kr/</link> <organization>Samsung Electronics Co. Ltd.</organization> </author> </widget>

Page 27: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

27

4.4. Single-Sign-On

This section describes SSO functions supported by the application manager, how to register account

information and get the information from the application.

4.4.1. What is Single-Sign-On

Input of account information via TV remote control is so inconvenient that users could be stressed out if

they should enter account information whenever they use the application. To improve this inconvenience,

Single-Sign-On (hereinafter referred to as “SSO”) is provided by application manager. Application manager

saves the account information that users have entered and sends it to the application. These enable users

not to enter account information repeatitively. The account information is encrypted and saved in safe

area.

SSO operates as stated below.

① Generate a TV Account

It is necessary to create a TV account to use SSO. TV account is an account generated in the Application

manager and has four-digit PIN number as a password. You can make the account in Settings-

>Internet@TV-ID.

② Register Service Sites

Registers account information of service sites (ex: YouTube, Picasa) in the generated TV account. Only

when the entered account information is determined valid, the information is registered in the account.

Registration can be made in „Settings‟ -> Internet@TV ID.

③ Sign-in to TV account

You can sign in to the TV account created in ① pressing Red key on the initial screen. In general, account

information on several service sites can be registered in a TV account. Sign-in make you enable to get

account information on a service site you want to get in several applications.

④ Execution of an Application

At this stage, the application manager decides whether the application SSO is available to sign in or not. If

available, the account information is given. Account information should be inputted through the process in

②.

⑤ Use account information on service sites

Page 28: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

28

In an application, account information coexists with various circumstances information provided by the

application manager. Thus, it is required to use account information after parsing.

Following chapter describes modules necessary to be realized in an application to register service sites,

how to parse and use the account information received by the application manager.

4.4.2. Registration of Account Information on Service Sites

Registration of account information on service sites can be done through „Settings‟ -> Internet@TV ID. If

you wish to display the names of the service sites you want to show, configure config.xml as suggested

below.

<cpname>YourCompany</cpname>

<login>y</login>

Then, you can find YourCompany item in the list of service sites. If you can‟t, restart TV. Application

manager could need to be reloaded.

Now, the account information on service site, „YourCompany‟ can be entered. However, if there is no

module which confirms validity of the entered account information, the registration cannot be completed.

You should generate the module in person.

Validity Confirmation is to make sure that the entered account information is consistent with the ID and

Password which are available to sign-in on the real service site. If sign-in can be made by API in each

service site, the information is turned out to be valid.

In Google, there is ClientLogin to judge validity. If sign-in is successfully done and auth token is granted,

the account information is regarded valid. Refer to the URL states below regarding Client Login.

(http://code.google.com/intl/ko/apis/accounts/docs/AuthForInstalledApps.html)

The module to confirm validity of account information is drawn up as shown below.

① Enter the name of js file whose config.xml has a module.

Put the name of js file which has a module to confirm account information validity in <cpauthjs> item. If

the file name is Auth11101000000.js, put Auth11101000000. The application manager executes the module

including the file. File names should be unique for each application. Check the variables such as

curWidget.id and write the name distinctively.

Page 29: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

29

<cpauthjs>Auth11101000000</cpauthjs>

② Create a file

Create a js file corresponding to the entered file name in the process of ①. A module will be written in

this file. This file is embedded in the top level directory where index.html exists.

③ Draw up a module which confirms validity of account information.

This module is generated in the file made in ②, the format should be in observance of regulations.

Declare the object whose name is the entered value in ①.

Add a method „checkAccount‟ to the object.

checkAccount method confirms validity of the account information on the service site, and it should

deliver the results to the callback function transferred to the factor.

Example

// Object Generated

var Auth11101000000 = {

}

// checkAccount Method Added

Auth11101000000.checkAccount = function (id, pw, fnCallback) {

/**

* The id and pw inputted from the application manager are transferred to the factor.

* Check validity of id and pw, and then operate callback function.

*/

// ...

// Confirmation on Validity

// ...

// Deliver the results

if (isValidAccount) {

fnCallback ('TRUE');

}

else {

fnCallback ('FALSE');

Page 30: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

30

}

}

The value transferring to the Callback function and the effect are like below.

Return value Description

'TRUE' If the transferred ID and Password are valid, return „TRUE‟.

Application manager registers ID and Password in the TV account.

'FALSE' If the account information is invalid, return „FALSE‟.

The application Manager let the user reenter the account information.

'ERROR' Errors occur while confirming validity, return „ERROR‟. The application manager

regards it as an error, after a while, it leads the user to try reusing account

information.

Others Values other than three values above are processed identically with „ERROR‟.

4.4.3. How to download account information on service sites in applications

Applications are able to get account information on service sites. Proceed like the order stated below.

① Configure config.xml like below.

This enables the application manager to understand that this application is available to sign-in and

necessary service site is ‟YourCompany‟.

<cpname>YourCompany</cpname>

<login>y</login>

② Sign-in to the TV account

The account information registered in the account can be available when sign-in process to the TV account

is completed.

③ Execution for an application

Execute the application. Account information on CP(YourCompany) needs to be registered in the

designated TV account in ①. Generally, several service sites are registered in a TV account, on the other

hand, an application can get one service site relevant to the designated CP in ①.

④ How to parse ID and Password

Page 31: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

31

All the conditions are satisfied, ID and Password are transferred to Browser global variable

window.location.search. This variable includes circumstances information, and it should be parsed. Refer

to 6.7 for further information on window.location.search.

Page 32: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

32

4.5. Reset

Reset describes functions to initialize the application.

4.5.1. What is Reset?

The function to execute initial modules realized by applications when deleting or initializing applications

in Application Manager.

4.5.2. How Reset Works?

1. Application Manager brings information in config.xml of the installed application when

deleting/initializing.

2. Check if the application needs a module which initializes through the information in config.xml.

3. If the application has the module that initializes, bring information on the module.

4. Execute the module in accordance with rules and try initializing.

* Application Manager does not obtain any return value but operate the module to initialize.

4.5.3. Necessary Features Developers Should Realize

1. Peculiar Information on config.xml(Refer to Chapter 4)

2. Initialization Module (Refer to Chapter 5)

4.5.4. Guide for Config.xml Realization

Add xml Element as shown below.

<deleteJS>MyReset</deleteJS>

* Without deleteJS Element, the application does not operate the initialization module.

4.5.5. Guide for Module Realization

1. The file name should be the same as class name.

2. No factor.

3. The name of function is “reset”.

var MyReset= {

}

MyReset.reset = function() {

Page 33: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

33

...

...

alert("Reset Complete!");

}

Page 34: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

34

4.6. Example for XHR communication

In this section, we‟ll look at an example for XHR communication, which is a key factor comprising AJAX

technology.

The below example is HTML code that includes XHRExample.js, and executes the XHRExample.onload()

function when the „load‟ event occurs.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>XHR Example</title>

<script type="text/javascript" language="javascript"

src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

<script type="text/javascript" language="javascript"

src="$MANAGER_WIDGET/Common/API/Widget.js"></script>

<script type="text/javascript" language="javascript" src="XHRExample.js"></script>

</head>

<body onload="XHRExample.onload()">

<div id='intro'>XHR Example.</div>

</body>

</html>

The below is JavaScript code. XHRExample is has been declared as an object and has the variable of

XHRObj in it. If XHRObj already exists, XHRExample calls the destroy() method. We will look at this more

specifically later in this chapter. If an XHR object has been successfully created, set it and request data. If

the state of XHR changes to 4, which means data reception is completed, recieveData() that you

registered in onreadystatechange is executed.

var XHRExample = {

XHRObj : null

}

var tvKey = new Common.API.TVKeyValue();

var widgetAPI = new Common.API.Widget();

XHRExample.onload = function () {

widgetAPI.sendReadyEvent();

var URL = ""; // Test URL here

Page 35: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

35

if (this.XHRObj != null)

this.XHRObj.destroy();

this.XHRObj = new XMLHttpRequest();

if (this.XHRObj) {

this.XHRObj.onreadystatechange = function () {

if (XHRExample.XHRObj.readyState == 4) {

XHRExample.recieveData();

}

};

this.XHRObj.open("GET", URL, true);

this.XHRObj.send(null);

}

}

XHRExample.recieveData = function () {

alert(this.XHRObj.responseText);

}

The above example has two remarkable points. One is that the variable of XHRObj is in the XHRExample

object. The other is that the destroy() method is called before an object is assigned to XHRObj.

With Samsung TVs, if you run out of the memory by continuing to create and use the XHR object,

applications in your TV do not work anymore at a certain time. In order to avoid this kind of situation, you

should delete objects you used in the past and assign new ones when you use XHR. To free up objects that

had been used, the object pointer should be maintained. For this, developers should memorize and

manage the variable dealing with XHR objects.

If you want to remove an XHR object from the memory, use the destroy() method of it, and this is the

method that Maple provides to allow you to use the limited memory efficiently.

XHRObjet.destroy

Free up the XHR object you created from the memory.

Syntax XHRObject.destroy()

Parameter None

Return Value None

Remarks This function, which is executed to optimize the memory usage, is only provided by

Page 36: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

36

Maple for Samsung TV users.

Example

if (this.XHRObj != null)

this.XHRObj.destroy();

this.XHRObj = new XMLHttpRequest();

In the above example, two common modules provided by the Application Manager are included. For more

information, turn to Ch. 5 Common modules.

Page 37: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

37

5. Common modules

In this section, we will look at a library shared by all your applications.

5.1. Application Manager’s common modules

The Application Manager provides object modules that all your applications can use. Those common

modules enable your applications to do basic work to be normally running on the screen. Also, using

common modules, individual applications can recognize and identify remote control button events, use

plugins, and communicate with the Application Manager in more convenient and simpler ways.

5.2. How to use common modules

Include common modules you want to use in the index.html file. In order to prevent occurrence of any

parsing order error, it is recommended that you include them at the top of the document.

„$MANAGER_WIDGET‟ allows your applications to access common modules provided by the Application

Manager.

* In SDK, „$MANAGER_WIDGET‟ points the „commonlib‟ folder that SDK installed in.

<script type="text/javascript" language="javascript"

src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

Create an object.

var tvKey = new Common.API.TVKeyValue();

Use known member variable and method.

alert(tvKey.KEY_LEFT);

5.3. TVKeyValue

TVKeyValue

An object that defines TV key code.

Library path $MANAGER_WIDGET/Common/API/TVKeyValue.js

Page 38: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

38

Syntax new Common.API.TVKeyValue()

Parameter None

Return Value TVKeyValue object

Remarks

This is an object having key code used by the TV as a member variable, and identifies

remote control keys pressed by the user by referring to member variables.

(Since Internet@TV version 2.265)

Example

var tvKey = new Common.API.TVKeyValue();

switch (KEY_CODE) {

case tvKey.KEY_LEFT:

// Do something

break;

case tvKey.KEY_RIGHT:

// Do something

break;

default:

break;

}

Members

KEY_TOOLS

KEY_MUTE

KEY_RETURN

KEY_UP

KEY_DOWN

KEY_LEFT

KEY_RIGHT

KEY_WHEELDOWN

KEY_WHEELUP

KEY_ENTER

KEY_INFO

KEY_EXIT

KEY_RED

KEY_GREEN

KEY_YELLOW

KEY_BLUE

KEY_INFOLINK

KEY_RW

KEY_PAUSE

KEY_FF

KEY_PLAY

Page 39: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

39

KEY_STOP

KEY_1

KEY_2

KEY_3

KEY_4

KEY_5

KEY_6

KEY_7

KEY_8

KEY_9

KEY_0

KEY_EMPTY

KEY_PRECH

KEY_SOURCE

KEY_CHLIST

KEY_MENU

KEY_WLINK

KEY_CC

KEY_CONTENT

KEY_FAVCH

KEY_REC

KEY_EMODE

KEY_DMA

KEY_PANEL_CH_UP

KEY_PANEL_CH_DOWN

KEY_PANEL_VOL_UP

KEY_PANEL_VOL_DOWN

KEY_PANEL_ENTER

KEY_PANEL_SOURCE

KEY_PANEL_MENU

KEY_PANEL_POWER

Methods None

Page 40: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

40

5.4. Widget

This is an object that has functions needed for desirable operation of an application. A method that

notifies the Application Manager of starting of an application, a method that registers and frees up keys

users want to use, and other methods are contained in this object.

Widget

Object having functions needed for desirable operation of an application

Library path $MANAGER_WIDGET/Common/API/Widget.js

Syntax new Common.API.Widget()

Parameter None

Return Value Widget object

Remarks (Since Internet@TV version 2.265)

Example var widgetAPI = new Common.API.Widget();

widgetAPI. sendReadyEvent();

Members None

Methods

sendReadyEvent

sendExitEvent

sendReturnEvent

blockNavigation

putInnerHTML

getChannelWidgetListPath

getSearchWidgetListPath

runSearchWidget

5.4.1. sendReadyEvent()

sendReadyEvent

Notifies the Application Manager that the application is ready to be displayed. This event should be passed

to display and run the application on the screen.

Syntax sendReadyEvent()

Parameter None

Return Value None

Remarks (Since Internet@TV version 2.265)

Page 41: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

41

Example var widgetAPI = new Common.API.Widget();

widgetAPI.sendReadyEvent();

Enumeration None

5.4.2. sendExitEvent()

sendExitEvent

Brings the same effect as pressing the exit key. Stops the application and goes back to the TV screen.

Syntax sendExitEvent()

Parameter None

Return Value None

Remarks (Since Internet@TV version 2.265)

Example var widgetAPI = new Common.API.Widget();

widgetAPI.sendExitEvent ();

Enumeration None

5.4.3. sendReturnEvent()

sendReturnEvent

Brings the same effect of pressing the Return key. Finishes the application and takes you to the Application

Manager.

Syntax sendReturnEvent()

Parameter None

Return Value None

Remarks (Since Internet@TV version 2.265)

Example var widgetAPI = new Common.API.Widget();

widgetAPI.sendReturnEvent ();

Enumeration None

5.4.4. blockNavigation()

blockNavigation

Page 42: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

42

Key event cannot be forced to return.

Syntax blockNavigation(keyEvent)

Parameter keyEvent: Key event

Return Value None

Remarks

KEY_RETURN and KEY_EXIT events forcibly close the operating application. The func

prevents forced closure and keep being executing.

(Since Internet@TV version 2.265)

Example

function keyDown () {

switch(event.keyCode) {

case this.tvKey.KEY_LEFT:

// Do something

break;

case this.tvKey.KEY_RIGHT:

// Do something

break;

case this.tvKey.KEY_RETURN:

widgetAPI.blockNavigation(event);

// Not terminated

break;

case this.tvKey.KEY_EXIT:

// Terminated by force

break;

default:

break;

}

}

Enumeration None

5.4.5. putInnerHTML()

putInnerHTML

innerHTML method to fix memory issues.

Syntax putInnerHTML(div, contents)

Parameter div: Div Element to use innerHTML

contents: Things to insert in innerHTML

Return Value None

Remarks

Required to use this method because repetitive use of innerHTML can occur memory

issues.

(Since Internet@TV version 2.265)

Example var widgetAPI = new Common.API.Widget();

Page 43: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

43

var divElement = document.getElementById("divID");

var contents = "Text to change";

widgetAPI.putInnerHTML(divElement, contents);

Enumeration None

5.4.6. getChannelWidgetListPath()

getChannelWidgetListPath

Method that brings the path of xml file having the child application list of the current channel bound

application

Syntax getChannelWidgetListPath()

Parameter None

Return Value string : xml file path

Remarks

This method is used when the channel bound application needs information on the

currently installed child application.

(Since Internet@TV version 2.265)

Example var widgetAPI = new Common.API.Widget();

var xmlPath = widgetAPI.getChannelWidgetListPath();

Enumeration None

5.4.7. getSearchWidgetListPath()

getSearchWidgetListPath

Method that brings the path of xml file having the list of applications related

Syntax getSearchWidgetListPath()

Parameter None

Return Value string : xml file path

Remarks

This method is used when a search tag in config.xml requires information on an

application whose search tag is set as „y‟.

(Since Internet@TV version 2.265)

Example var widgetAPI = new Common.API.Widget();

var xmlPath = widgetAPI.getSearchWidgetListPath();

Enumeration None

Page 44: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

44

5.4.8. runSearchWidget()

runSearchWidget

Method called when executing another application in an application

Syntax runSearchWidget ()

Parameter appID : The application ID you intend to operate

extraInfo : The string that transferred to the executing application

Return Value None

Remarks

This method is used when the channel bound application requires information on the

installed child application at present.

(Since Internet@TV version 2.265)

Example var widgetAPI = new Common.API.Widget();

widgetAPI.runSearchWidget(“111011000001”,”key1=value1&key2=value2”);

Enumeration None

5.4.9. checkSapTicket ()

checkSapTicket

Method called when checking to have the valid ticket for current logged-in user.

Syntax checkSapTicket ()

Parameter None

Return Value None

Remarks

You should register event handler for passing the return value.

If you have valid ticket, the return value is “stat=ok&ticket=686a8281-e952-4dcc-

a67b-57e8f92e5530”

Otherwise, it is “stat=fail&ticket=null”.

(Since Internet@TV version 3.037)

Example

// Register Event Handler

curWidget.onWidgetEvent = AAAA;

var widgetAPI = new Common.API.Widget();

widgetAPI.checkSapTicket();

function AAAA(event){

if( event.type == Common.API.EVENT_ENUM.PNS_CHECK_TICKET){

// The return value is event.data.

// TODO

}

Page 45: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

45

}

Enumeration None

5.4.10. requestSapTicket ()

requestSapTicket

Method called when requesting new Sap Ticket for Application Server.

Syntax requestSapTicket ()

Parameter None

Return Value None

Remarks

You should register event handler for passing the return value.

If new ticket is generated normally, the return value is “stat=ok&ticket=686a8281-

e952-4dcc-a67b-57e8f92e5530”

Otherwise, it is “stat=fail&ticket=null”.

(Since Internet@TV version 3.037)

Example

// Register Event Handler

curWidget.onWidgetEvent = AAAA;

var widgetAPI = new Common.API.Widget();

widgetAPI.requestSapTicket();

function AAAA(event){

if( event.type == Common.API.EVENT_ENUM.PNS_REQUEST_TICKET){

// The return value is event.data.

// TODO

}

}

Enumeration None

5.5. Plugin

The Application Manager provides a wrapper class that allows you to use some plugin functions in more

convenient ways. If you want to take advantage of this class, just insert objects needed for use of plugins

in the index.html document. Then, the Application Manager will give you an appropriate class method.

Plugin

Object that is wrapped for convenient use of plugins

Page 46: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

46

Library path $MANAGER_WIDGET/Common/API/Plugin.js

Syntax new Common.API.Plugin()

Parameter None

Return Value Plugin object

Remarks (Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOnWatchDog();

Members None

Methods

Object ID : pluginObjectTVMW

setOnWatchDog

setOffWatchDog

registKey

unregistKey

registIMEKey

unregistIMEKey

registAllKey

unregistAllKey

registFullWidgetKey

registPartWidgetKey

Object ID : pluginObjectVideo

setOnOSDState

setOffOSDState

Object ID : pluginObjectVideo

setOnOSDState

setOffOSDState

Object ID : pluginObjectNNavi

SetBannerState

ShowTools

setOnIdleEvent

setOffIdleEvent

setOnScreenSaver

setOffScreenSaver

Object ID : pluginObjectAppCommon

isViewerKey

Object list pluginObjectTVMW

<OBJECT id='pluginObjectTVMW' border=0 classid='clsid:SAMSUNG-INFOLINK-TVMW'

Page 47: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

47

style='opacity:0.0;background-color:#000000;width:0px;height:0px;'></OBJECT>

pluginObjectVideo

<OBJECT id='pluginObjectVideo' border=0 classid='clsid:SAMSUNG-INFOLINK-VIDEO'

style='opacity:0.0;background-color:#000000;'></OBJECT>

pluginObjectNNavi

<OBJECT id='pluginObjectNNavi' classid='clsid:SAMSUNG-INFOLINK-NNAVI'

style='opacity:0.0;background-color:#000000;width:0px;height:0px;'></OBJECT>

pluginObjectAppCommon

<OBJECT id='pluginObjectAppCommon' classid='clsid:SAMSUNG-INFOLINK-APPCOMMON'

style='opacity:0.0;background-color:#000000;width:0px;height:0px;'></OBJECT>

5.5.1. setOnWatchDog()

setOnWatchDog

Turns on the Watch dog function.

Syntax setOnWatchDog()

Parameter None

Return Value None

Remarks (Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOnWatchDog();

Enumeration None

5.5.2. setOffWatchDog()

setOffWatchDog

Turns off the Watch dog function.

Syntax setOffWatchDog()

Parameter None

Return Value None

Remarks (Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOffWatchDog();

Enumeration None

Page 48: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

48

5.5.3. setOnOSDState()

setOnOSDState

Sets the area where OSD is protected.

Syntax setOnOSDState(left, top, width, height)

Parameter

left : left coordinate of the area

top : top coordinate of the area

width : width of the area

height : height of the area

Return Value None

Remarks (Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOnOSDState(0,0, 330, 540);

Enumeration None

5.5.4. setOffOSDState()

setOffOSDState

Cancels the previously set OSD area.

Syntax setOffOSDState(left, top, width, height)

Parameter

left : left coordinate of the area

top : top coordinate of the area

width : width of the area

height : height of the area

Return Value None

Remarks (Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOffOSDState(0,0, 330, 540);

Enumeration None

Page 49: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

49

5.5.5. registKey()

registKey

Lets the Application Manager register specific key

Syntax registKey(pNumKeyCode)

Parameter pNumKeyCode: key code

Return Value None

Remarks

Registration/Unregistration of keys should be done after window.onshow event. Refer

to Chap. 6.4 How to use keys on remote control for more details.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.registKey(tvKey.KEY_ TOOLS);

Enumeration None

5.5.6. unregistKey()

unregistKey

Lets the Application Manager unregister specific key

Syntax unregistKey(pNumKeyCode)

Parameter pNumKeyCode: key code

Return Value None

Remarks

Registration/Unregistration of keys should be done after window.onshow event. Refer

to Chap. 6.4 How to use keys on remote control for more details.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.unregistKey(tvKey.KEY_ TOOLS);

Enumeration None

5.5.7. registIMEKey()

registIMEKey

Lets the Application Manager register IME key

Page 50: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

50

Syntax registIMEKey()

Parameter None

Return Value None

Remarks

Registers number keys from 0 to 9, „-„(hyphen), and previous channel key used in

entering IME.

Registration/Unregistration of keys should be done after window.onshow event. Refer

to Chap. 6.4 How to use keys on remote control for more details.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.registIMEKey();

Enumeration None

5.5.8. unregistIMEKey()

unregistIMEKey

Lets the Application Manager unregister IME key

Syntax unregistIMEKey()

Parameter None

Return Value None

Remarks

Unregisters number keys from 0 to 9, „-„(hyphen), previous channel key used in

entering IME.

Registration/Unregistration of keys should be done after window.onshow event. Refer

to Chap. 6.4 How to use keys on remote control for more details.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.unregistIMEKey();

Enumeration None

5.5.9. registAllKey

registAllKey

Lets the Application Manager register all keys

Page 51: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

51

Syntax registAllKey()

Parameter None

Return Value None

Remarks

Registers all keys

Registration/Unregistration of keys should be done after window onshow event. Refer

to Chap. 6.4 How to use keys on remote control for more details.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.registAllKey();

Enumeration None

5.5.10. unregistAllKey()

unregistAllKey

Lets the Application Manager unregister all keys

Syntax unregistAllKey()

Parameter None

Return Value None

Remarks

Unregisters all keys

Registration/Unregistration of keys should be done after window onshow event. Refer

to Chap. 6.4 How to use keys on remote control for more details.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.unregistAllKey();

Enumeration None

5.5.11. registFullWidgetKey()

registFullWidgetKey

Lets the Application Manager register specific key group

Syntax registFullWidgetKey()

Parameter None

Page 52: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

52

Return Value None

Remarks

Registers keys for fullwidget

Registration/Unregistration of keys should be done after window onshow event. Refer

to Chap. 6.4 How to use keys on remote control for more details.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.registFullWidgetKey();

Enumeration None

5.5.12. registPartWidgetKey()

registPartWidgetKey

Lets the Application Manager register specific key group

Syntax registPartWidgetKey ()

Parameter None

Return Value None

Remarks

Registers keys for part widget

Registration/Unregistration of keys should be done after window onshow event. Refer

to Chap. 6.4 How to use keys on remote control for more details.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI. registPartWidgetKey ();

Enumeration None

5.5.13. SetBannerState()

SetBannerState

A function using when you want to put volume and channel OSD with the application.

Syntax SetBannerState (nState)

Parameter

nState : Defined value on OSD you want to bring with the application.

PL_NNAVI_STATE_BANNER_NONE = 0;

PL_NNAVI_STATE_BANNER_VOL = 1;

PL_NNAVI_STATE_BANNER_VOL_CH = 2;

Page 53: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

53

Return Value None

Remarks

When you intend to bring up volume OSD on the screen, volume key value should be

registered. So does channels. See an example.

(Since Internet@TV version 2.265)

Example

var PL_NNAVI_STATE_BANNER_NONE = 0;

var PL_NNAVI_STATE_BANNER_VOL = 1;

var PL_NNAVI_STATE_BANNER_VOL_CH = 2;

var pluginAPI = new Common.API.Plugin();

var tvKey = new Common.API.TVKeyValue();

pluginAPI.unregistKey(tvKey.KEY_VOL_UP);

pluginAPI.unregistKey(tvKey.KEY_VOL_DOWN);

pluginAPI.SetBannerState(PL_NNAVI_STATE_BANNER_VOL);

Enumeration None

5.5.14. ShowTools()

ShowTools

A function to bring popup windows for screen and sound adjustment.

Syntax ShowTools (nTool)

Parameter

nTool: Defined value on a popup window you want to bring.

0 : Sound Setting popup

1 : Picture Setting popup

Return Value None

Remarks

You can see the point when the popup window is closed by signing up for

curWidget.onWidgetEvent.

(Since Internet@TV version 2.265)

Example

curWidget.onWidgetEvent = function(){

// a code that will be executed after closing the popup window

}

var pluginAPI = new Common.API.Plugin();

pluginAPI.ShowTools(1);

Enumeration None

Page 54: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

54

5.5.15. setOnIdleEvent()

setOnIdleEvent

The function to set idle on to close the application in case that there is no input for a certain time

Syntax setOnIdleEvent()

Parameter None

Return Value None

Remarks

1. Default is set as „Idle ON‟.

2. Recall the function when idle process is required after calling setOffIdleEvent

method.(ex. When closing image playing)

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOnIdleEvent();

Enumeration None

5.5.16. setOffIdleEvent()

setOffIdleEvent

The function to set idle off in order not to close the application despite no input for a certain time

Syntax setOffIdleEvent()

Parameter None

Return Value None

Remarks

1. Default is set as „idle ON‟.

2. Setting Idle off is needed in case of watching clips for a long time

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOffIdleEvent();

Enumeration None

5.5.17. setOnScreenSaver()

setOnScreenSaver

Page 55: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

55

The function to set on screen saver

Syntax setOnScreenSaver()

Parameter None

Return Value None

Remarks Screensaver is off when the application is closed.

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOnScreenSaver();

Enumeration None

5.5.18. setOffScreenSaver()

setOffScreenSaver

The function to set off screen saver

Syntax setOffScreenSaver()

Parameter None

Return Value None

Remarks Available after calling setOnScreenSaver

(Since Internet@TV version 2.265)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOffScreenSaver();

Enumeration None

5.5.19. isViewerKey()

isViewerKey

The function to decide whether the key value currently entered is for TV View or application

Syntax isViewerKey (pKeyCode)

Parameter pKeyCode: entered remote control key value at present

Return Value True - Key processing by TV Viewer

False – Key processing by Application

Remarks When the TV viewer needs to proceed the entered remote control keys, the inputted

value in TV viewer is automatically transferred

Page 56: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

56

(Since Application Manager 2.266)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.isViewerKey(KEY_ENTER)

Enumeration None

5.5.20. setOnFullScreen ()

setOnFullScreen

The function to set on full screen.

Syntax setOnFullScreen()

Parameter None

Return Value None

Remarks In case of <fullwidget>y</fullwidget>, it is not necessary to call this function.

(Since Internet@TV version 2.306)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOnFullScreen();

Enumeration None

5.5.21. setOffFullScreen()

setOffFullScreen

The function to set off full screen.

Syntax setOffFullScreen()

Parameter None

Return Value None

Remarks Available after calling setOnFullScreen.

(Since Internet@TV version 2.306)

Example var pluginAPI = new Common.API.Plugin();

pluginAPI.setOffFullScreen();

Enumeration None

Page 57: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

57

5.6. CImageViewer

Introduces a common module „ClmageViewer‟ and describes how to use it

5.6.1. CImageViewer?

CImageViewer is a common module that enables JPEG files to be played in SAMSUNG DTV. With this

module, Images can be displayed on DTV big screen with high resolution,1920 x 1080 pixels. In addition,

images are marked by scaling the size you need at the location you prefer, and transition effect in various

manners is available.

If you want to utilize CImageViewer, TV source should be designated as a Media source. Source Transition

can be made by setting <srcctl> item to „y‟ or through SetMediaSource() of TVMW Plugin.

5.6.2. Specifications

Features Description

Resolution

1920 x 1080 pixels

Images are displayed in Media source. The display pixel of the

application is marked as 960 x 540 pixels, but that of the displaying

image in media source is marked as 1920 x 1080 pixels.

Supported file format JPEG only

Scaling range

Designate the area where an image should be displayed and play it, the

image is scaled in observance of the area you set. At this stage,

resolution should be set over 300 pixels. If it is less than 30 pixels,

images can be distorted or flicking.

Transition Effects

Total 10 modes are provided.

(NONE, FADE1, FADE2, BLIND, SPIRAL, CHECKER, LINEAR, STAIRS, WIPE,

RANDOM)

Refer to 5.6.4. Transition Effect for more information.

5.6.3. Basic Instructions

Appoints locations of images and displays images by scaling

① Include common module

common module is included by putting the code below in the <head> of index.html

Page 58: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

58

<script type="text/javascript" language="javascript"

src="$MANAGER_WIDGET/Common/API/CImageViewer.js"></script>

② Create instance

Create ImageViewer instance.

var ImageViewer = new CImageViewer('Common ImageViewer');

③ Initialize ImageViewer

Set the area where images are displayed and functions which will execute each event. show() method

shows the area managed by ImageViewer on screen.

Area designation via setFrameArea() method is executed based on basic resolution (960x540 pixel). The

appointed area operates at 1920x1080 pixel.

ImageViewer.setFrameArea(100, 100, 300, 300);

ImageViewer.setOnNetworkError(function(){

alert('Network error occurs!');

});

ImageViewer.show();

④ Play images

Play images. Images remain original proportion at the designated areas and they are indicated by scaling.

ImageViewer.play('$WIDGET/picture.jpg', 640, 480);

⑤ Closing the App

When the App is closed, ImageViewer should be initialized with calling destroy() method. In case that the

application is closed without initialization while playing images in ImageViewer, fatal problems such as TV

system pause might occur and there could be toubles using ImageViewer in other applications.

// Run ImageViewer.destroy() method on <body>'s onunload function

ImageViewer.destroy();

5.6.4. Transition Effect

The function to give special effects. The effect applies to the whole screen not to the image area.

Following describes the process to transfer page 1 to page 2. There are 10 modes available.

Page 59: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

59

Effect Description

NONE Transition without effects.

FADE1 Page 1 is faded out and page 2 is faded in.

FADE2 Page 1 is white faded out and page2 is faded in.

BLIND Page 2 appears with blind effect.

SPIRAL Page 2 appears spinning clockwise from the center.

CHECKER Page 2 appears gradually in a grid pattern.

LINEAR Each line of Page 1 is replaced with the lines of page 2 from left to right.

STAIRS The page is transformed to page 2 gradually in the shape of steps from upper left

to lower right.

WIPE Page transition happens when the central is spread up and down, or upper and

down sides are reached to the center.

RANDOM Effects above except for NONE are operated randomly.

It is available to refer to variables of Effect members in an instance of CImageViewer or CImageViewer

class.

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.Effect.FADE2

or

CImageViewer.Effect.FADE2

5.6.4.1. Action Principles of Slideshow

Slideshow operates as stated below.

Display the first image Prepare the second image Display the second image Prepare the third

image …

Play the first image through .play(). Buffering complete event occurs while playing, afterward,

Rendering complete event which informs that the image are thoroughly scattered on screen takes

place. Then, call prepareNext() to prepare next image. The screen has not been changed because

preparation is proceeded on background. When the image is ready to show, Buffering complete event

informs that. Since this point, Transition Effect is available to see by calling .showNow(). After the

Effect is completed, Rendering complete event occurs again to proceed next image.

Page 60: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

60

5.6.4.2. How to Realize Transition Effect

An image display is terminated, the next image is loaded. When loading is completed, Transition effect

starts to play. After the Transition effect, the next image is loaded. The points when image display is

ended and loading is completed are acknowledged by the Event loaded from ImageViewer.

① ImageViewer Setup

Full screen is designated as area of use for ImageViewer. Register a function to find out the points an

image started to be loaded and playing is over.

ImageViewer = new CImageViewer(„Common ImageViewer');

ImageViewer.setFrameArea(0, 0, 960, 540);

ImageViewer.setOnBufferingComplete(function(){

alert('Image ready!');

});

ImageViewer.setOnRenderingComplete(function(){

alert('You can prepare next image!');

});

② Slideshow Mode Setup

There are many differences in internal process sequences between general image display and image

display by Transition effect. Set a method notifying slideshow mode to enable ImageViewer to execute

Transition effect.

ImageViewer.startSlideshow();

③ Play the first image

The first image is played with play() method. Factors such as width and height except URL do not need to

Page 61: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

61

be provided because it is not available to designate location of images in slideshow mode.

ImageViewer.play('$WIDGET/picture_1.jpg', 640, 480);

④ Prepare to load the next image

The next image is loaded after the first image is displayed. The moment when the first playing is ended is

equal to the point when the registered function via setOnRenderingComplete() begins to execute. Then,

location of the image and effects you intend to apply are settled by prepareNext(). After a while,

Buffering Completed, which means that the next image is ready for display, occurs.

ImageViewer.prepareNext('$WIDGET/picture_2.jpg ', ImageViewer.Effect.FADE2);

⑤ Start Effect

Transition effect starts to play once showNow() is called. When Effect animation is completed, Rendering

Complete event, which indicates completion of image display, takes place. Successive Transition effect

can be realized by reiterating process ④. Be sure to remember that calling showNow() should be made

after Buffering Complete event.

⑥ End slideshow mode

Call endSlideshow() to sneak out of slideshow mode. This method enables next images to display normally.

ImageViewer.endSlideshow();

5.6.4.3. Slideshow Mode and Restrictions

There are several restrictions in using Transition effect.

Scaling is not available.

Transition effect applies to the whole screen, so it is not available to operate with scaling simultaneously.

Images should be palyed in full screen (960x540 pixels). Set as shown below.

setFrameArea(0, 0, 960, 540);

Images are displayed at the center of screen in original size. If the size of original image is larger than

width 1920 pixels and height 1080 pixels, the image will be downscaled in accordance with aspect ratio,

and displayed in the center screen.

Page 62: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

62

Do not execute other methods while operating Transition effect.

If other methods are operated while proceeding Transition effect, several problems occur such as troubles

on image transition. It is recommended that other operations be done after Rendering complete event

indicating that the effect is over.

Hardware restrictions

SAMSUNG DTV has several models, but some of them could not support Transition effect due to hardware

restrictions. CImageViewer provides isEffectAvailable() method to check the availability.

5.6.5. Events

ImageViewer loads various events in order to control image display more precisely. You can operate events

after registering a function to the necessary Event.

Event Description Function

Buffering start

If the image you intend to play exists on the internet, this

occurs when the image starts to be loaded actually after

successful connection with server.

setOnBufferingStart()

Buffering

complete

This happens when the image is ready to display after

loading. setOnBufferingComplete()

Rendering

complete

This occurs when an image is completely displayed on the

screen. In case of using Transition effect, this happens

when Effect animation has been completed.

setOnRenderingComplete()

Network error This appears in case that image URL Is not accessed

normally. setOnNetworkError()

Render error This takes place when image decoding and rendering are

failed. setOnRenderError()

5.6.6. Play local files

ImageViewer displays images in application or USB as well as on the Internet. A special path starting with

„$‟ is necessary to display images in application or USB.

5.6.6.1. Play Images in an Application

The string „$WIDGET‟ indicates a directory containing an application. Images in the application can be

played by sending strings as shown below to ImageViewer.play().

Page 63: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

63

ImageViewer.play('$WIDGET/picture_2.jpg ', 640, 480);

5.6.6.2. Play images in USB

The string '$USB_DIR' indicates USB. To display images in USB, the location where the USB is mounted in TV

is needed because TV has plural USB ports, and mounting path varies for each USB connection. The

location can be found via Storage Plugin. Refer to Plugin guide for more details on Storage Plugin. Here,

we apply minimum functions to show examples.

① How to figure out mount route

The path to mount USB is found out by Storage plugin. Root directory path of USB is completed by adding

the path mounted by the string „$USB_DIR‟ which indicates USB.

// Plugin object Designated

var eStoragePlugin = document.getElementById('pluginObjectStorage');

// Provided that one USB is connected

var deviceId = eStoragePlugin.GetUSBDeviceID(0);

// Provided that USB has one partition

var mountPath = eStoragePlugin.GetUSBMountPath(deviceId, 0);

var USBRootPath = '$USB_DIR/' + mountPath; // USB root directory path

Your TV has more than two USB ports. If you need to control more than two USBs or use USB with divided

partitions, other functions in Storage plugin are required.

② How to create file routes

File information in USB is available, using readDir() API of Maple browser. readDir() puts file information on

the path in an array and returns it. Below shows an example to refer to whether it is a directory or not

and file name. Refer to 8. File API for more information.

var fileSystemObj = new FileSystem(); // Maple API

var dirs = new Array();

var files = new Array();

var data = fileSystemObj.readDir(USBRootPath); // readDir() returns the array of file information

for (var i = 0; i < data.length; i++) {

if (data[i].isDir) {

dirs.push(data[i].name);

}

Page 64: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

64

else {

files.push(data[i].name);

}

}

The whole path of image files in USB is created by the file information figured above.

var USBImageFile = USBRootPath +'/'+ directory +'/'+ file;

The actual variable of USBImageFile could be the same as below.

'$USB_DIR/sda1/myphotos/picture_2.jpg'

③ Image files in USB are displayed.

ImageViewer.play(USBImageFile);

5.6.7. Reference

5.6.7.1. CImageViewer

CImageViewer

A class to play images

Library path $MANAGER_WIDGET/Common/API/CImageViewer.js

Syntax New CImageViewer(objectName:String)

Parameter

objectName:String

Includes names to distinguish generated objects. The debug message which occurred

from ImageViewer has the name on it.

Return Value CImageViewer object

Remarks

ImageViewer provided by TV in reality is only one. Therefore, it is urged that one

object of CImageViewer be created.

If an image is played via ImageViewer, destroy() should be called when closing the

application.

(Since Application Manager 2.269)

Page 65: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

65

Example var ImageViewer = new CImageViewer('Common ImageViewer');

Members Effect

Methods

clearScreen

destroy

endSlideshow

getStopFlag

hide

isEffectAvailable

isValidType

play

prepareNext

setDisplayArea

setFrameArea

setOnBufferingComplete

setOnBufferingStart

setOnNetworkError

setOnRenderError

setOnRenderingComplete

show

showNow

startSlideshow

stop

5.6.7.2. Effect

Effect

An object defined by Transition Effect Value

Library path $MANAGER_WIDGET/Common/API/CImageViewer.js

Syntax var ImageViewer = new CImageViewer(objectName:String);

ImgeViewer.Effect.VALUE

Parameter None

Return Value None

Remarks INIT is for internal action, do not us it.

(Since Application Manager 2.269)

Example var ImageViewer = new CImageViewer('Common ImageViewer');

Page 66: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

66

ImageViewer.Effect.FADE1;

Members

NONE

FADE1

FADE2

BLIND

SPIRAL

CHECKER

LINEAR

STAIRS

WIPE

RANDOM

Methods None

5.6.7.3. clearScreen()

clearScreen

Deletes images displaying on the page

Syntax ImageViewer.clearScreen()

Parameter None

Return Value None

Remarks stop() is not able to remove the playing image. To delete the image, call clearScreen.

(Since Application Manager 2.269)

Example var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.clearScreen();

Enumeration None

5.6.7.4. destroy()

destroy

Pauses the playing image and initializes ImageViewer

Syntax ImageViewer.destroy()

Parameter None

Return Value None

Remarks

If you have used ImageViewer, this function should be called when closing the

application. It is recommended that the function registered onunload function of

<body> element call this method. The function is called when the application ends.

(Since Application Manager 2.269)

Page 67: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

67

Example var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.destroy ();

Enumeration None

5.6.7.5. endSlideshow()

endSlideshow

Ends slideshow mode

Syntax ImageViewer.endSlideshow()

Parameter None

Return Value None

Remarks

Call startSlideshow() to enter slideshow mode which includes transition effect.

prepareNext() and showNow() work only in slideshow mode.

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.startSlideshow();

… // Use transition effect

ImageViewer.endSlideshow();

Enumeration None

5.6.7.6. getStopFlag()

getStopFlag

Confirms that ImageViewer is stopped or not

Syntax ImageViewer.getStopFlag();

Parameter None

Return Value Boolean

If the ImageViewer is stopped, return „true‟, if it is operating, return „false‟.

Remarks (Since Application Manager 2.269)

Example var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer. getStopFlag();

Enumeration None

Page 68: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

68

5.6.7.7. hide()

hide

Hides areas managed by ImageViewer

Syntax ImageViewer.hide();

Parameter None

Return Value None

Remarks (Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.show();

… // Play images!

ImageViewer.stop();

ImageViewer.hide();

Enumeration None

5.6.7.8. isEffectAvailable()

isEffectAvailable

Checks if Transition effect is available

Syntax ImageViewer.isEffectAvailable();

Parameter None

Return Value

Boolean

If user settings are feasible for Transition effect, return „true‟, if not, return „false‟.

(Since Application Manager 2.269)

Remarks Some models do not support Transition effect due to hardware restrictions. In these

models, Effect animation is not workable even in slideshow mode.

Example var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.isEffectAvailable();

Enumeration None

5.6.7.9. play()

Play

Plays images

Page 69: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

69

Syntax ImageViewer.play(url:String, width:Number, height:Number);

Parameter

url:String

Available to display image URL, images in Application and USB

width:Number

Size unit of an image (width, height) is pixel. The image is scaled based on the pixels

and displayed in the designated area by setFrameArea(). Slideshow mode does not

need this.

height:Number

Size unit of an image (width, height) is pixel. The image is scaled based on the pixels

and displayed in the designated area by setFrameArea(). Slideshow mode does not

need this.

Return Value (Since Application Manager 2.269)

Remarks Playable image type is JPEG only.

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setFrameArea(50,50,480,320);

ImageViewer.play(image_url, image_width, image_height);

Enumeration None

5.6.7.10. prepareNext()

prepareNext

Method to load the next image to execute Transition effect in slideshow mode

Syntax ImageViewer.prepareNext(url:string, effect:ImageViewer.Effect);

Parameter

url:string

Available to display image URL, images in Application and USB

effect:ImageViewer.Effect

Refer to Transition effect you intend to apply and Effect variables in the instance of

CImageViewer.

Return Value None

Remarks

When this method is called, an image is started to be loaded. Effect animation is

shown by calling showNow() after Buffering Complete event.

Transition effect might not be supported by several models because of hardware

restrictions. Use isEffectAvailable() to find out that Transition effect is available in

your TV.

(Since Application Manager 2.269)

Example var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setFrameArea(0,0,960,540);

ImageViewer.startSlideshow();

Page 70: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

70

ImageViewer.play(firstImage, 300, 400);

// after Rendering complete event

ImageViewer.prepareNext(NextImage, ImageViewer.Effect.FADE1);

// after Buffering complete event

ImageViewer.shwoNow();

// after finishing slideshow

ImageViewer.endSlideshow();

Enumeration None

5.6.7.11. setFrameArea()

setFrameArea

Sets the area where images are marked. Images are displayed within the area.

Syntax ImageViewer.setFrameArea(left:Number, top:Number, width:Number, height:Number);

Parameter

left:Number

Left coordinate of the area

top:Number

Top coordinate of the area

width:Number

Width of the area

height:Number

Height of the area

* Unit is pixel.

Return Value None

Remarks

For instance, if the image is set as setFrameArea(0,0,225,200), the upper left area of

TV screen is transferred to Media source, Images at 450 x 400 pixels are realized

remaining intact.

If an image you intend to display is larger than the standard, it is scaled in

accordance with aspect ratio and displayed in the area.

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setFrameArea(0,0,480,320);

ImageViewer.play(image_url, image_width, image_height);

Enumeration None

Page 71: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

71

5.6.7.12. setOnBufferingComplete()

setOnBufferingComplete

Registers a function executed in case of Buffering complete event while loading an image

Syntax ImageViewer.setOnBufferingComplete(callback:function);

Parameter callback:function

The function executed in the event of Buffering complete event

Return Value None

Remarks

Buffering complete event occurs after image loading. If this event takes places after

calling prepareNext(), it means that the image is ready for Transition effect. At this

stage, calling showNow() begins effect animation.

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setOnBufferingComplete(function(){

// blah blah

});

Enumeration None

5.6.7.13. setOnBufferingStart()

setOnBufferingStart

Registers a function executed in case of Buffering start event

Syntax ImageViewer.setOnBufferingStart(callback:function);

Parameter callback:function

The function executed in the event of Buffering start event

Return Value None

Remarks

If the image you intend to play is on the Internet, this event happens when starting to

load actual image data after connecting to the server successfully.

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setOnBufferingStart(function(){

// blah blah

});

Enumeration None

Page 72: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

72

5.6.7.14. setOnNetworkError()

setOnNetworkError

Registers a function executed in case of Network error event

Syntax ImageViewer.setOnNetworkError(callback:function);

Parameter callback:function

The function executed in the event of Network error event

Return Value None

Remarks This event occurs in case of network errors while loading images.

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setOnNetworkError(function(){

// blah blah

});

Enumeration None

5.6.7.15. setOnRenderError()

setOnRenderError

Registers a function executed in case of Decoding or Rendering error

Syntax ImageViewer.setOnRenderError(callback:function);

Parameter callback:function

The function executed in case of Decoding or Rendering error

Return Value None

Remarks

This event takes place when an error occurs while decoding and rendering after

buffering and when trying playing a format not basically supported.

(Image files except for JPEG)

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setOnRenderError(function(){

// blah blah

});

Enumeration None

Page 73: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

73

5.6.7.16. setOnRenderingComplete ()

setOnRenderingComplete

Registers a function executed in case of Rendering complete event

Syntax ImageViewer.setOnRenderingComplete(callback:function);

Parameter callback:function

The function executed in the event of Rendering complete event

Return Value None

Remarks

This event occurs when the image displays completely on the screen. If Transition

effect is used, the event occurs at the point when Effect animation is ended.

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setOnRenderingComplete(function(){

// blah blah

});

Enumeration None

5.6.7.17. show()

Show

Shows area managed by ImageViewer on screen

Syntax ImageViewer.show();

Parameter None

Return Value None

Remarks (Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.show();

… // Play images!

ImageViewer.stop();

ImageViewer.hide();

Enumeration None

5.6.7.18. showNow ()

showNow

Page 74: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

74

Transition effect is begun to play. Loading the image should be ended via prepareNext().

Syntax ImageViewer.showNow();

Parameter None

Return Value None

Remarks

Transition effect is not provided in several models owing to hardware restrictions.

Refer to isEffectAvailable().

Calling prepareNext() starts to load a image. Effect animation is shown by calling

showNow() after Buffering complete event.

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setFrameArea(0,0,960,540);

ImageViewer.startSlideshow();

ImageViewer.play(firstImage, 300, 400);

// after Rendering complete event

ImageViewer.prepareNext(NextImage, ImageViewer.Effect.FADE1);

// after Buffering complete event

ImageViewer.shwoNow();

// after finishing slideshow

ImageViewer.endSlideshow();

Enumeration None

5.6.7.19. startSlideshow ()

startSlideshow

Starts slideshow mode

Syntax ImageViewer.startSlideshow()

Parameter None

Return Value None

Remarks

If you want to close slideshow mode, call endSlideshow().

Methods such as prepareNext() and showNow() are available only in slideshow mode.

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.startSlideshow();

… // Use transition effect

Page 75: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

75

ImageViewer.endSlideshow();

Enumeration None

5.6.7.20. stop ()

stop

Stops image processing

Syntax ImageViewer.stop();

Parameter None

Return Value None

Remarks

This does not get rid of playing images on screen. It stops image processing such as

image loading and Transition effect animation. If you want to remove playing images

from the screen, refer to clearScreen().

(Since Application Manager 2.269)

Example

var ImageViewer = new CImageViewer('Common ImageViewer');

ImageViewer.setFrameArea(50,50,480,320);

ImageViewer.play(image_url, image_width, image_height);

ImageViewer.stop();

Enumeration None

Page 76: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

76

6. Tips for application developers

This section describes several pieces of information that are useful for application developers.

6.1. Function necessary to be called when you open an application

For an application to be run, it should ask the Application Manager to display itself on the screen. Only

when the Application Manager is requested to do so, it displays the corresponding application on the

screen. Any request should be made through a common module. Call the sendReadyEvent() method of the

Widget object in the common module.

var widgetAPI = new Common.API.Widget(); // Create Common module

widgetAPI.sendReadyEvent(); // Send ready message to Application Manager

6.2. Access point

Whenever you open an application, the Maple browser reads the index.html document. If you implement

an application by selecting an application and clicking Enter in the Application Manager, the browser starts

to read the index.html document. Register a JavaScript function in the „onload‟ property so that when the

<body> load event occurs, the application is started. The application must calls sendReadyEvent() of the

Widget object in the common module.

<body onload="Main.onLoad();">

6.3. Handling remote control key events

If any button on the remote control is pressed, the „keydown‟ event occurs. This event is passed to an

element receiving focus at the point of time when the event occurs. If the element has registered a

function in the „onkeydown‟ property, that function is executed. The function identifies which button is

pressed using event.keyCode.

You should note that an element that is supposed to respond to the „keydown‟ event should be receiving

focus. If there‟s no element receiving focus, there will be no relation on the TV screen even though you

press a remote control button.

All the remote control keys have been defined by member variables of the tvKeyValue object.

Page 77: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

77

Look at the example below. Insert an element that will have focus in index.html.

<a href='javascript:void(0);' id='anchor' onkeydown='Main.keyDown();'></a>

Create a function that will be registered in the „onkeydown‟ property.

Main.keyDown = function(){ // Key handler

var keyCode = event.keyCode;

alert("Main Key code : " + keyCode);

switch (keyCode) {

case tvKey.KEY_LEFT:

/**

* Code for Left key event!

*/

break;

case tvKey.KEY_RIGHT:

break;

case tvKey.KEY_UP:

break;

case tvKey.KEY_DOWN:

break;

case tvKey.KEY_ENTER:

break;

case tvKey.KEY_RETURN:

break;

}

}

6.4. Remote control keys for applications

If you access an application, the Application Manager registers basic keys relevant to it. A key event

registered in an application occurs, it is loaded to the the application, but a key is not registered in the

application, the event is not loaded to the application. If an unregistered key is executed, TV system

closes the application and TV functions become available. For example, when an application which has no

registered volume key is running, the volume key on remote control is pressed, the working application is

forcibly closed and volume banner appears on TV screen.

Application Manager registers key sets as stated below in order for the application to use keys. When tag

value of <fullwidget> in config.xml is „y‟ and the Full-screen Application keyset is „n‟, Single-wide

Application is registered.

Full- screen Application Single-wide Application

KEY_VOL_UP KEY_1 KEY_WHEELDOWN

Page 78: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

78

KEY_VOL_DOWN

KEY_MUTE

KEY_TOOLS

KEY_INFO

KEY_EMODE

KEY_DMA

KEY_MENU

KEY_SOURCE

KEY_PRECH

KEY_FAVCH

KEY_CHLIST

KEY_DMA

KEY_TTX_MIX

KEY_GUIDE

KEY_SUBTITLE

KEY_ASPECT

KEY_DOLBY_SRR

KEY_MTS

KEY_PANEL_CH_UP

KEY_PANEL_CH_DOWN

KEY_PANEL_VOL_UP

KEY_PANEL_VOL_DOWN

KEY_PANEL_ENTER

KEY_PANEL_SOURCE

KEY_PANEL_MENU

KEY_2

KEY_3

KEY_4

KEY_5

KEY_6

KEY_7

KEY_8

KEY_9

KEY_0

KEY_WHEELDOWN

KEY_WHEELUP

KEY_RED

KEY_GREEN

KEY_YELLOW

KEY_BLUE

KEY_RW

KEY_PAUSE

KEY_FF

KEY_PLAY

KEY_STOP

KEY_ENTER

KEY_RETURN

KEY_EXIT

KEY_WHEELUP

KEY_RED

KEY_GREEN

KEY_YELLOW

KEY_BLUE

KEY_RW

KEY_PAUSE

KEY_FF

KEY_PLAY

KEY_STOP

KEY_ENTER

KEY_RETURN

KEY_EXIT

Each application registers/unregisters keys additionally by utilizing registKey() of common module,

„Widget‟. You should be aware of one thing below.

Key registration/unregistration should be done after window.onshow event.

The keys registered/unregistered after window.onshow event are normally processed, but those before

window.onshow event could be ignored. Register a function executed in window.onshow prior to calling

this method because window.onshow event happens after calling sendReadyEvent() of common module,

„Widget‟. Below is an example.

var WIDGET = new Common.API.Widget(); // For sendReadyEvent()

var TVKEY = new Common.API.TVKeyValue(); // Remote controller key value object

var PLUGIN = new Common.API.Plugin(); // Plugin common module

Main.onLoad = function(){

window.onshow = function(){ // register function will be run onshow event

PLUGIN.registKey(TVKEY.KEY_VOL_UP);

PLUGIN.registKey(TVKEY.KEY_VOL_DOWN);

Page 79: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

79

}

WIDGET.sendReadyEvent();

/**

* code

*/

}

The time of key registration/unregistration after window.onshow event does not matter.

6.5. Closing an application

There are two ways to close your application working on the screen: pressing the Return or Exit button on

the remote control or sending an event to the Application Manager. For the latter way, you use the

sendExitEvent() and sendReturnEvent() functions of the App which is the common module. For more

information, see Ch.5 Common module.

6.6. Prevention of closing the TV screen by the Return or Exit key

Using the Return or Exit key on the remote control, you can close applications. If you press the Return key,

you will be taken to the Application Manager, and if you press the Exit key, you will be taken to the TV

screen. In order to prevent this from happening, when either Return or Exit is pressed, the

blockNavigation() function of the App which is the common module has to be executed. For more

information, see Ch.5 Common modules.

6.7. Additional Information

When an application is run, the Application Manager gives you additional information. The application gets

such information by referring to window.location.search like below. Entered ID/PW via SSO or TV language

information is available.

?country=US&language=1&modelid=Valencia&server=development&remocon=2_35_259&area=USA&product

=1&mgrver=3.000&[email protected]&pw=pxxxx&payload={key1:value2,key2:value2}

Attribute Value Description

Page 80: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

80

country Country code Country code that has already been assigned. Refer to

Chapter 9.1.

language Language code Replaced with 'lang attribute

modelid Digital TV Model ID Digital TV Model ID

server development | operating server type: Development Server or Operating Server

remocon - No use

area Region Code Region code that has already been assigned. Refer to

chapter9.3.

Id string

Id inputted in SSO. It is passed only when entering application

after sign-in.

It should be used after calling decodeURIComponent().

pw string

Pw inputted in SSO. It is passed only when entering

application after sign-in.

It should be used after calling decodeURIComponent().

product Product code Refer to 9.4. Product Category

mgrver Internet@TV version If your application is enabled after a specific version of

Internet@TV, you should check mgrver.

payload string(JSON)

Extra Information for specific service. It is passed only when

entering application after push notification. It should be used

after calling decodeURIComponent().

6.8. What CSS need to contain

The element created in the margin beyond the maximum TV resolution(960 x 540 pixel) can cause the

display to scroll. All the element margins and paddings in the index.html document should be defaulted to

0 to prevent the matter resulted from going beyond the area. Your CSS should contain the following strings.

body {

margin: 0;

padding: 0;

background-color: transparent;

}

6.9. Loading images in advance

The Maple browser decodes images to make them displayed normally on your screen. If the browser

continues to change images that are displayed at a high speed, it may fail to display images on the screen

due to unfinished decoding process. To avoid this, you can load and keep images before you actually use

Page 81: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

81

them. By doing this, you can save the time for image decoding.

var imagePreloading = new Image();

imagePreloading.src = "Resource/image/largeNFastChange.png";

By doing the above work, you can make the Maple browser decode images. For images that have been

decoded once by the browser, they don‟t have to be decoded again later when they are used elsewhere,

so that your TV can display them faster.

6.10. Character of the <input> tag

On Maple, an object that is created by the <input> tag is not overlapped by other objects. Even if you use

z-index, the <input> object is always over other objects.

6.11. Scroll bar

Maple provides a scrolling function, but you cannot see the

actual scroll bar on the screen. You can scroll up or down the

content on the screen with buttons on the remote control

when the content needs a larger area than that you specified

before. If you want to see the actual scroll bar on your TV

screen, you should use scrollHeight, scrollTop and

offsetHeight to make an actual scrollbar appear on the

screen.

Put an anchor („<a>‟) in the content you want to scroll up

and down, give it focus and click the up or down button on

the remote control, then you can scroll up or down the content.

(Picture Source: http://sevencapitalsins.wordpress.com/2007/07/04/javascript-smooth-scroll/)

6.12. Making dynamic web pages

If you want to make dynamic web pages, you can use createElement and innerHTML. The createElement

function is the standard method dealing with HTML DOM, but its disadvantage is lower operating speed,

compared with innerHTML. It is recommended to use innerHTML because your applications are run in TVs,

which provide a less optimized operating environment than personal computers.

Page 82: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

82

6.13. Setting for letter-spacing

The value of letter-spacing in Maple browser is defaulted „-1‟. In case of Thai language, letters happen to

be overlapped when the value is „-1‟. Set the value „0‟ to prevent this from happening. Include below

codes to CSS.

* {

letter-spacing: 0px;

}

6.14. Memory management

If you keep changing innerHTML and creating the XMLHttpRequest object on an on, your TV memory runs

out and applications installed in your TV will not run normally. Of course, you have a garbage collector,

but it doesn‟t work fine. Another problem is limited memory resources, compared to PCs. Therefore, if

you want to write „optimized‟ applications that „normally‟ run, you should take additional measures.

6.14.1. Using XMLHttpRequest

If you create and use XHR objects repeatedly in Samsung TVs, you will be faced with a problem of your

applications working in a wrong way. The solution to this problem is set forth in Ch. 4.5 Example for XHR

communication.

6.14.2. Freeing up the memory

If the content in the tag is replaced with the innerHTML property, the corresponding node in the DOM tree

is closed and a new one is created and connected. The closed node remains in the memory. If this

procedure occurs repeatedly, you could face memory full. The solution to this problem is to use the

putInnerHTML() method of the Widget object in the common module. For more information on this

method, refer to Ch. Common modules.

6.15. Watch Dog

SAMSUNG TV periodically checks that the operating applications are working properly. If the application

does not react within 20 sec, it closes the application forcibly. This system is called „Watch dog‟. Watch

dog turns on and off an application, using setOnWatchDog(), setOffWatchDog() method of common module,

„Plugin‟.

In application, Network related operation and big data parsing(ex. Stock ) take more than 20 sec, and this

Page 83: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

83

will let the Watch dog be forced to close. It is recommended that you turn off Watch dog prior to these

actions. After the actions have been completed, turn on the watch dog again. If you keep Watch dog off,

TV might stop working.

6.16. Prevention for OSD distortion

Images of an application can be distorted if the movie is playing in the background makes too fast

transitions. Operating setOnOSDState(), setOffOSDState() method of common module „Plugin‟ prevents the

trouble. For more details on using the method, see Chapter 5.5. Plugin. This trouble could appear in

Single-wide application and Ticker application. (not in Full-screen application)

6.17. Support CSS text-overflow

Maple browser supports CSS1, CSS2. Also, text-overflow which is one of the attributes of CSS3 is supported,

this can make the browser cope with contents over the area efficiently.

6.18. Directions for creating video application

Video application using Player(Plugin) should be closed after the player is stopped. If you end application

without stop playing, critical problem such that TV is paused can occur. The best way to prevent the

problem is to stop Player at the registered function in onunload of <body> tag.

6.19. Using IME

Text input is available via remote control in application. Internet@TV provides a module for utilizing

IME(Input Method Editor). This module enables users to enter languages. For more details, refer to IME

Tutorial manual distributed separately.

6.20. Minimizing initial entry speed of an application

6.20.1. Load Javascript On-Demand

You can save javascript loading time by minimizing javascript in the initial page. On-Demand Javascript

Loading is that Download Javascript when it required, instead of downloading it all in the initial page.

Divide a big javascript file into several javascript file. And then only some Javascript files needed to

generate the initial page amog others. Therefore you can include javascript files minimally in the initial

page. And you can load other javascript files by inserting script element as following.

Main.onLoad = function(){

Page 84: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

84

var widgetAPI = new Common.API.Widget();

widgetAPI.sendReadyEvent();

setTimeout('IncludeJavascript()',0);

}

function IncludeJavascript(){

var head= document.getElementsByTagName('head')[0];

var script = document.createElement('script'); //script tag creation.

script.type = 'text/javascript';

script.src = 'test.js';

script.onload = function (){…};

head.appendChild(script); //inject a new script element into page

}

6.20.2. Load CSS Background Image On-Demand

Maple Browser loads an image for an element‟s background style when its background style matching is

invoked. Because deleting background style of some elements not nessasary in initial page can speed the

application loading up. You can apply element‟s background style when it required as follows.

function loadBackgroundImage(eid, url){

document.getElementById(eid).style.backgroundImage = "url("+url+")";

}

function loadCSSImage(){

loadBackgroundImage("Full1", "img/Full_1.png");

loadBackgroundImage("Full2", "img/Full_2.png");

loadBackgroundImage("Full3", "img/Full_3.png");

}

6.20.3. Separation of Main.onLoad functions

If you using setTimeout function properly, a background of initial page can be shown more quikly. Separate

Main.onLoad function into two steps. The first step is to generate background of initial page. The second

step is to do other works not necessary to generate the background of initial page. Following shows this

technique.

Main.onLoad = function(){

Page 85: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

85

…generate background

var widgetAPI = new Common.API.Widget();

widgetAPI.sendReadyEvent();

setTimeout('Main_onLoad2()',0);

}

function Main_onload2(){

IncludeJavascript(); // refer to 6.20.1

generateDetailPage();

}

6.21. Directions for Dynamic loading of CSS

Dynamic loading of CSS files can be done simply with adding a link nod to <head>. However, CSS should

be loaded prior to composition of DOM tree in Maple Browser. If DOM is configured with loaded CSS files,

CSS style applies to the DOM. However, CSS is loaded after DOM configuration. CSS style is not applicable

to the DOM. See the example below.

① Add HTML Elements after dynamic loading of CSS

Load red_box.css dynamically, and then add div after three secs. After 3 secs, CSS style is applied, a red

box appears on screen because CSS file is loaded before DOM.

var Main = {

}

var WIDGET = new Common.API.Widget(); // For sendReadyEvent()

Main.onLoad = function() { // The first function

alert("Main : onLoad()");

WIDGET.sendReadyEvent();

includeCSS ('red_box.css');

setTimeout("insertHTML()", 3000);

// insertHTML();

// setTimeout("includeCSS ('red_box.css')", 3000);

}

function includeCSS(path) {

Page 86: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

86

alert('+=====+ includeCSS +=====+');

var linkNode = document.createElement('link');

linkNode.type = 'text/css';

linkNode.rel = 'stylesheet';

linkNode.href = path;

document.getElementsByTagName('head')[0].appendChild(linkNode);

}

function insertHTML() {

alert('+=====+ insertHTML +=====+');

var divNode = document.createElement('div');

divNode.id = 'red_box';

document.body.appendChild(divNode);

}

* red_box.css

#red_box {

position : absolute;

left: 100px;

top: 100px;

width: 100px;

height: 100px;

border : 3px solid #FF0000;

}

② Add HTML Element and load CSS dynamically.

Get ride of the annotation from Main.onLoad() in the example above. CSS is loaded 3 secs after HML Div

element is added. Therefore, there is no change.

insertHTML();

setTimeout("includeCSS ('red_box.css')", 3000);

Page 87: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

87

7. Maple browser

This section sets forth the browser for running applications provided with Samsung Internet@TV, Maple.

7.1. Maple?

Stands for Markup engine Platform for Embedded Systems

Browser engine for Consumer Electronics (CE) devices

Controls devices using markup tags and script classes

When an application is displayed and behaves on the screen, its image and text generation should be

controlled and managed. For Samsung TVs with Internet@TV installed, it is Maple that performs such work.

An application‟s behaviors and displays are made by Maple. While Internet Explorer and Firefox are PC-

based browsers, Maple is Samsung TV-based browser.

7.2. Standard Specifications

Supported web standards

HTML4.01, XHTML1.0, XML1.0 Markup language specifications

HTTP1.0/1.1

CSS1, CSS2, CSS TV Profile 1.0

DOM1, DOM2

JavaScript 1.6

Supported image formats

BMP, JPEG, PNG, GIF

Page 88: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

88

8. File API

This section introduces the file input/output operation system which the Samsung TV application engine

supports.

8.1. File API?

Applications can use the file input/output system supported the Samsung TV application engine.

Applications can store data they get while they are still working and read them anytime they want to

restore the data. All applications perform file input/output operations in a common area. For this reason,

files used in different applications might have same name. To prevent this, create a directory using

application ID(curWidget.id) and work on the file in the directory.

If multiple applications need to share some data, they should do through a file path that they previously

promised to use.

File input/output operations are performed by creating a file system object and calling the interface of

the object.

8.2. API

The following is a list of interfaces that are provided by the Samsung TV application engine. You can use

them in JavaScript.

8.2.1. FileSystem()

FileSystem

Generates file system instance available to be used in an application

Syntax new FileSystem();

Parameter None

Return Value Maple FileSystem object

Remarks

This function Returns FileSystem instance defined in Maple browser. Through this

operation, reading and writing texts are available. Binary format file is not

supported.

Example var fileSystemObj = new FileSystem();

Members None

Page 89: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

89

Methods

openCommonFile

closeCommonFile

deleteCommonFile

createCommonDir

deleteCommonDir

isValidCommonPath

readLine

writeLine

readlAll

writeAll

readDir

openFile

8.2.2. openCommonFile()

openCommonFile

Opens file in common storage area of an application.

Syntax fileSystemObj.openCommonFile(filePath:String, mode:String)

Parameter

filePath:String

path including a file name.

mode:String

r : Open a file for reading. The file must exist.

w : Create an empty file for writing. If a file with the same name already exists its

content is erased and the file is treated as a new empty file.

a : Append to a file. Writing operations append data at the end of the file. The file is

created if it does not exist.

r+ : Open a file for update both reading and writing. The file must exist.

w+ : Create an empty file for both reading and writing. If a file with the same name

already exists its content is erased and the file is treated as a new empty file.

a+ : Open a file for reading and appending. All writing operations are performed at

the end of the file, protecting the previous content to be overwritten. You can

reposition (fseek, rewind) the internal pointer to anywhere in the file for reading,

but writing operations will move it back to the end of file. The file is created if it

does not exist.

Return Value Maple file object

Page 90: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

90

Remarks

With this method, all the applications operate to input and output files in the same

area. Due to this feature, the case that files used in other applications have the same

name happens. It is required to create directories using application ID via

curWidget.id and execute file operations in the directory.

Example

var fileSystemObj = new FileSystem();

var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'w');

fileObj.writeAll('something to write.');

fileSystemObj.closeCommonFile(fileObj);

Enumeration None

8.2.3. closeCommonFile()

closeCommonFile

Closes files opened by openCommonFile().

Syntax fileSystemObj.closeCommonFile(fileObj:Maple file object)

Parameter fileObj: Maple file object

The file instance returned by openCommonFile()

Return Value Boolean

Remarks Opened files should be closed. Especially, if a file is outputted by methods such as

writeAll(), the output is not saved without closing the file object.

Example

var fileSystemObj = new FileSystem();

var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'w');

fileObj.writeAll('something to write.');

fileSystemObj.closeCommonFile(fileObj);

Enumeration None

8.2.4. deleteCommonFile()

deleteCommonFile

Deletes files in Input/Output area

Syntax fileSystemObj.deleteCommonFile(filePath:String)

Parameter filePath:String

path including the name of a file to delete

Page 91: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

91

Return Value Boolean

Remarks None

Example var fileSystemObj = new FileSystem();

var bResult = fileSystemObj.deleteCommonFile(curWidget.id + '/testFile.data');

Enumeration None

8.2.5. createCommonDir()

createCommonDir

Creates directories in file input/output area

Syntax fileSystemObj.createCommonDir(directoryPath:String)

Parameter directoryPath:String

path including the name of a directory to create

Return Value Boolean

Remarks Creating a directory named curWidget.id to avoid crash between file names in other

applications.

Example var fileSystemObj = new FileSystem();

var bResult = fileSystemObj.createCommonDir(curWidget.id);

Enumeration None

8.2.6. deleteCommonDir()

deleteCommonDir

Deletes directories in file input/out area

Syntax fileSystemObj.deleteCommonDir(directoryPath:String)

Parameter directoryPath:String

path including a name of directory to delete

Return Value Boolean

Remarks None

Example var fileSystemObj = new FileSystem();

var bResult = fileSystemObj.deleteCommonDir(curWidget.id);

Enumeration None

Page 92: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

92

8.2.7. isValidCommonPath()

isValidCommonPath

Checks if there is a directory

Syntax fileSystemObj.isValidCommonPath(directoryPath:String)

Parameter directoryPath:String

path including a name of directory to confirm its existence

Return Value

Int

0 : JS function failed

1 : valid

2 : invalid

Remarks None

Example

var fileSystemObj = new FileSystem();

var bValid = fileSystemObj.isValidCommonPath(curWidget.id);

if (!bValid) {

fileSystemObj.createCommonDir(curWidget.id);

}

Enumeration None

8.2.8. readLine()

readLine

Reads a line in an opened file

Syntax fileObj.readLine()

Parameter None

Return Value

String

Returns a line ranging to line feed character as a result. If there is nothing to read,

return „null‟.

Remarks None

Example

var fileSystemObj = new FileSystem();

var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'r');

var strLine = '';

var arrResult = new Array();

Page 93: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

93

while((strLine=fileObj.readLine())) {

arrResult.push(strLine);

}

Enumeration None

8.2.9. writeLine()

writeLine

Writes a line in an opened file

Syntax fileObj.writeLine(text:String)

Parameter text:String

text to write in a file

Return Value Boolean

Remarks None

Example

var fileSystemObj = new FileSystem();

var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'w');

fileObj.writeLine('something to write.');

fileSystemObj.closeCommonFile(fileObj);

Enumeration None

8.2.10. readlAll()

readAll

Reads whole of the opened file

Syntax fileObj.readAll()

Parameter None

Return Value String

Whole contents of the file

Remarks None

Example

var fileSystemObj = new FileSystem();

var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'r');

var strResult = fileObj.readAll();

alert(strResult);

Page 94: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

94

Enumeration None

8.2.11. writeAll()

writeAll

Writes several lines in the opened file

Syntax fileObj.writeAll(text:String)

Parameter text:String

test to write in a file

Return Value Boolean

Remarks None

Example

var fileSystemObj = new FileSystem();

var fileObj = fileSystemObj.openCommonFile(curWidget.id + '/testFile.data', 'w');

fileObj.writeAll('something to write.');

fileSystemObj.closeCommonFile(fileObj);

Enumeration None

8.2.12. readDir()

readDir

Able to see file information in USB

Syntax fileSystemObj.readDir(directoryPath:String)

Parameter directoryPath:String

Path of a directory that you want to see. Wors only for USB directory

Return Value

Array

The Array containing file information. Each element has file information in a

directory. Able to get information by referring to variables below.

name : file name

isDir : If a file is a directory, „true‟, if not, „false‟

size : File Size (byte)

atime : The time when to open a file or access time to a directory with cd command

mtime : The time when file contents are changed

ctime : The time when file information is changed

Page 95: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

95

If there is no directoryPath, return „false‟.

Remarks File information in USB can be brought by „$USB_DIR‟. For the way to find out

mounted path of USB, refer to storage plugin of Plugin guide.

Example

var fileSystemObj = new FileSystem();

var usbPath = '$USB_DIR' + usb_mount_path;

var arrFiles = fileSystemObj.readDir(usbPath);

if (arrFiles) {

for (var i=0; i < arrFiles.length; i++) {

alert(arrFiles[i].name);

alert(arrFiles[i].isDir);

}

}

Enumeration None

8.2.13. openFile()

openFile

Opens files in an application

Syntax fileSystemObj.openFile(filePath:String, mode:String)

Parameter

filePath:String

path including a file name

mode:String

r : Open a file for reading. The file must exist.

*only r mode is available.

Return Value

Maple file object

Returns file object defined in Maple browser. Character strings are read By calling

readLine(), readAll() methods that file object has.

Remarks

openCommonFile() enablies files to input and output in common area of all

applications, on the other hand, openFile() is only able to „read‟ files in directory

where an application is installed.

Example

var fileSystemObj = new FileSystem();

var fileObj = fileSystemObj.openFile('index.html', 'r');

alert(fileObj.readAll());

fileSystemObj.closeFile(fileObj);

Page 96: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

96

Enumeration None

Page 97: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

97

9. Appendix

9.1. Country Code

You can get this code from Application Manager. Refer ch. 6.7, for more details.

Nations Code Nations Code

ALBANIA AL PORTUGAL PT

ANDORRA AD ROMANIA RO

AUSTRIA AT SERBIA RS

BELGIUM BE SLOVAKIA SK

BOSNIA BA SLOVENIA SI

BULGARIA BG SPAIN ES

CIS RU SWEDEN SE

CROATIA HR SWITZERLAND CH

CYPRUS CY UK GB

CZECH CZ AMERICA US

DENMARK DK CANADA CA

FINLAND FI MEXICO MX

FRANCE FR ARGENTINA AR

GERMANY DE CHILE CL

GREECE GR PERU PE

HUNGRARY HU THAILAND TH

ICELAND IS VIETNAM VN

IRELAND IE MALAYSIA MY

ITALY IT INDONESIA ID

LUXEMBOURG LU PHILIPPINES PH

MACEDONIA MK BRAZIL BR

MONTENEGRO ME ALGERIA DZ

NETHERLAND NL MOROCCO MA

NORWAY NO TUNISIA TN

POLAND PL

Page 98: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

98

9.2. Langauage Code

These codes are obtained from application manager while the application is operating. These are made by

parsing value of window.location.search, and value stated below is delivered to „lang‟ attribute. Tamil

and Hindi are not provided in Maple browser 5.1, the code for them is „en-GB‟. Refer to Chapter 6.7 for

more information on window.location.search.

Nations Code Nations Code

Afrikaans af Latvian lv

Amharic am Lithuanian lt

Arabic ar Lithuanian lt

Bulgarian bg Norwegian no

Chinese zh-CN Persian fa

Croatian hr Polish pl

Czech cs Portuguese pt

Danish da Portuguese(America) pt-US

Dutch nl Romany ro

English en Russian ru

English(GB) en-GB Serbian sr

Estonian et Slovak sk

Finnish fi Spanish es

French fr Spanish(America) es-US

French(America) fr-US Swahili sw

German de Swedish sv

Greek, Modern el Taiwan zh-TW

Hausa ha Tamil (Not provided) en-GB

Hebrew he Thai th

Hindi (Not provided) en-GB Turkish tr

Hongkong zh-HK Urdu ur

Hungarian hu Vietnamese vi

Igbo ig Xhosa xh

Indonesian id Yoruba yo

Italian it Zulu zu

Korean ko

Page 99: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

99

The table stated below shows the codes delivered from „language‟ attribute. „language‟ attribute is

replaced with „lang‟. „language‟ attribute is planned to be erased. Do not use it further.

Language Code Language Code

Korean 0 Spanish 24

English 1 Swedish 25

Spanish(America) 2 Turkish 26

French(America) 3 Chinese 27

Portuguese(America) 4 Hongkong 28

Bulgarian 5 Taiwan 29

Croatian 6 Japanese 30

Czech 7 Maori 31

Danish 8 CMN 32

Dutch 9 YUE 33

Finnish 10 Hindi 34

French 11 Estonian 35

German 12 Latvian 36

Modern Greek 13 Lithuanian 37

Hungarian 14 Arabic 38

Italian 15 Persian 39

Norwegian 16 QAA 40

English(GB) 17 AD 41

Polish 18 Catalan 42

Portuguese 19 VAL 43

Romany 20 Hebrew 44

Russian 21 OTHER 45

Serbian 22 Thai 46

Slovak 23

9.3. Region Code

You can get this code from Application Manager. Refer ch. 6.7, for more details.

Code Region

KOR Korea

Page 100: [2010]App Development Guide for Internet@TV[V1.09]

Application Development Guide for Internet@TV

100

USA USA/Canada/Mexico

BRA Brazil, Paraguay, Uruguay, Argentine

PANEURO Europe

CHI China

HKG Hong Kong

ARB Arab

PANNORDIG Nordic

SOUTHEASTASIA South-East Asia (Vietnam, Thailand, India, China, Iran, Israel, Central Asia,

East Asia, Africa)

ASIA_ATV South-East Asia (Vietnam, Thailand, India, China, Iran, Israel, Central Asia,

East Asia, Africa)

ASIA_DTV Australia , New Zealand, Singapore

TW Taiwan, Columbia

NORTHAFRICA TURKEY, MOROCCO, TUNISIA

EA_DTV Indonesia, Malaysia, Republic of South Africa, Vietnam

CIS CIS

PHI Philippine

S_AFR_DTV South Africa DTV

9.4. Product Category

These codes can be obtained from application manager while the application is operating. For more

details, refer to chapter 6.7.

Code Region

0 TV

1 Monitor

2 Blue-ray Disk