tizen-based tv webapp sdkdownload.tizen.org/misc/media/tds2014/slides/tizen-based...3 tizen-based tv...

Tizen-based TV WebApp SDK

Ping Song

Samsung Electronics

Overview

3

Tizen-based TV SDK Overview

Everyone Partners

Web App SDK Platform SDK Utility Tools

HTML5 APIs

IDE

Emulators TV SW Module Build Tools Web Inspector

Device API

CAPH DRM Support

App Multitasking Dynamic Analyzer

Tools for HTML/CSS/JS

web applications.

Tools for developing native

apps and TV modules. Debugging and

development tools.

4

Tizen-based TV SDK Overview

Everyone Partners

Web App SDK Platform SDK Utility Tools

HTML5 APIs

IDE

Emulators TV SW Module Build Tools Web Inspector

Device API

CAPH DRM Support

App Multitasking Dynamic Analyzer

11/1 : 1.0 Release 7/1 : Beta Release

Tools for HTML/CSS/JS

web applications.

Tools for developing native

apps and TV modules. Debugging and

development tools.

5

Tizen-based TV Web SDK

IDE Emulators - Web Simulator

- Full Stack TV Emulator

6

Tizen-based TV Web App Structure

HTML Page : Structure

CSS : Style

Javascript : Behavior

config.xml : Environment &

application info

7

Specialization for Tizen • Best Tool for Developing Tizen Web Application

• Project Management

• Project Wizard & Explorer

• Templates, User Templates and Sample Apps

• Configuration Editor for Tizen Web App (W3C Widget configuration)

8

Tizen-based TV SDK: IDE

Emulator Manager

&

More

9

Tizen-based TV SDK : IDE

• Features

• Eclipse-based

• HTML, JavaScript, CSS

• Emulator Integration

• Project Templates

• More…

10

Tizen-based TV SDK: IDE

• Features

• Hover Insight

• Auto-complete

11

Tizen-based TV Web SDK: Web Simulator

• Light Weight & Ideal for Quick Testing

12

Tizen-based TV Web SDK

Code Editor Edit, debug, and package your

apps.

TV Device Emulator

Web Simulator

APIs, Documentation, and

more

UI Designer

C aph

14

Caph UI Elements

Caph has many impressive widgets.

Box Image

Dom Container

Spinner

Navigator

Button Strip

Progress Bar Color Tag

List

Panel

Grid

Carousel

Label

Input Box

Button Book

Image

Gallery

15

Caph UI Designer

Features

• WYSIWYG

Designer

• Drag-n-Drop

Components

• Programming

Support

• Page

Management

• Components

Snippets

• More…

16

Caph Text Editor

caph.define("caph.test.Test2", {

$extend: "caph.test.Test1",

$init: function() {

this.x = 30;

},

// public area

fn: function() {

this.$super.fn();

console.log(this.x * 10);

},

test2: function() {

console.log("test2");

}

});

OOP

Web Simulator

18

Overview

19

What’s New?

• Web API

• Standalone Mode

• HTTP Live Streaming

• More

• Integration Ongoing

20

Functionality: Web API

Network & Comm

Storage

Web API

Device API W3C

Application

Bluetooth

Media Contents

Notification

Download

CSS3

Key Mapping

HTML 5

File

Web Worker

getUserMedia

WebAudio

WebSocket

Web Notification

Miscellaneous

Full Screen API

Typed Array

Web GL Game Pad

App Cache

App Cache

Widget

Web UI FW & Caph

• Standard HTML5 + Tizen Device API

21

Functionality: Load App

• Run As From IDE

• Standalone Mode

22

Functionality: HLS

23

Functionality: Remote Control

24

Functionality: Connect Mobile RC

• QR Code

• UPnP

25

Functionality: Web Inspector

26

Functionality: Configuration Settings

27

Functionality: Panel Settings

Check to Display

28

Example: How to debug with Web Simulator • Packages and Applications – 1/3

29

Example: How to debug with Web Simulator

The installed Test package

contains two apps.

• Packages and Applications – 2/3

30

Example: How to debug with Web Simulator

Before After

function onListInstalledApps(applications) {

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

console.log("ID : " + applications[i].id);

}

tizen.application.getAppsInfo(onListInstalledApps);

• Packages and Applications – 3/3

Conclusion

32

Conclusion

• Tizen-based TV Web SDK allows you to make Web Application

easily and quickly.

• Caph UI Designer will be released soon.

• More features will be supported in SDK.

• Multi-screen

• Billing etc.