Application Development Guide for Internet@TV

62
Application Development Guide for Internet@TV Version 1.004 인터넷 TV

Transcript of Application Development Guide for Internet@TV

Page 1: Application Development Guide for Internet@TV

Application Development Guide

for Internet@TV

Version 1.004

인터넷 TV

Page 2: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

2

1. Introduction ...................................................................................................................... 6

1.1. 인터넷 TV ..................................................................................................... 6

2. 인터넷 TV 서비스 .............................................................................................................. 7

2.1. 서비스 동작 구조 ............................................................................................ 7

2.2. 서비스 동작 환경 ............................................................................................ 7

3. 애플리케이션 .................................................................................................................... 8

3.1. 애플리케이션? ................................................................................................ 8

3.2. 애플리케이션의 구조 ....................................................................................... 8

3.3. 애플리케이션의 구분 ....................................................................................... 9

3.4. 애플리케이션의 동작 ..................................................................................... 10

3.5. 애플리케이션 매니저 ..................................................................................... 10

3.6. 삼성 애플리케이션의 특수 기능 ...................................................................... 11

4. 애플리케이션을 만들자 ..................................................................................................... 12

4.1. 준비물 ........................................................................................................ 12

4.2. 만들기 ........................................................................................................ 12

4.2.1. config.xml 작성 ........................................................................................... 12

4.2.2. index.html 작성 ............................................................................................ 13

4.2.3. JavaScript 작성 ............................................................................................ 14

4.2.4. CSS 작성 .................................................................................................... 15

4.2.5. 리모컨 조작 ................................................................................................. 16

4.2.6. 완성 & Sample code ..................................................................................... 17

4.3. config.xml ................................................................................................... 21

4.3.1. Tag 정보 ..................................................................................................... 21

4.3.2. Example ...................................................................................................... 23

4.4. Single-Sign-On ........................................................................................... 25

4.4.1. Single-Sign-On이란? ................................................................................... 25

4.4.2. 동작방식 ..................................................................................................... 25

4.4.3. 애플리케이션 개발자가 반드시 구현해야 되는 사항 ........................................... 25

4.4.4. Config.xml 구현 가이드 ................................................................................. 25

4.4.5. 모듈 구현 가이드 .......................................................................................... 26

4.4.6. 콜백호출시 리턴값. ....................................................................................... 26

4.5. Reset.......................................................................................................... 27

4.5.1. Reset 이란? ................................................................................................ 27

4.5.2. 동작방식 ..................................................................................................... 27

4.5.3. 애플리케이션 개발자가 반드시 구현해야 되는 사항 ........................................... 27

4.5.4. Config.xml 구현 가이드 ................................................................................. 27

Page 3: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

3

4.5.5. 모듈 구현 가이드 .......................................................................................... 27

4.6. XHR 통신 예제 ............................................................................................ 29

5. 공용 모듈 ....................................................................................................................... 32

5.1. 공용 모듈? .................................................................................................. 32

5.2. 사용 방법 .................................................................................................... 32

5.3. TVKeyValue ................................................................................................. 32

5.4. Widget ........................................................................................................ 35

5.4.1. sendReadyEvent() ........................................................................................ 35

5.4.2. sendExitEvent() ............................................................................................ 36

5.4.3. sendReturnEvent() ........................................................................................ 36

5.4.4. blockNavigation() ......................................................................................... 36

5.4.5. putInnerHTML() ............................................................................................ 37

5.5. Plugin ......................................................................................................... 38

5.5.1. setOnWatchDog()......................................................................................... 39

5.5.2. setOffWatchDog() ........................................................................................ 39

5.5.3. setOnOSDState().......................................................................................... 40

5.5.4. setOffOSDState() ......................................................................................... 40

5.5.5. registKey() .................................................................................................. 40

5.5.6. unregistKey() ............................................................................................... 41

5.5.7. registIMEKey() ............................................................................................. 41

5.5.8. unregistIMEKey() .......................................................................................... 42

5.5.9. registAllKey ................................................................................................. 42

5.5.10. unregistAllKey() ............................................................................................ 42

5.5.11. registFullWidgetKey() .................................................................................... 43

5.5.12. registPartWidgetKey() ................................................................................... 43

5.5.13. SetBannerState() .......................................................................................... 43

5.5.14. ShowTools() ................................................................................................ 44

6. 개발 팁 .......................................................................................................................... 46

6.1. 최초 애플리케이션 진입시 반드시 불러야 하는 함수 .......................................... 46

6.2. 애플리케이션의 진입점 .................................................................................. 46

6.3. 리모컨 키 입력 받기 ..................................................................................... 46

6.4. 애플리케이션에서 이용할 수 있는 키 ............................................................... 47

6.5. 애플리케이션에서 빠져 나가기 ........................................................................ 48

6.6. Return, Exit 키의 강제 종료 방지 .................................................................... 48

6.7. 애플리케이션 실행시 얻을 수 있는 추가 정보 ................................................... 48

6.8. CSS 사용시 포함할 것 .................................................................................. 49

Page 4: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

4

6.9. 사용하려는 이미지 미리 로딩하기 ................................................................... 49

6.10. <input> tag의 특성 ....................................................................................... 50

6.11. Scroll bar .................................................................................................... 50

6.12. 동적 페이지 구성 .......................................................................................... 50

6.13. 글자 간격 설정 ............................................................................................. 50

6.14. 메모리 관리 ................................................................................................. 51

6.14.1. XMLHttpRequest 사용 ................................................................................... 51

6.14.2. innerHTML 메모리 해제 ................................................................................. 51

6.15. Watch dog? ................................................................................................. 51

6.16. OSD 깨짐 방지 ............................................................................................ 51

6.17. CSS text-overflow 속성 지원 ......................................................................... 52

6.18. 동영상 애플리케이션 작성시 주의 사항 ............................................................ 52

6.19. IME 사용하기 ............................................................................................... 52

7. Maple 브라우저 ............................................................................................................... 53

7.1. Maple? ....................................................................................................... 53

7.2. 표준 지원 스펙 ............................................................................................. 53

8. File API .......................................................................................................................... 54

8.1. File API? ..................................................................................................... 54

8.2. API ............................................................................................................. 54

8.2.1. FileSystem() ................................................................................................ 54

8.2.2. openCommonFile() ....................................................................................... 54

8.2.3. closeCommonFile() ...................................................................................... 55

8.2.4. deleteCommonFile() ..................................................................................... 56

8.2.5. createCommonDir() ...................................................................................... 56

8.2.6. deleteCommonDir() ...................................................................................... 56

8.2.7. isValidCommonPath() ................................................................................... 57

8.2.8. readLine() ................................................................................................... 57

8.2.9. writeLine() ................................................................................................... 58

8.2.10. readlAll() ..................................................................................................... 58

8.2.11. writeAll() ..................................................................................................... 58

9. Appendix ....................................................................................................................... 60

9.1. 국가 코드 .................................................................................................... 60

9.2. 언어 코드 .................................................................................................... 61

9.3. 지역 코드 .................................................................................................... 62

Page 5: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

5

머리말

문서의 목적

이 문서는 인터넷 TV의 애플리케이션 개발자를 위한 가이드이다. 인터넷 TV의 개괄적인 내용과 애플리

케이션 개발자로서 알아야 할 필수적인 내용을 담고 있다. Digital TV에서 동작하는 애플리케이션을 개발

하고 관리할 수 있게 하는 것이 목적이다.

문서의 대상

HTML / CSS / JavaScript 의 웹 개발 언어를 사용한 경험이 있는 프로그래머를 대상으로 한다. 웹 관련

개발 경험이 있다면 좋을 것이다.

History

Version history

Version Date Author Comment

1.000 2009-12-03

김중형 선임

([email protected])

서보성 사원

([email protected])

오준영 사원

([email protected])

초판

1.001 2010-01-13 김중형 선임

([email protected])

3.4.1. config.xml channel bound 관련 태그

내용 추가/수정

1.002 2010-02-02 이태동 책임

오준영 사원 오타자 수정

1.003 2010-02-02 오준영 사원 5.5. 공용 모듈 챕터의 예제 수정

1.004 2010-02-03 오준영 사원 용어 변경 „위젯‟ „애플리케이션‟

Page 6: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

6

1. Introduction

인터넷 TV를 소개하고 구성과 동작을 설명한다.

1.1. 인터넷 TV

인터넷 TV(Internet@TV)는 삼성 Digital TV에 인터넷이 연결된 환경에서 제공되는 웹 기반의 서비스이다.

빠르게 변화하는 웹의 다양한 기능을 TV에 접목함으로써 TV의 기능을 확장하고, 사용자에게 유용한 정

보와 재미있는 컨텐츠를 이용할 수 있도록 한다. 간단한 리모컨 조작만으로 인터넷 서비스인 뉴스, 날

씨, 주식, UCC 등의 정보를 쉽게 확인할 수 있다.

HubSite에 등록된 애플리케이션을 TV에 설치하여 사용할 수 있을 뿐만 아니라 사용자가 직접 자신만의

애플리케이션을 개발하여 TV에 설치, 사용할 수도 있다.

HubSite

PAVV

HubSite

PAVV

Page 7: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

7

2. 인터넷 TV 서비스

인터넷 TV 서비스가 이루어지는 동작 구조와 환경에 대해 설명한다.

2.1. 서비스 동작 구조

인터넷 TV 서비스는 TV 화면에서 인터넷 기반의 애플리케이션을 실행하는 것이다. 애플리케이션은 브

라우저 상에서 실행되며 TV 환경에서 동작하는 특수한 웹페이지로 이해할 수 있다. 일반 PC에서 브라

우저를 통해 웹 페이지를 보는 것과 유사한 구조이지만 TV 해상도, 하드웨어 성능, 리모컨 인터페이스

등의 제약 사항이 따른다.

2.2. 서비스 동작 환경

브라우저 Maple 5.1

TV 화면 해상도 960 Ⅹ 540 pixel

Maple 브라우저는 삼성 TV용 전용 브라우저로 자세한 설명은 7. Maple 브라우저 챕터에서 확인하자.

Page 8: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

8

3. 애플리케이션

우리가 개발할 삼성 TV용 애플리케이션에 대해 설명한다.

3.1. 애플리케이션?

애플리케이션은 Digital TV에 인터넷이 연

결된 환경에서 실행되는 웹 기반의 프로그

램이다. 인터넷을 통해 TV에 설치되어

Maple 브라우저 상에서 실행된다. TV 리모

컨 조작을 유일한 사용자 인터페이스로 하

는 TV 상에서 보여지는 웹 페이지라고 볼

수 있다. TV 내의 설치, 삭제 등의 동작은

애플리케이션 매니저 (N.Navi 애플리케이

션)가 관장한다.

삼성에서 제공하는 SDK(Software development kit)를 통해 자신만의 애플리케이션을 개발하여 TV에서

동작하도록 할 수 있다.

3.2. 애플리케이션의 구조

애플리케이션은 HTML, CSS, JavaScript로 구성된 웹 페이지 형식의 프로그램으로 Maple 브라우저에서 동

작한다. HTML은 구조를 나타내고 CSS가 style을 표현하며 JavaScript가 동작을 제어한다. TV에서 애플리

케이션을 실행하려면 각종 실행 환경 정보를 갖고 있는 config.xml이 추가로 있어야 한다. config.xml은

애플리케이션의 버전, 실행 환경 정보 등이 들어있어야 한다. 자세한 내용은 4.3 config.xml 챕터를 보자.

Page 9: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

9

3.3. 애플리케이션의 구분

구 분 설 명 화 면

전체 애플리케

이션

화면 전체를 차지하는 애플리

케이션

부분 애플리케

이션

화면의 일부분만 차지하는 애

플리케이션

티커

채널 변경 등의 TV 동작에도

계속적으로 보여지는 애플리케

이션

* 유럽에 런칭될 애플리케이션은 반드시 전체 애플리케이션 형태로 만들어야 한다.

Page 10: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

10

3.4. 애플리케이션의 동작

애플리케이션은 다음과 같은 프로세스로 동작한다.

단 계 동작 설명

애플리케이션 매니저

진입

리모컨의 INFO.L 버튼이나 메뉴 Application Contents Home 인터넷 TV

를 실행하여 애플리케이션 매니저에 진입한다.

애플리케이션 선택 리모컨의 방향키를 눌러 애플리케이션을 선택한다.

애플리케이션 실행

Enter 키를 눌러 애플리케이션을 실행한다. 애플리케이션 매니저는 실행되는

애플리케이션의 config.xml에 있는 정보를 읽어 동작 환경을 설정하고

index.html을 읽어들여 애플리케이션을 실행한다.

3.5. 애플리케이션 매니저

애플리케이션 매니저는 애플리케이션 실행에 필요한 각종 인증과 애플리케이션의 설치, 삭제, 업데이트,

실행, 종료 등 애플리케이션의 전반적인 관리자 역할을 한다. 사용자는 애플리케이션 매니저를 통해서

애플리케이션을 설치, 삭제할 수 있고 자신이 개발한 애플리케이션을 TV에 등록하여 사용해 볼 수 있다.

애플리케이션 매니저도 애플리케이션의 일종으로 온라인 업데이트를 통해 지속적인 업데이트가 이루어

진다.

진입 화면 Samsung AppS

Page 11: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

11

설정

3.6. 삼성 애플리케이션의 특수 기능

삼성 Digital TV에서 실행되는 애플리케이션은 일반 PC용 애플리케이션과는 다르게 TV 고유의 기능을 이

용해 볼 수 있다는 특징이 있다. 예를 들어 채널, 볼륨 조절, 방송 외 동영상 재생 등 TV의 기능을 애

플리케이션에서 직접 조작할 수 있고 TV 내의 파일 저장 시스템을 이용할 수 있다. TV의 고유 기능의

이용은 „플러그인‟을 통해서 할 수 있다. 이는 플러그인 설명 문서를 참고한다. TV의 파일 저장 시스템

은 8. File API 챕터를 참고한다.

애플리케이션 매니저는 애플리케이션에서 사용할 수 있도록 몇가지 JavaScript 모듈을 제공한다. 이를

통해 부분적으로 애플리케이션 개발의 편의성을 높일 수 있다. 이에대한 자세한 내용은 5. 공용 모듈

챕터를 참고한다.

Page 12: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

12

4. 애플리케이션을 만들자

간단한 애플리케이션을 만들어 본다.

4.1. 준비물

우리의 최종 목적은 애플리케이션을 만들어 TV에서 실행시키는 것이다. 이를 위해 인터넷이 연결된 삼

성 TV와 삼성이 제공하는 SDK(Software development kit) 또는 HTML, JavaScript, CSS를 작성할 수 있는

에디터가 필요하다. 삼성 SDK를 이용한다면 만든 애플리케이션을 시뮬레이터를 통해 실행해볼 수 있어

편리하다.

4.2. 만들기

애플리케이션은 최소한 다음의 파일은 가지고 있어야 한다. 애플리케이션의 진입점이 되는 index.html,

설정 정보를 갖고 있는 config.xml이다. 여기에 애플리케이션의 동작을 제어하는 JavaScript, 디스플레이

모양을 정의한 CSS와 화면에 표시할 이미지를 포함할 수 있다.

우리는 화면에 CSS 스타일이 적용된 텍스트를 표시하고 리모컨 키 입력에 반응하는 애플리케이션을 만

들 것이다. 우리가 만들 애플리케이션의 구조와 실행화면은 아래와 같다.

4.2.1. config.xml 작성

애플리케이션을 구성하는 파일 중 가장 먼저 불리는 파일은 config.xml 이다. <ver> 태그의 값을 통해

애플리케이션의 업데이트 여부를 판단하고 <ThumbIcon> 태그에 지정된 이미지를 thumbnail로 보여

Page 13: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

13

주기도 한다.

다른 항목들에 대한 자세한 내용은 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> <category>lifestyle</category> <autoUpdate>y</autoUpdate> <cpname>Junyoung</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> <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>

4.2.2. index.html 작성

다음으로 할 것은 애플리케이션 매니저가 애플리케이션을 실행할 때 진입점이 되는 index.html을 생성

하는 것이다. 아래는 JavaScript 폴더 아래에 있는 Main.js 파일을 인클루드하고 문서가 로드되었을 때

Main.onLoad() 라는 함수를 호출하는 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="JavaScript/Main.js"></script>

Page 14: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

14

</head>

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

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

</body>

</html>

4.2.3. JavaScript 작성

<body> 태그의 onload 이벤트에 Main.onLoad() 메소드를 등록해놨기 때문에 HTML 문서가 로드되면

Main 이라는 JavaScript 객체의 onLoad() 메소드가 호출된다. Main 객체를 만들고 onLoad 메소드를

만들자.

var Main = { // Main object

}

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

alert("Main.onLoad()");

/**

* JavaScript code Here!

*/

}

여기까지 작성했으면 애플리케이션을 실행해보면 „Main.onLoad()‟ 라는 디버그 메시지가 찍힌다. 하지만

HTML에 입력한 „Welcome to Samsung application world!‟ 문구는 TV 화면에 화면에 나타나지 않는다.

애플리케이션은 정상적으로 로드가 된 뒤 애플리케이션 매니저에게 자신을 화면에 나타내줄 것을 요청

해야 한다. 이런 요청 작업을 위해 애플리케이션 매니저가 제공하는 공용 모듈을 사용한다. 공용 모듈

은 애플리케이션 매니저가 제공하는 여러 기능을 담고 있는 라이브러리다. 이에 대한 자세한 내용은 5.

공용 모듈 챕터를 살펴 보자. 아래 코드를 index.html의 <head> 에 추가시킨다.

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

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

위 코드가 추가되면 JavaScript에서 공용 모듈을 사용할 수 있다. 아까 작성하던 Main.js에 공용 모듈을

전역 변수로 선언한 다음 sendReadyEvent()를 호출한다. 이는 애플리케이션 매니저가 애플리케이션을

화면에 보여주게 한다.

var Main = { // Main object

}

Page 15: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

15

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!

*/

}

이제 애플리케이션을 실행해 보면 index.html에 입력한 “Welcome to Samsung application world!”라는

문구를 볼 수 있다. 하지만 글씨가 작고 검은색이라 잘 보이지 않는다. CSS 로 스타일을 지정해 보자.

4.2.4. CSS 작성

index.html 의 <head> 에 다음을 추가한다.

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

index.html 의 <div> 에 ID 를 준다.

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

CSS 폴더에 파일을 만들고 다음과 같이 내용을 만들어 „welcome‟ 엘리먼트의 스타일을 지정한다.

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 16: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

16

4.2.5. 리모컨 조작

이제 리모컨키에 반응하게 애플리케이션을 만들어보자. 리모컨의 방향 키를 누르면 화면에 표시하는 문

구를 바꾸도록 한다.

리모컨 키가 눌리면 „keydown‟ 이벤트가 발생한다. 이벤트를 받으려면 HTML에 이벤트를 받을 수 있는

엘리먼트가 있어야 하고 이 엘리먼트가 포커스를 가지고 있어야 한다. 이벤트를 받을 수 있는 엘리먼트

로 <a> (anchor)를 추가하고 onkeydown 프로퍼티에 이벤트가 발생했을 때 실행될 함수를 등록한다. 이

제 <a> 에 포커스를 준 뒤 리모컨 키를 누르면 앞에서 등록한 함수가 실행된다.

keydown 이벤트 발생시 Main.keyDown() 메소드를 실행하는 <a> 를 추가한다.

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

리모컨 키를 눌렀을 때의 키 코드 값을 출력하는 keyDown() 메소드를 작성한다.

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

var keyCode = event.keyCode;

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

}

keydown()과 같은 키 처리 함수에서는 보통 키 코드 값을 구분하여 각각의 키에대한 동작을 수행하게

한다. 애플리케이션 매니저는 키 코드 값을 공용 모듈의 형태로 제공하여 키 구분을 쉽게 해준다.

„TVKeyValue‟ 공용 모듈을 사용하기 위해 index.html 의 <head> 에 아래 코드를 추가한다.

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

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

키 입력시에 „welcome‟ Div의 내용이 바뀌도록 Main.js를 수정한다. 공용 모듈 객체를 생성하고 이를 이

용하여 keydown() 메소드에서 키를 구분, 각각의 키에대한 동작을 정의한다. 공용 모듈에 대한 자세한

내용과 키 코드 목록을 보려면 5. 공용 모듈 챕터를 보자.

var Main = { // Main object

}

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

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

Page 17: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

17

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:

alert("enter");

break;

case tvKey.KEY_RETURN:

break;

}

}

상, 하, 좌, 우 키 입력에 대해 „welcome‟ Div의 내용이 바뀌는 것을 확인할 수 있다.

4.2.6. 완성 & Sample code

삼성 TV에서는 웹에서 가능한 거의 모든 것을 할 수 있다. 또한 플러그인을 통해 TV를 직접 제어함으

로써 더욱 확장된 기능을 제공하는 애플리케이션을 만들 수도 있다. TV 하드웨어 특성상 몇몇 제약이

있지만 이를 극복하고 멋진 애플리케이션을 만들어 보자.

Page 18: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

18

아래는 우리가 지금까지 작성한 코드이다.

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> <category>lifestyle</category> <autoUpdate>y</autoUpdate> <cpname>Junyoung</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> <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>

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>

Page 19: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

19

<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 application 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;

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;

Page 20: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

20

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 21: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

21

4.3. config.xml

애플리케이션의 실행, 업데이트, 동작 환경 설정 등에 관한 정보를 가지고 있는 환경 설정 파일이다. 애

플리케이션 매니저는 여기에 있는 정보를 바탕으로 버전 관리, 애플리케이션 실행시의 환경 설정, 사용

자 계정 생성 관리의 작업을 한다. config.xml은 애플리케이션이 설치된 디렉터리에 있어야 하고 다음

항목들을 포함하여야 한다.

4.3.1. Tag 정보

Element Description Value

<widget> 애플리케이션 정보임을 알리는 태그. -

<ThumbIcon> 애플리케이션 매니저에서 표시되는 애플리케이션의 아이콘 이미지.

포커스가 없는 경우 사용되며 사이즈는 106 x 86 pixel로 한다. File path

<BigThumbIcon> 애플리케이션 매니저에서 표시되는 애플리케이션의 아이콘 이미지.

포커스가 위치한 경우 사용되며 사이즈는 115 x 95 pixel로 한다. File path

<category> 애플리케이션의 구분을 위해 사용하는 카테고리

video, sports, game, lifestyle, information, others 중 선택. String

<autoUpdate>

허브사이트와 동기화를 맞출 것인지 여부를 판단. 게임과 같이 한번

설치 이후 허브사이트 동기화가 필요없는 애플리케이션은 n 으로 선

택한다.

y | n

<apptype> 컨텐츠 타입에 관련된 정보(11:javascript, 12: flash, 13: game, …) Number

<contents> 컨텐츠 초기 실행시 파일 경로 (javascript 기반 외 애플리케이션에

한함) File Path

<channelType> 채널바운드서비스 타입 (optional) root | child

<channelRoot>

root 애플리케이션 아이디를 명시하여 root-child 의 관계를 확인할

수 있다.

(optional, 채널바운드서비스 타입이 child 인 경우에만)

1개 이상의 root에 연결되는 경우 :: 로 구분한다. (예.

AAA::BBB::CCC)

Application

ID

<channelName>

채널바운드서비스가 실행될 채널정보 (1개 이상의 채널에 실행되는

경우 ::로 구분한다. 예 AAA::BBB::CCC)

(optional, 채널바운드서비스 타입이 root 인 경우에만)

String

<channelDisplay>

설치된 채널바운드서비스가 최초 메인화면에서 표시될지 여부를 판단

한다. (optional)

(애플리케이션 매니저에서 설치된 애플리케이션을 안보이게하려면 n

으로 설정)

y | n

<previewjs> <삭제됨> String

Page 22: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

22

애플리케이션 매니저에서 보여질 Preview HTML을 생성할 JavaScript

파일의 이름을 넣는다. Preview JavaScript는 정해진 인터페이스를 구

현하는 방식으로 작성해야 한다. 자세한 내용은 4.4. preview 챕터를

참고한다.

<cpname>

애플리케이션의 제공자를 적는다. 로그인이 필요한 애플리케이션은

애플리케이션 매니저의 통합 로그인 기능을 이용하게 되는데 이 태그

의 값이 같은 애플리케이션들을 하나로 묶어서 통합 관리한다.

String

<cpauthjs> 사용자가 입력한 계정 정보의 유효성을 검증하는 JavaScript 파일의

이름을 넣는다. 이 파일은 정해진 양식대로 작성하여야 한다. String

<cplogo>

<삭제됨>

Preview 영역의 우측 상단에 표시될 이미지 파일의 path를 넣는다.

CP를 알리는 로고를 표시하며 사이즈는 100 x 28 pixel 로 한다.

File path

<preIcon>

<삭제됨>

가로 타입의 애플리케이션 매니저에서 포커스를 갖지 않는 애플리케

이션이 표시할 이미지 파일의 path를 넣는다. 애플리케이션의 특징이

나타나는 이미지를 표시하도록 하며 사이즈는 205 x 83 pixel 로 한다.

File path

<login>

로그인이 가능한 서비스인지의 여부. y로 설정할 경우 애플리케이션

매니저의 통합로그인 기능에서 로그인을 위한 ID, 패스워드를 입력할

수 있게된다. 입력한 계정 정보의 유효성 검증은 <cpauthjs> 태그의

값이 가리키는 JavaScript 파일에서 이뤄져야 한다.

y | n

<ver> 애플리케이션의 버전. 이 정보를 바탕으로 애플리케이션의 자동 업데

이트가 이뤄진다. x.xxx

<mgrver>

애플리케이션이 실행되는데 필요한 애플리케이션 매니저의 최소 버

전. 이 값이 현재 애플리케이션 매니저 보다 높다면 애플리케이션 매

니저의 업데이트를 시도한다.

x.xxx

<fullwidget>

전체화면 애플리케이션인지의 여부. 이 값을 y로 할 경우, 전체 화면

용 키셋(key set)이 등록되고 n으로 할 경우 부분 화면용 키셋이 등록

된다. 자세한 내용은 6.4. 애플리케이션에서 이용할 수 있는 키 챕터

를 참고한다.

y | n

<srcctl>

TV 화면에는 방송이나 사용자가 정한 동영상 중 하나만 재생될 수 있

다. 기본적으로는 방송이 재생되게 되어 있는데, 이 값을 y로 설정할

경우 사용자가 지정한 동영상이 재생될 수 있다.

이 값을 y로 설정할 경우 애플리케이션이 실행될 때 원래 소스(TV나

외부소스 등)에서 Media 소스로 변경되며, 애플리케이션이 종료될 때

원래 소스로 다시 변경된다.

y | n

<childlock> 성인 컨텐츠를 제공하는 애플리케이션은 패스워드를 걸어서 접근을 y | n

Page 23: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

23

막을 수 있다. 이 값을 y로 할 경우 애플리케이션 매니저의 갤러리에

서 잠금 기능을 이용할 수 있다.

<audiomute>

오디오를 켜고 끈다. 이 값을 y로 할 경우, 애플리케이션에 진입하면

TV 방송 소리가 나지 않는다. 전체 화면을 차지하는 애플리케이션의

경우에는 이 값을 y 로 설정하고 부분 애플리케이션일 경우에는 n으

로 설정한다.

y | n

<videomute> 비디오를 켜고 끈다. 이 값을 y로 할 경우, 애플리케이션에 진입하면

TV 방송이 화면에 나오지 않는다. y | n

<dcont>

Dynamic contrast 기능의 불능화 설정.

Dynamic contrast는 TV의 명도비를 조절하여 화면이 밝을 때는 더 밝

게, 어두울 때는 더 어둡게 함으로써 TV 화면을 좀 더 화사하게 해주

는 기능이다. 애플리케이션이 실행되었을 때 이 기능이 켜져 있다면

화면이 밝아지거나 어두워지는 현상이 나타날 수 있다.

이 값을 y로 설정하면 Dynamic contrast 기능이 꺼지고, n으로 설정하

면 켜진다.

TV 화면 전체를 차지하는 애플리케이션의 경우 이 값을 y로 설정하여

화면 깜빡임 현상을 없애도록 한다. 부분 애플리케이션의 경우에는 n

으로 설정한다.

y | n

<movie>

동영상을 재생하는 애플리케이션에서는 아래 문제가 발생할 수 있다.

1. HDMI 단자에 연결된 장치에서 영상을 재생하고 있는데(ex. DVD

Player) Source 전환이 일어나는 애플리케이션(ex. YouTube)을 실행할

경우 소리가 섞이는 문제.

2. TV 영상과 재생하는 동영상간의 Frame reate가 달라 애플리케이션 진입시

깜빡이는 문제

이 태그의 값을 y로 하면 애플리케이션 실행시 연결된 HDMI 장치를

종료시키고 Frame rate를 고정하여 위 문제 현상을 막을 수 있다.

y | n

<widgetname> 애플리케이션의 이름을 넣는다. String

<description> 간단한 애플리케이션 설명을 넣는다. String

<width>

<height>

애플리케이션이 사용하는 TV 화면의 영역을 넣는다. 여기서 설정한

영역을 넘어가는 부분은 화면에 나타나지 않는다. 기본적으로 Digital

TV의 스펙인 960, 540을 넣는다.

Number

<author> 저자에 대한 정보를 넣는다. string

4.3.2. Example

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

Page 24: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

24

<ThumbIcon>Resource/image/icon/picasa_106.png</ThumbIcon> <BigThumbIcon>Resource/image/icon/picasa_115.png</BigThumbIcon> <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> <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 25: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

25

4.4. Single-Sign-On

Sign-in이 필요한 애플리케이션이 구현해야할 부분에 대해 설명한다.

4.4.1. Single-Sign-On이란?

Single-Sign-On(이하 SSO)는 ContentsHome에 로그인 가능한 애플리케이션이 설치되었을시 한번의

ID/Password 인증과정을 통해서, ID/Password를 셋트에 저장시켜서 사용자 편리성을 높히는 기능이다.

4.4.2. 동작방식

1. SSO를 동작하게 되면 ContentsHome은 설치된 모든 애플리케이션들의 Config.xml에 있는 정보를

읽어온다.

2. Config.xml에서 특정 정보를 읽어와서 해당 애플리케이션이 로그인 가능한지 여부를 판별한다.

3. 로그인 가능한 애플리케이션일 시 해당 애플리케이션의 인증 모듈의 실행 정보를 가져온다.

4. 정해진 약속에 따라 모듈을 실행, 인증 결과를 ContentsHome이 리턴을 받는다.

5. 인증이 제대로 되었을시 ContentsHome은 인증시 사용된 ID/Password를 TV 셋트에 저장한다.

6. 차후 해당 애플리케이션을 실행시킬시 저장되어있는 ID/Password를 가져와서 애플리케이션에 정보

를 입력한다.

4.4.3. 애플리케이션 개발자가 반드시 구현해야 되는 사항

1. Config.xml에 특정 정보(4항에서 설명함)

2. ID/Password 인증을 할 수 있는 모듈(5항에서 설명함)

4.4.4. Config.xml 구현 가이드

(예)

<login>y</login>

<cpname>YouTube</cpname>

<cpauthjs>Youtube</cpauthjs>

Element 형식 설명

<login> y 또는 n login 가능여부에 대한 판별하는 태그로 SSO에 ID/Password를 등록

하기 위해서는 y로 되어야 한다.

<cpname> 영문자 단어 Contents Provider Name 의 약자로서 SSO에서 인식하는 고유 태그

반드시 유니크해야하고 동일한 이름이 있을 시 마지막에 인증된 모

듈로 해당 태그에 맵핑 된다.

Page 26: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

26

<cpauthjs> 영문자 단어 JavaScript파일명 및 클래스명으로서 XXXX.js이면 작성된

JavaScript 클래스명도 반드시 XXXX이어야 한다.

4.4.5. 모듈 구현 가이드

1. 반드시 파일명과 클래스명이 같아야 한다.

2. 인자는 ID, Password, 콜백함수로 구성되어진다.

3. 종료시 반드시 콜백함수를 호출해야하고, 정해진 값을 호출하지 않을 시 원하는 결과를 얻을 수 없

다.

(예)

var Youtube = {

}

Youtube.checkAccount = function(id, pw, callbackFunc) {

...

...

callbackFunc("TRUE");

}

4.4.6. 콜백호출시 리턴값.

인자로 받은 callbackFunc 함수에 아래의 값을 인자로 주며 실행해야한다.

Return value Description

“TRUE” 인증 성공, SSO에 ID와 Password을 저장함.

“FALSE” 아이디 또는 패스워드가 틀림. 다시 입력하도록 사용자를 유도함.

“ERROR” SSO에서는 네트워크 오류로 판단. 잠시 후 다시 시도하도록 사용자를 유도함.

기타 “ERROR”가 전달된 것과 동일하게 처리함.

Page 27: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

27

4.5. Reset

애플리케이션을 초기화할 수 있는 기능에 대해 설명한다.

4.5.1. Reset 이란?

애플리케이션 매니저에서 애플리케이션을 삭제, 또는 초기화를 실행할 때 각각의 애플리케이션들이 구

현한 초기화 모듈을 실행하도록 하는 기능.

4.5.2. 동작방식

1. 삭제/초기화 실행시 애플리케이션 매니저는 설치된 애플리케이션의 config.xml에 있는 정보를 읽어

온다.

2. config.xml에서 특정 정보를 읽어와서 해당 애플리케이션이 초기화 모듈 실행을 필요로 하는지 검사

한다.

3. 초기화 모듈이 있는 애플리케이션일 시 해당 모듈의 실행 정보를 가져온다.

4. 정해진 약속에 따라 모듈을 실행, 초기화를 시도한다.

* 단 애플리케이션 매니저는 초기화 모듈을 실행만 할 뿐 동작에 대한 어떠한 리턴값도 받지 않는다.

4.5.3. 애플리케이션 개발자가 반드시 구현해야 되는 사항

1. config.xml에 특정 정보(4항에서 설명함)

2. 초기화할 수 있는 모듈(5항에서 설명함)

4.5.4. Config.xml 구현 가이드

아래와 같이 xml Element를 추가한다.

<deleteJS>MyReset</deleteJS>

* deleteJS Element가 없을 시 해당 애플리케이션은 초기화 모듈을 실행하지 않는다.

4.5.5. 모듈 구현 가이드

1. 반드시 파일명과 클래스명이 같아야 한다.

2. 인자는 없다.

3. 함수명은 reset이다.

var MyReset= {

Page 28: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

28

}

MyReset.reset = function() {

...

...

alert("Reset Complete!");

}

Page 29: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

29

4.6. XHR 통신 예제

AJAX의 기본인 XHR 통신을 하는 예제를 소개한다.

XHRExample.js 를 인클루드하고 onload 시에 XHRExample.onload() 함수가 실행되게 되어 있는 간단한

HTML 이다.

<!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>

JavaScript를 보자. XHRExample은 객체로 선언되어 있고 내부에 XHRObj 라는 변수를 갖는다. XHRObj가

이미 존재한다면 destroy() 메소드를 호출한다. 이 부분은 아래에서 자세히 다룬다. XHR 객체가 성공적

으로 생성되었다면 XHR 객체를 셋팅하고 데이터를 요청한다. XHR의 state가 4로 바뀌어 데이터 수신이

완료됨을 알리면 onreadystatechange 에 등록한 recieveData() 가 실행된다.

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

if (this.XHRObj != null)

Page 30: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

30

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);

}

간단한 XHR 통신 예제를 살펴 보았다. 여기에는 몇가지 특징적인 부분이 있다. XHRObj라는 변수를

XHRExample 객체내에서 가지고 있는 점, XHRObj에 객체를 할당하기 전에 destroy() 라는 메소드를 호

출한 점이다.

삼성 TV에서는 반복적으로 XHR 객체를 생성, 사용하면 점점 메모리 사용량이 증가되어 어느 시점 이후

에는 애플리케이션이 정상 동작하지 않게 된다. 이를 위해 XHR을 사용할 때는 이전에 사용했던 객체를

없애고 새로운 객체를 할당하여 사용하여야 한다. 이전에 사용한 객체를 해제하기 위해서는 객체의 포

인터를 유지해야 하는데 이를 위해 XHR 객체를 다루는 변수를 기억하고 관리해야 한다. 예제에서는 객

체가 XHRObj 라는 변수를 가지고 있는데 이런 이유에서다.

XHR 객체를 메모리에서 해제하려면 XHR 객체의 destroy() 메소드를 이용한다. 이는 메모리 문제를 해결

하기 위해 Maple 브라우저에서 제공하는 메소드다.

XHRObjet.destroy

생성한 XHR object를 메모리에서 해제한다.

Syntax XHRObject.destroy()

Parameter none

Return Value none

Remarks 메모리 최적화를 위해 수행하는 이 함수는 Maple 브라우저에만 있는 함수이다.

Example if (this.XHRObj != null)

Page 31: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

31

this.XHRObj.destroy();

this.XHRObj = new XMLHttpRequest();

예제에서 애플리케이션 매니저가 제공하는 공용 모듈 두개를 인클루드하여 사용하는데 이에 대한 내용

은 5. 공용 모듈 챕터를 참고한다.

Page 32: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

32

5. 공용 모듈

애플리케이션 매니저가 제공하는 라이브러리에 대해 설명한다.

5.1. 공용 모듈?

애플리케이션 매니저는 애플리케이션에서 사용할 수 있도록 몇가지 JavaScript 모듈을 제공하는데 이를

„공용 모듈‟이라고 한다. 공용 모듈은 애플리케이션이 통상적으로 수행해야 하는 작업들을 보다 쉽게 할

수 있도록 해준다. 애플리케이션/애플리케이션 매니저와의 통신, 리모컨 키의 구분, 몇가지 플러그인의

사용 등의 작업을 수월하게 할 수 있다.

5.2. 사용 방법

사용하고자 하는 공용 모듈을 index.html 에서 include 한다. JavaScript의 파싱 순서상의 오류를 방

지하기 위해 가장 위쪽에서 include 하는 것을 권장한다. „$MANAGER_WIDGET‟은 애플리케이션 매니저에

서 제공하는 Common 모듈에 접근할 수 있게 해준다.

* SDK에서 „$MANAGER_WIDGET‟는 SDK가 설치된 폴더의 ‘commonlib’을 가리킨다.

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

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

Object를 생성한다.

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

알려진 멤버 변수, 메소드를 사용한다.

alert(tvKey.KEY_LEFT);

5.3. TVKeyValue

TVKeyValue

Page 33: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

33

TV Key code를 정의해 놓은 객체.

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

Syntax new Common.API.TVKeyValue()

Parameter none

Return Value TVKeyValue object

Remarks TV에서 사용하는 키 코드를 멤버 변수로 갖는 객체이다. 멤버 변수를 참조하여 키

를 구분을 할 수 있다.

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

Page 34: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

34

KEY_PLAY

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 35: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

35

5.4. Widget

애플리케이션의 정상적인 실행에 필요한 기능을 갖고 있는 객체이다. 애플리케이션이 처음 실행되었을

때 애플리케이션 매니저에 알려주는 메소드, 사용하려는 키를 등록 또는 해제하는 메소드 등이 있다.

Widget

애플리케이션의 정상적인 실행에 필요한 기능을 갖고 있는 객체.

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

Syntax new Common.API.Widget()

Parameter none

Return Value Widget object

Remarks none

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

widgetAPI. sendReadyEvent();

Members none

Methods

sendReadyEvent

sendExitEvent

sendReturnEvent

blockNavigation

putInnerHTML

5.4.1. sendReadyEvent()

sendReadyEvent

애플리케이션이 보여줄 상태가 되었음을 애플리케이션 매니저에게 알린다. 이 이벤트가 전달되야 애플

리케이션이 실질적으로 보여지고 동작할 수 있게 된다.

Syntax sendReadyEvent()

Parameter none

Return Value none

Remarks none

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

widgetAPI.sendReadyEvent();

Enumeration none

Page 36: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

36

5.4.2. sendExitEvent()

sendExitEvent

Exit 키를 입력한 것과 같은 효과. 애플리케이션을 종료하고 TV 화면으로 나간다.

Syntax sendExitEvent()

Parameter none

Return Value none

Remarks none

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

widgetAPI.sendExitEvent ();

Enumeration none

5.4.3. sendReturnEvent()

sendReturnEvent

Return 키를 입력한 것과 같은 효과. 애플리케이션을 종료하고 애플리케이션 매니저로 복귀한다.

Syntax sendReturnEvent()

Parameter none

Return Value none

Remarks none

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

widgetAPI.sendReturnEvent ();

Enumeration none

5.4.4. blockNavigation()

blockNavigation

키 이벤트에 대해서 강제 복귀되지 않도록 한다.

Syntax blockNavigation(keyEvent)

Parameter keyEvent: Key event

Return Value none

Page 37: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

37

Remarks KEY_RETURN, KEY_EXIT 이벤트는 실행 중인 애플리케이션을 강제 종료시킨다. 이 함

수는 강제 종료를 막고 애플리케이션을 계속 실행 상태로 유지 시킨다.

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 메소드.

Syntax putInnerHTML(div, contents)

Parameter div: innerHTML 을 사용할 Div Element

contents: innerHTML에 삽입할 내용

Return Value none

Remarks 반복적인 innerHTML 사용은 메모리 이슈를 발생시킬 수 있기 때문에 이 메소드를

이용한다.

Example

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

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

var contents = "Text to change";

widgetAPI.putInnerHTML(divElement, contents);

Enumeration none

Page 38: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

38

5.5. Plugin

애플리케이션 매니저는 플러그인의 몇몇 기능을 편하게 사용할 수 있게 wrapper 클래스를 제공한다. 플

러그인 사용에 필요한 오브젝트를 index.html에 삽입한 후 애플리케이션 매니저가 제공하는 클래스의

메소드를 사용하면 된다.

Plugin

플러그인을 사용하기 편하도록 래핑한 객체

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

Syntax new Common.API.Plugin()

Parameter none

Return Value Plugin object

Remarks none

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 : pluginObjectNNavi

SetBannerState

ShowTools

Object list pluginObjectTVMW

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

Page 39: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

39

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>

5.5.1. setOnWatchDog()

setOnWatchDog

Watch dog 기능을 켠다.

Syntax setOnWatchDog()

Parameter none

Return Value none

Remarks none

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

pluginAPI.setOnWatchDog();

Enumeration none

5.5.2. setOffWatchDog()

setOffWatchDog

Watch dog 기능을 끈다.

Syntax setOffWatchDog()

Parameter none

Return Value none

Remarks none

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

pluginAPI.setOffWatchDog();

Enumeration none

Page 40: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

40

5.5.3. setOnOSDState()

setOnOSDState

OSD 깨짐 방지 영역을 설정한다.

Syntax setOnOSDState(left, top, width, height)

Parameter

left : 영역의 왼쪽 좌표

top : 영역의 위쪽 좌표

width : 영역의 너비

height : 영역의 높이

Return Value none

Remarks 애플리케이션이 표시되고 있는 영역을 지정한다.

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

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

Enumeration none

5.5.4. setOffOSDState()

setOffOSDState

OSD 깨짐 방지 영역을 해제한다.

Syntax setOffOSDState(left, top, width, height)

Parameter

left : 영역의 왼쪽 좌표

top : 영역의 위쪽 좌표

width : 영역의 너비

height : 영역의 높이

Return Value none

Remarks setOnOSDState()에서 설정한 영역을 지정한다.

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

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

Enumeration none

5.5.5. registKey()

registKey

Page 41: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

41

Let the Application Manager register specific key

Syntax registKey(pNumKeyCode)

Parameter pNumKeyCode: key code

Return Value none

Remarks none

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

pluginAPI.registKey(tvKey.KEY_ TOOLS);

Enumeration none

5.5.6. unregistKey()

unregistKey

Let the Application Manager unregister specific key

Syntax unregistKey(pNumKeyCode)

Parameter pNumKeyCode: key code

Return Value none

Remarks none

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

pluginAPI.unregistKey(tvKey.KEY_ TOOLS);

Enumeration none

5.5.7. registIMEKey()

registIMEKey

Let the Application Manager register IME key

Syntax registIMEKey()

Parameter none

Return Value none

Remarks IME 입력시 쓰이는 0 ~ 9, - (hyphen), 이전채널 키를 등록한다.

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

pluginAPI.registIMEKey();

Enumeration none

Page 42: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

42

5.5.8. unregistIMEKey()

unregistIMEKey

Let the Application Manager unregister IME key

Syntax unregistIMEKey()

Parameter none

Return Value none

Remarks IME 입력시 쓰이는 0 ~ 9, - (hyphen), 이전채널 키를 해제한다.

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

pluginAPI.unregistIMEKey();

Enumeration none

5.5.9. registAllKey

registAllKey

Let the Application Manager register all keys

Syntax registAllKey()

Parameter none

Return Value none

Remarks 모든 키를 등록한다.

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

pluginAPI.registAllKey();

Enumeration none

5.5.10. unregistAllKey()

unregistAllKey

Let the Application Manager unregister all keys

Syntax unregistAllKey()

Parameter none

Return Value none

Remarks 모든 키를 해제한다.

Page 43: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

43

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

pluginAPI.unregistAllKey();

Enumeration none

5.5.11. registFullWidgetKey()

registFullWidgetKey

Let the Application Manager register specific key group

Syntax registFullWidgetKey()

Parameter none

Return Value none

Remarks 전체 화면 애플리케이션용 키들을 등록한다.

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

pluginAPI.registFullWidgetKey();

Enumeration none

5.5.12. registPartWidgetKey()

registPartWidgetKey

Let the Application Manager register specific key group

Syntax registPartWidgetKey ()

Parameter none

Return Value none

Remarks 부분 화면 애플리케이션용 키들을 등록한다.

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

pluginAPI. registPartWidgetKey ();

Enumeration none

5.5.13. SetBannerState()

SetBannerState

볼륨, 채널 OSD를 애플리케이션과 함께 띄우고 싶을 때 사용하는 함수.

Page 44: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

44

Syntax SetBannerState (nState)

Parameter

nState : 애플리케이션과 함께 뜨우고 싶은 OSD에 대한 정의된 값.

PL_NNAVI_STATE_BANNER_NONE = 0;

PL_NNAVI_STATE_BANNER_VOL = 1;

PL_NNAVI_STATE_BANNER_VOL_CH = 2;

Return Value None

Remarks 볼륨 OSD를 띄우고 싶을 경우 볼륨 key 값이 unregister 되어 있어야 한다. 채널도

마찬가지. Example을 보자.

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

화면 조정, 음향 조정 팝업을 띄우는 함수

Syntax ShowTools (nTool)

Parameter

nTool: 띄우고 싶은 팝업에 대한 정의된 값.

0 : Sound Setting popup

1 : Picture Setting popup

Return Value None

Remarks curWidget.onWidgetEvent 에 함수를 등록해 놓음으로써 팝업이 닫힌 시점을 알 수

있다.

Example

curWidget.onWidgetEvent = function(){

// 팝업이 닫히면 실행될 코드

}

Page 45: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

45

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

pluginAPI.ShowTools(1);

Enumeration none

Page 46: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

46

6. 개발 팁

애플리케이션 개발에 이슈가 되는 사항들을 정리한다.

6.1. 최초 애플리케이션 진입시 반드시 불러야 하는 함수

애플리케이션에 최초로 진입할 때 애플리케이션은 애플리케이션 매니저에게 자신을 화면에 나타나게 해

달라고 요청해야한다. 애플리케이션이 이 요청을 해야 애플리케이션 매니저는 애플리케이션을 화면에

나타나게 한다. 요청은 공용 모듈을 통해서 한다. 공용 모듈 „Widget‟의 sendReadyEvent() 메소드를 호

출하자.

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

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

6.2. 애플리케이션의 진입점

애플리케이션의 진입은 index.html로 고정되어 있다. 애플리케이션을 실행하게 되면 (애플리케이션 매니

저에서 애플리케이션 선택 후 엔터키 입력) index.html을 읽어들인다. <body>가 로드되었을 때 발생하는

이벤트인 „onload‟에 JavaScript 함수를 등록하여 애플리케이션 동작을 시작한다. 애플리케이션은 반드

시 공용 모듈의 „Widget‟의 sendReadyEvent() 메소드를 호출해야 한다.

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

6.3. 리모컨 키 입력 받기

리모컨의 버튼이 눌리면 „keydown‟ 이벤트가 발생한다. 이벤트는 이벤트가 발생할 당시에 포커스를 가

지고 있는 HTML 엘리먼트에게 전달되며 이 때 이 엘리먼트의 „onkeydown‟ 프로퍼티에 함수를 지정해

놓았으면 이 함수가 실행된다. 함수에서는 event.keyCode의 값을 참조하여 어떤 키가 눌렸는지 구분할

수 있다. 키코드는 공용 모듈 „TVKeyValue‟에서 참조할 수 있다.

애플리케이션은 항상 키를 받을 수 있어야 한다. 즉, 항상 키 이벤트를 받을 엘리먼트가 존재하고 포커

스를 가지고 있어야한다는 것이다. 어떤 엘리먼트에도 포커스가 없다면 키를 눌렀을 때 아무 반응도 하

지 않을 것이다.

Page 47: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

47

예를 보자. index.html 에 포커스를 가질 엘리먼트를 넣는다.

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

„onkeydown‟ 프로퍼티에 등록한 함수를 구현한다.

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. 애플리케이션에서 이용할 수 있는 키

애플리케이션 진입시에는 애플리케이션 매니저가 기본적인 키에 대해 등록 작업을 해준다. config.xml

의 <fullwidget> 태그의 값에 따라 전체 애플리케이션용 키, 부분 애플리케이션용 키로 나누어 등록된다.

전체 애플리케이션 부분 애플리케이션

KEY_VOL_UP

KEY_VOL_DOWN

KEY_MUTE

KEY_TOOLS

KEY_INFO

KEY_EMODE

KEY_DMA

KEY_MENU

KEY_SOURCE

KEY_PRECH

KEY_FAVCH

KEY_CHLIST

KEY_1

KEY_2

KEY_3

KEY_4

KEY_5

KEY_6

KEY_7

KEY_8

KEY_9

KEY_0

KEY_WHEELDOWN

KEY_WHEELUP

KEY_WHEELDOWN

KEY_WHEELUP

KEY_RED

KEY_GREEN

KEY_YELLOW

KEY_BLUE

KEY_RW

KEY_PAUSE

KEY_FF

KEY_PLAY

KEY_STOP

KEY_ENTER

Page 48: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

48

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_RED

KEY_GREEN

KEY_YELLOW

KEY_BLUE

KEY_RW

KEY_PAUSE

KEY_FF

KEY_PLAY

KEY_STOP

KEY_ENTER

KEY_RETURN

KEY_EXIT

KEY_RETURN

KEY_EXIT

애플리케이션은 사용하고자 하는 키를 추가적으로 등록 / 해제할 수 있다. 공용 모듈 „Widget‟의 메소

드를 이용하면 된다. 자세한 내용은 5. 공용 모듈 챕터에서 볼 수 있다.

6.5. 애플리케이션에서 빠져 나가기

기본적으로 Return, Exit로 애플리케이션을 빠져나가는 것 외에 애플리케이션 매니저에게 이벤트를 보내

서 애플리케이션을 종료시키는 방법이 있다. 공용 모듈 „Widget‟의 sendExitEvent(), sendReturnEvent()

메소드가 그것이다. 자세한 내용은 5. 공용 모듈 챕터를 보자.

6.6. Return, Exit 키의 강제 종료 방지

Return, Exit 키는 애플리케이션을 종료시키고 각각 애플리케이션 매니저로의 복귀, TV 화면으로 복귀 동

작을 수행하도록 지정되어 있는 키이다. 따라서 애플리케이션에서 이 키를 등록하고 사용한다고 하더라

도 강제적으로 애플리케이션은 종료되게 되어 있다. 이를 방지하기 위해서는 해당 키 이벤트가 발생했

을 때 공용 모듈 „Widget‟의 blockNavigation() 메소드를 실행해야 한다. 자세한 내용은 5. 공용 모듈 챕

터를 보자.

6.7. 애플리케이션 실행시 얻을 수 있는 추가 정보

애플리케이션 매니저는 애플리케이션을 실행할 때 추가적인 정보를 준다. 애플리케이션은 이 정보를

window.location.search를 참조해서 얻을 수 있는데 아래와 같다.

?country=US&language=1&modelid=Valencia&server=development&remocon=2_35_259&area=USA&id=ori59

[email protected]&pw=pxxxx

Page 49: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

49

Attribute Value Description

country 국가 코드 미리 정의된 국가 코드. 9.1. 국가 코드 챕터 참고.

language 언어 코드 미리 정의된 언어 코드. 9.2. 언어 코드 챕터 참고.

modelid Digital TV 모델 ID Digital TV 모델 ID

server development | operating 이용 서버의 분류, 개발 서버 | 운영 서버

remocon - 사용하지 않는다.

area 지역 코드 미리 정의된 지역 코드. 9.3. 지역 코드 챕터 참고.

Id string SSO에서 입력한 Id. 애플리케이션 매니저에서 로그인 후 애

플리케이션에 진입할 경우에만 전달됨.

pw string SSO에서 입력한 Pw. 애플리케이션 매니저에서 로그인 후 애

플리케이션에 진입할 경우에만 전달됨.

6.8. CSS 사용시 포함할 것

TV의 최대해상도인 960 x 540 pixel을 넘어서는 영역에 그려진 엘리먼트는 리모컨 키가 입력되었을 때

화면에 그려진 그림 전체를 움직이게 하는 현상을 발생시킬 수 있다. margin, padding의 값을 0으로 설

정함으로써 눈에 안띄게 영역을 넘어가서 발생되는 이런 문제를 방지할 수 있다. CSS에 다음의 내용을

포함하도록 한다.

body {

margin: 0;

padding: 0;

background-color: transparent;

}

6.9. 사용하려는 이미지 미리 로딩하기

이미지를 Maple 브라우저에서 사용면 브라우저에서 디코딩이 끝난 다음에 보여지게 된다. 빠르게 이미

지를 계속 교체하는 동작을 계속한다면 디코딩이 안끝나서 화면에 표시하지 못하는 경우가 발생할 수

있다. 이를 방지하기 위해 미리 이미지를 로딩하여 디코딩 시간을 없애는 방법을 사용할 수 있다.

var imagePreloading = new Image();

imagePreloading.src = "Resource/image/largeNFastChange.png";

위와 같이 하면 브라우저에서는 해당 이미지를 디코딩하게 된다. 한 번 디코딩된 이미지는 다른 곳에서

Page 50: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

50

다시 사용될 때는 디코딩 하지 않기 때문에 빠르게 화면에 나타낼 수 있다.

6.10. <input> tag의 특성

Maple 브라우저에서 <input> tag로 생성된 객체는 다른 객체로 가려지지 않는다. z-index 등으로 조절을

해도 <input> 객체는 항상 위에 보여진다.

6.11. Scroll bar

Maple에서는 스크롤 동작을 지원하지만 Scroll bar 이미지로

보여주지 않는다. 영역을 넘어가는 컨텐츠를 표시할 때 리

모컨의 동작에 컨텐츠 자체는 위, 아래로 스크롤 되지만 스

크롤 바는 보이지 않는 것이다. 따라서 스크롤 바를 그리고

싶다면 scrollHeight, scrollTop, offsetHeight 등을 써서 따로

구현해 주어야 한다.

스크롤이 필요한 영역의 컨텐츠에 anchor (<a>)를 넣고

anchor에 포커스를 준 뒤 상하키를 누르면 컨텐츠가 스크롤

된다.

(그림 출처 : http://sevencapitalsins.wordpress.com/2007/07/04/javascript-smooth-scroll/)

6.12. 동적 페이지 구성

애플리케이션의 동작 중 동적으로 페이지를 만들어야 하는 경우 createElement와 innerHTML을 이용할

수 있다. createElement는 HTML DOM을 다루는 표준 방식이지만 innerHTML 속성에 비해 느리게 동작한

다. TV라는 제약된 환경에서 동작해야하는 애플리케이션이므로 innerHTML을 사용하는 것을 권장한다.

6.13. 글자 간격 설정

Maple 브라우저에서 letter-spacing 의 값은 디폴트로 -1로 되어 있다. 태국어의 경우, letter-spacing 이

-1로 되어 있을 경우 글자가 겹치는 현상이 있다. 이런 문제를 해결하기 위해 이 값을 0으로 설정한다.

아래 코드를 CSS에 포함한다.

* {

letter-spacing: 0px;

Page 51: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

51

}

6.14. 메모리 관리

반복적인 innerHTML 변경과 계속되는 XMLHttpRequest object의 생성, 사용을 하게되면 메모리가 꽉 차

서 정상 동작을 하지 못할 수 있다. Garbage collector가 작동하지만 완벽하지 않으며 메모리 리소스가

풍족하지 않기 때문에 „제대로‟ 동작하는 „최적화된‟ 애플리케이션을 작성하기 위해서는 번거롭지만 추

가적인 작업을 해주어야 한다.

6.14.1. XMLHttpRequest 사용

삼성 TV에서는 반복적으로 XHR 객체를 생성, 사용하면 점점 메모리 사용량이 증가되어 어느 시점 이후

에는 애플리케이션이 정상 동작하지 않게 된다. 이를 해결하기 위한 방법은 XHR 통신 예제를 참고하자.

6.14.2. innerHTML 메모리 해제

innerHTML로 tag 안의 내용을 교체할 경우 DOM 트리에서는 해당 노드의 연결이 해제되고 새로운 노드

가 생성되어 연결된다. 이 때 연결이 해제되는 노드는 메모리 상에 남게 되는데 이런 동작이 수시로 이

루어질 경우 메모리 문제를 일으킬 수 있다. 이 문제를 해결하기 위해서 공용 모듈 „Widget‟의

putInnerHTML() 메소드를 사용한다. 메소드에 대한 자세한 내용은 공용 모듈 챕터를 참고하자.

6.15. Watch dog?

삼성 TV에서는 주기적으로 실행 중인 어플리케이션들의 정상 수행 여부를 체크한다. 만약 체크 중인

어플리케이션이 20초간 반응이 없을 경우 강제 종료시킨다. TV 시스템의 안정적인 동작을 위한 이런

감시체계를 Watch dog 이라고 한다. Watch dog은 공용 모듈 „Plugin‟의 setOnWatchDog(),

setOffWatchDog() 메소드를 이용하여 켜고 끌 수 있다.

애플리케이션에서 Network 관련 동작, 큰 용량의 데이터 파싱(ex. 주식정보) 등은 20초 이상이 걸릴 수

있는데, 이럴 경우 Watch dog에 의해 애플리케이션이 강제 종료될 수 있다. 따라서 이런 동작들을 수

행하기 전에 Watch dog 기능을 끄는 것이 좋다. 해당 동작이 완료된 후에는 다시 Watch dog 기능을

켠다. 만약 Watch dog 기능을 계속 꺼 놓으면 TV가 완전 동작을 멈출 수도 있으므로 주의한다.

6.16. OSD 깨짐 방지

애플리케이션의 배경에서 화면 전환이 빠른 동영상이 재생되는 경우 애플리케이션의 이미지가 깨지는

현상이 나타날 수 있다. 이 때 애플리케이션의 이미지 영역을 특수하게 설정함으로써 이를 개선할 수

Page 52: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

52

있다. 공용 모듈 „Plugin‟의 setOnOSDState(), setOffOSDState() 메소드를 실행함으로써 이 현상을 방지할

수 있다. 이 메소드의 사용법은 5.5. Plugin 챕터를 참고한다.

6.17. CSS text-overflow 속성 지원

Maple browser는 CSS1, CSS2를 지원한다. 여기에 CSS3의 속성 중 하나인 text-overflow 속성을 지원

하니 영역을 넘어가는 내용 처리에 효과적으로 대응할 수 있다.

6.18. 동영상 애플리케이션 작성시 주의 사항

Player(Plugin)를 사용하는 동영상 애플리케이션은 Player가 Stop된 상태에서 종료되어야 한다. 동영상

재생을 멈추지 않고 애플리케이션을 종료하게되면 TV가 멈추는 등의 심각한 문제가 발생할 수 있다. 이

를 방지하기위한 가장 확실한 방법은 <body> 태그의 onunload 속성에 등록한 함수에서 Player를 Stop

시키는 것이다.

6.19. IME 사용하기

애플리케이션에서는 리모컨을 통해 문자 입력을 받을 수 있다. Internet@TV는 IME(Input Method Editor)

를 사용하기 위한 모듈을 제공한다. 사용자는 이 모듈을 통해 각 언어별 문자를 입력할 수 있다. 이에

대한 자세한 내용은 함께 배포되는 IME Tutorial 문서를 참고한다.

Page 53: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

53

7. Maple 브라우저

애플리케이션의 실행 기반인 Maple 브라우저에 대해 설명한다.

7.1. Maple?

Markup engine Platform for Embedded Systems

CE(Consumer Electronics) 디바이스를 위한 browser engine

markup tag 와 script class를 이용한 디바이스 제어

애플리케이션은 TV 화면에 표시되고 동작한다. 이 때 화면에서의 이미지, 텍스트의 표시를 제어하고 관

리하는 주체가 Maple 브라우저이다. 애플리케이션이 하는 모든 동작, 디스플레이는 Maple을 통해서 한

다. Internet Explorer, Firefox 등의 브라우저가 PC에서 동작한다면 Maple은 삼성 TV에서 동작하는 브라

우저라고 할 수 있다.

7.2. 표준 지원 스펙

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

Image format 지원

BMP, JPEG, PNG, GIF

Page 54: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

54

8. File API

삼성 TV의 애플리케이션 엔진에서 지원하는 파일 입출력 시스템을 소개한다.

8.1. File API?

애플리케이션은 삼성 TV의 애플리케이션 엔진에서 지원하는 파일 입출력 시스템을 이용할 수 있다. 애

플리케이션 동작 중 얻은 데이터를 저장할 수 있고 언제든지 다시 읽어들여 데이터를 복원할 수 있다.

모든 애플리케이션은 공통의 영역에 파일 입출력을 수행한다. 따라서 파일 입출력을 할 때에는 디렉터

리를 생성하여 그 안에 파일을 생성, 이용해야 한다. 만약 애플리케이션간 데이터를 공유해야 한다면

약속된 path의 파일을 이용하여 서로 데이터를 공유할 수 있다.

파일의 입출력은 파일 시스템 객체를 만들고 그 객체의 인터페이스를 호출하는 방식으로 한다.

8.2. API

삼성 TV의 애플리케이션 엔진에서 제공하는 인터페이스 목록이다. JavaScript에서 사용하면 된다.

8.2.1. FileSystem()

FileSystem

애플리케이션에서 사용할 수 있는 파일 시스템 객체를 생성한다.

Syntax new FileSystem()

Parameter none

Return Value FileSystem object

Remarks none

Example var fileSystemObj = new FileSystem()

Enumeration none

8.2.2. openCommonFile()

openCommonFile

파일을 연다.

Page 55: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

55

Syntax fileSystemObj.openCommonFile(stringFilePath, stringMode)

Parameter

stringFilePath : 파일 이름을 포함한 경로

stringMode : fopen()의 2번째 파라미터와 동일

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 file object

Remarks none

Example var fileSystemObj = new FileSystem();

var jsFileObj = fileSystemObj.openCommonFile(“testFile.dat”, “r”);

Enumeration none

8.2.3. closeCommonFile()

closeCommonFile

파일을 닫는다.

Syntax fileSystemObj.closeCommonFile(jsFileObj)

Parameter jsFileObj: openCommonFile()로 연 파일의 file object

Return Value Boolean

Remarks none

Example

var fileSystemObj = new FileSystem();

var jsFileObj = fileSystemObj.openFile(“testFile.dat”, “r”);

var bResult = fileSystemObj.closeCommonFile(jsFileObj);

Enumeration none

Page 56: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

56

8.2.4. deleteCommonFile()

deleteCommonFile

파일을 지운다.

Syntax fileSystemObj.deleteCommonFile(stringFilePath)

Parameter stringFilePath : 파일 이름을 포함한 경로

Return Value Boolean

Remarks none

Example var fileSystemObj = new FileSystem();

var bResult = fileSystemObj. deleteCommonFile (“testFile.dat”);

Enumeration none

8.2.5. createCommonDir()

createCommonDir

디렉터리를 생성한다.

Syntax fileSystemObj.createCommonDir(stringDirectoryPath)

Parameter stringDirectoryPath: 디렉터리 이름을 포함한 경로

Return Value Boolean

Remarks none

Example var fileSystemObj = new FileSystem();

var bResult = fileSystemObj. createCommonDir (“testDirectory”);

Enumeration none

8.2.6. deleteCommonDir()

deleteCommonDir

디렉터리를 삭제한다.

Syntax fileSystemObj.deleteCommonDir(stringDirectoryPath)

Parameter stringDirectoryPath: 디렉터리 이름을 포함한 경로

Return Value Boolean

Page 57: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

57

Remarks none

Example var fileSystemObj = new FileSystem();

var bResult = fileSystemObj. deleteCommonDir (“testDirectory”);

Enumeration none

8.2.7. isValidCommonPath()

isValidCommonPath

경로가 존재하는지 확인한다.

Syntax fileSystemObj.isValidCommonPath(stringPath)

Parameter stringPath: 경로

Return Value

int

0 : JS 함수 실패

1 : valid

2 : invalid

Remarks none

Example var fileSystemObj = new FileSystem();

var bResult = fileSystemObj. isValidCommonPath (“testDirectory”);

Enumeration none

8.2.8. readLine()

readLine

열려있는 파일에서 한줄을 읽는다.

Syntax jsFileObj.readLine()

Parameter none

Return Value string

Remarks None

Example var jsFileObj = fileSystemObj.openFile(“testFile.dat”, “r”);

var stringResult = jsFileObj. readLine();

Enumeration none

Page 58: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

58

8.2.9. writeLine()

writeLine

열려있는 파일에 한줄을 쓴다.

Syntax jsFileObj.writeLine(string)

Parameter string: 파일에 쓸 스트링

Return Value boolean

Remarks none

Example var jsFileObj = fileSystemObj.openFile(“testFile.dat”, “w”);

var bResult = jsFileObj. writeLine(“testString”);

Enumeration none

8.2.10. readlAll()

readAll

열려있는 파일에서 여러 줄을 읽어온다.

Syntax jsFileObj.readAll()

Parameter none

Return Value string

Remarks none

Example var jsFileObj = fileSystemObj.openFile(“testFile.dat”, “r”);

var stringResult = jsFileObj. readAll();

Enumeration none

8.2.11. writeAll()

writeAll

열려있는 파일에 여러 줄을 쓴다.

Syntax jsFileObj.writeAll()

Parameter none

Return Value boolean

Remarks none

Page 59: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

59

Example var jsFileObj = fileSystemObj.openFile(“testFile.dat”, “r”);

var bResult = jsFileObj. writeAll(varLongString);

Enumeration none

Page 60: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

60

9. Appendix

9.1. 국가 코드

이 코드는 애플리케이션이 실행될 때 애플리케이션 매니저로부터 얻을 수 있다. 자세한 내용은 6.7 챕

터를 참고한다.

국가명 코드 국가명 코드

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 61: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

61

9.2. 언어 코드

이 코드는 애플리케이션이 실행될 때 애플리케이션 매니저로부터 얻을 수 있다. 자세한 내용은 6.7 챕

터를 참고한다.

언어명 코드 언어명 코드

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

Page 62: Application Development Guide for Internet@TV

Application Development Guide for 인터넷 TV

62

9.3. 지역 코드

이 코드는 애플리케이션이 실행될 때 애플리케이션 매니저로부터 얻을 수 있다. 자세한 내용은 6.7 챕

터를 참고한다.

코 드 지 역

KOR 한국

USA 미국/캐나다/맥시코

BRA 브라질, 파라과이, 우루과이, 아르헨티나

PANEURO 유럽

CHI 중국

HKG 홍콩

ARB 아랍

PANNORDIG 노르딕

SOUTHEASTASIA 동남아 (베트남, 태국, 인도, 중국, 이란, 이스라엘, 중앙아시아, 동아시

아, 아프리카)

ASIA_ATV 동남아 (베트남, 태국, 인도, 중국, 이란, 이스라엘, 중앙아시아, 동아시

아, 아프리카)

ASIA_DTV 호주, 뉴질랜드, 싱가폴

TW 대만, 콜롬비아

NORTHAFRICA TURKEY, MOROCCO, TUNISIA

EA_DTV 인도네시아, 말레이시아, 남아공, 베트남

CIS CIS

PHI Philippine

S_AFR_DTV South Africa DTV