Download - Samsung TV SDK Manual

Transcript
Page 1: Samsung TV SDK Manual

Contents | 1

Page 2: Samsung TV SDK Manual

2 | Samsung TV SDK Manual

Chapter 1 Getting Started ............................................................................. 3

Introducing Samsung Smart TV SDK .................................................... 4

Starting Samsung Smart TV SDK .......................................................... 6

Chapter 2 The Work Environment ............................................................... 7

The Editing Environment ........................................................................ 8

Adjusting the Editing Area ................................................................... 11

Code Editing Settings ........................................................................... 14

Grid Lines and Rulers ........................................................................... 22

Document Toolbars ............................................................................... 24

Code Edit Mode, Visual Mode & Split View Mode ............................. 27

Editing in Visual Mode ......................................................................... 29

Chapter 3 Panels .......................................................................................... 33

Components Panel ................................................................................ 34

HTML Validator Panel ......................................................................... 36

Library Panel ......................................................................................... 38

Log Manager Panel ............................................................................... 42

Outline Panel ......................................................................................... 45

Properties Panel .................................................................................... 46

Project Panel and Toolbar ..................................................................... 48

Results Panel ......................................................................................... 54

Chapter 4 Creating Apps ............................................................................. 57

Creating New Projects .......................................................................... 58

Opening and Closing Projects ............................................................... 60

Creating and Saving Files ..................................................................... 62

Opening and Closing Files .................................................................... 65

Project Settings ..................................................................................... 66

Project Scenes ....................................................................................... 69

Chapter 5 Previewing and Packaging ....................................................... 77

Viewing Apps with the Emulator .......................................................... 78

Packaging Apps .................................................................................... 81

Chapter 6 Debugging Apps ........................................................................ 85

Using the Debugger .............................................................................. 86

The Debugging Interface ...................................................................... 87

Using Breakpoints ................................................................................. 90

Page 3: Samsung TV SDK Manual

Chapter 1 Getting Started

Page 4: Samsung TV SDK Manual

4 | Samsung Smart TV SDK Manual

Introducing Samsung Smart TV SDK

Thank you for using the Samsung Smart TV SDK.

The Samsung Smart TV SDK is a tool which allows developers to create and

edit Samsung Smart TV applications. It provides an intuitive UI and powerful

easy-to-use features for convenience and functionality. The SDK offers three main

benefits: easy code editing, easy visual editing and fast packaging. It allows you to

inspect and edit the code of the applications, and it provides a click-and-drag visual

editing environment for designing and arranging the visual aspects of your apps.

Easy Code Editing

Samsung Smart TV applications consist of a combination of HTML, CSS,

JavaScript, XML, image and other files. The Samsung Smart TV SDK arranges

files into projects, providing a Project Explorer panel and tabbed document

browsing so that you can access your project documents easily. You can

automatically create blank apps which contain all of the basic app files you will

need. Automatic code completion and syntax highlighting make editing code easier.

Commonly used code is available from the Script Storage and Functions and

Classes panels at your convenience. Toolbars allow you to insert common

components and formatting quickly. After creating an app, you can test it with the

HTML Validator and the Samsung Smart TV SDK Emulator, which recreates the

TV environment on your computer.

Easy Visual Editing

The Samsung Smart TV SDK allows you to intuitively edit the visual aspects of

your apps. The visual mode shows a visual preview of your app. You can click and

drag common app components such as buttons, check boxes and images from the

Component panel into the Editing window. In the Editing window, you can resize

and arrange your components and inspect the specific properties of each

component in the Properties panel. Rulers, grid lines and arrangement/alignment

commands make it easy to modify your components. Samsung TV apps can be

divided into scenes similar to scenes in a film or a flash movie, making it easy to

Page 5: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 5

sequeway from one arrangement of components to another. The Samsung Smart

TV SDK provides a Scenes panel to help you manage scenes.

Fast Packaging

Once you have designed your app in the Samsung Smart TV SDK, you can test it

in the TV emulator and package it for use on an actual Samsung Smart TV. The

packaging feature combines your files and language resources and puts them in a

zip file. Then it can automatically load the file onto your server.

Page 6: Samsung TV SDK Manual

6 | Samsung Smart TV SDK Manual

Starting Samsung Smart TV SDK

The Samsung Smart TV SDK can be started from the desktop icon or the Windows

start menu.

Starting Samsung Smart TV SDK

Double-click the [20XX]Samsung Smart TV SDK icon on your

Windows desktop.

Click the Windows Start button and click All Programs > Samsung

> [20XX]Samsung TV SDK (X.X.X) > [20XX]Samsung TV SDK

Editor(X.X.X).

The (X.X.X) represents the version number of the program.

Tasks which can be performed from the start menu

You can access commands for the following tasks by clicking the Windows Start

button and clicking All Programs > Samsung > [20XX]Samsung TV SDK

(X.X.X).

Run the Samsung Smart TV SDK

Run the Samsung Smart TV SDK Emulator

View the Samsung Smart TV SDK Help

View the Samsung Smart TV SDK Manual

Uninstall the Samsung Smart TV SDK

The (X.X.X) represents the version number of the program.

Page 7: Samsung TV SDK Manual

Chapter 2 The Work Environment

Page 8: Samsung TV SDK Manual

8 | Samsung TV SDK Manual

The Editing Environment

The following is an overview of the Samsung Smart TV SDK editing environment.

The Editing Environment

The Samsung Smart TV SDK's basic editing environment is as shown below.

1. Title Bar: Displays the project name and type.

2. Menu and Toolbars: The menu contains the program's various

commands, and the toolbars offer access to convenient features.

3. Project Panel: The Project panel shows a list of open projects and

the files associated with them.

4. Editing Window: The Editing window is the space for editing files

and designing scenes. Above the window are tabs which you can

click to switch between files.

Page 9: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 9

5. Property Panel: The Property panel shows the properties of selected

components and scenes.

6. Outline/Components Panel: The Outline panel shows an outline of

the document you are currently viewing in the Editing window. The

Components panel shows a list of all the scenes in your app and the

components that each scene contains.

7. Bottom Panel: The bottom panel provides the following four tools:

Log Manager Panel: The Log Manager panel shows log

data and allows you to add or delete logs.

Results Panel: When you use the Find command, the

results are displayed in the Results panel.

HTML Validator: The validity of a document's HTML

source code can be checked to see if it adheres to

standards, and the results are displayed in the HTML

Validator panel.

Breakpoints: Displays the debugger breakpoints

contained in a script.

8. Library Panel: The Library panel provides pre-made JavaScript,

CSS and visual components which can be dragged and dropped into

the Editing window.

Page 10: Samsung TV SDK Manual

10 | Samsung TV SDK Manual

Viewing the Editing Window File List

When several files are open at once, their names may not all be visible.

To view a list of all the files open in the Editing window, click the small triangle

in the upper right-hand corner of the Editing window.

If you have not saved a file, an asterisk appears in front of its name like

'*example.html'.

Zooming In and Out of the Editing Window

If you are using a wheel mouse, hold down the Ctrl key and move the wheel up to

zoom in and down to zoom out.

Changing the Language

The Samsung Smart TV SDK allows you to choose between English and Korean.

To change the language of the menu names, panel names, etc., do the following.

1. Click Tools > Preferences.

2. In the Preferences dialog box, select General from the list on the left

and select a language from the drop-down box.

3. Click OK.

The language of the program will be changed when you restart it.

Page 11: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 11

Adjusting the Editing Area

You can arrange the Editing window to your liking by resizing, hiding and

showing its panels.

Switching Between Panels

In the Samsung Smart TV SDK, a number of panels share the same panel space.

You can switch between them by clicking the icons at the top of the panel.

For example, the Components panel and the Outline panel share the same space in

the bottom left corner of the user interface. Click the Components icon at the

top of the panel space to display the Components panel or click the Outline

icon to display the Outline panel as shown below.

You can also click View > Panels and click one of the panel names to view it.

Panels that are already being shown are inactive in this menu.

Showing and Hiding Panel Windows

In addition to switching between panels, Samsung Smart TV SDK can show or

hide whole panel windows. Panel windows are sets of panels that take up a whole

side of the user interface. Show or hiding them allows you to devote more or less

space to the Editing window.

Page 12: Samsung TV SDK Manual

12 | Samsung TV SDK Manual

There are three buttons in the top left corner for showing and hiding panel

windows.

Show/Hide Navigator Window: Show or hide the panel area on

the left side of the screen including the Project, Outline and

Component panels.

Show/Hide Info Window: Show or hide the panel area on the

bottom of the screen including the Results, Log Manager, HTML

Validator and Breakpoints panels.

Show/Hide Library Window: Show or hide the panel area on

the right side of the screen including the Properties panel and the

Library panel.

Page 13: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 13

Adjusting Panel Size

You can adjust the height and width of panels with the mouse. Place the mouse

over one of the panel's borders and the mouse cursor will change into or .

Click and drag the panel border to adjust the panel's size. If you reach the

minimum size limit, the width or height will not decrease any further.

You can also click the buttons at bottom corners of the program screen to adjust

how much space vertically arranged panels use.

Click to fill the vertical area with the top panel.

Click to split the vertical area between to the top and bottom

panels.

Click to fill the vertical area with the top panel.

Page 14: Samsung TV SDK Manual

14 | Samsung TV SDK Manual

Code Editing Settings

You can adjust how the Editing window displays source code. In the Preferences

dialog box, the Edit Code settings determine indentation, soft-wrap, source

coloring, etc. The Font/Color settings determine the font and color of source code.

Edit Code Settings

To set up how code is displayed in the Editing window, click Tools > Preferences

and click Edit Code in the menu on the left.

Page 15: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 15

Highlight current line

The background of the line where the cursor is placed will change color so

that it is easier to see.

Show line numbers

Show the source code line number in the left margin.

Mark blank space

Mark the blank spaces created when the space key is pressed.

Page 16: Samsung TV SDK Manual

16 | Samsung TV SDK Manual

Show end of line

Show the end of each line of code.

Soft-wrap lines

When lines of code exceed the width of the Editing window they are wrapped

around to the left border. If this option is not selected, the lines are not

wrapped and you must scroll right to see the entire line.

<When soft-wrap is turned on>

<When soft-wrap is turned off>

Page 17: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 17

Auto-indent

When a new line is started after an indented line, it is indented an equal

amount.

View expand/collapse buttons

Content within tags can be hidden or displayed. If you press the minus (-)

button beside a tag, the block of code within that tag will be hidden and the

button will turn into a plus (+). Press the plus (+) sign to display hidden code.

If View expand/collapse buttons is unchecked, all code will be displayed

normally.

Use tabs to indent

Indent text by inserting a blank space which is the size of the space created

when you press the tab key in the Editing window.

Page 18: Samsung TV SDK Manual

18 | Samsung TV SDK Manual

Tab width

Set the number of blank spaces to use as the tab width when you use tabs to

indent. The default value is 4.

Line Spacing

Set the amount of space between lines.

Enable source coloring

This feature displays each element such as a tag or attribute in a different

color to make it easier to read the code. If you turn the source coloring off,

the code will all appear as black.

<When source coloring is on>

<When source coloring is off>

Page 19: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 19

Enable code helpers

Choose whether to use the automatic code completion (code helpers) feature.

When you enter part of a tag in the Editing window, the code helpers feature

automatically displays a list of possibly matching HTML and CSS elements

and attributes from which you can choose to complete the tag.

Page 20: Samsung TV SDK Manual

20 | Samsung TV SDK Manual

Font / Color Settings

To set up the font and color of code displayed in the Editing window, click Tools >

Preferences and click Font/Color in the menu on the left.

Style

Select the type of text to modify from the list.

Font

Enter the font for the selected text. For example, if you select 'Tag name'

from the text list and then 'Arial' from the font list, all tag names in the

Editing window will appear in Arial font.

Size

Choose the characters' size.

Font color

Set the color of the text in the Editing window.

Page 21: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 21

Background

Set the text's background color.

(Text Styles)

Bold: Make the text thicker

Italic: Make the text slant slightly to the right

Underline: Underline the text

Preview

Preview how the text will appear in the Editing window.

Page 22: Samsung TV SDK Manual

22 | Samsung TV SDK Manual

Grid Lines and Rulers

When you are in Visual Mode, grid lines and rulers appear on the Editing

window to help you place components more precisely.

Rulers

The rulers appear along the top and left sides of the Editing window. The numbers

on the rulers indicate the distance in pixels from the top left corner.

Viewing Grid Lines

Grid lines are shown on the Editing window to help you place components. The

grid lines are spaced 10 pixels apart, horizontally and vertically. They do not

appear in scenes when the app is used.

To view the grid lines, click the icon at the top-left corner of the Editing

window. Click the icon again to hide the grid lines.

Snapping to Grid Lines

You can make components in the Editing window 'snap' to the gridlines. This

means that instead of moving freely when you click and drag them, the

objects automatically align themselves to the nearest gridline when the mouse is

released. This allows you to easily line up objects with precision.

Page 23: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 23

To make components snap to the grid lines, click the icon at the top-left corner

of the Editing window. Click the icon again to move objects freely.

Page 24: Samsung TV SDK Manual

24 | Samsung TV SDK Manual

Document Toolbars

When you open an HTML, JavaScript or CSS document in the Editing window of

the Samsung Smart TV SDK, a small toolbar appears over the document for

inserting various document elements quickly, such as HTML tags and JavaScript

statements. Click a button on the toolbar to insert the document element.

The HTML Toolbar

The toolbar offers the following buttons, from left to right:

TABLE: Create a table for arranging items in rows and columns.

FORM: Create form documents to open multiple HTML documents in

a single browser window.

DIV: Divide an HTML document into a division or section.

SPAN: Group inline elements in a document

BR: Insert a line break.

P: Create a paragraph

H1: Create a heading (first level)

H2: Create a heading (second level)

H3: Create a heading (third level)

B: Make text bold

Page 25: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 25

EM: Make text emphasized

I: Make text italic

S: Make text strong.

A: Turn text into a hyperlink

IMG: Insert an image

A (mailto): Turn text into a hyperlink with a mailto (email) attribute

LI: Create a list item

OL: Create an ordered (numbered) list

UL: Create an unordered (bulleted) list

TD: Create a table cell

TR: Create a table row

The JavaScript Toolbar

The toolbar offers the following buttons, from left to right:

Insert a document.getElementById statement

Turn the selected text into a comment

Insert a For statement

Insert a function

Insert an If statement

Insert a Switch statement

Insert a Try-Catch statement

Page 26: Samsung TV SDK Manual

26 | Samsung TV SDK Manual

The CSS Toolbar

The toolbar offers the following button:

Turn the selected text into a comment.

Page 27: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 27

Code Edit Mode, Visual Mode & Split View Mode

The Samsung Smart TV SDK has three editing modes: Code Edit Mode, Visual

Mode and Split View Mode.

Code Edit Mode allows you to edit the text of documents directly.

You can edit the code of HTML, CSS, JS and other text files in the

Editing window.

Visual Mode allows you to arrange the layout of your scenes. You can

drag and drop items from the Library panel and move them around in

the Editing window.

Split View Mode splits the Editing window between Visual Mode on

the top and Code Edit Mode on the bottom.

Switching Between Modes

You can switch between the two modes using the menu commands or the mode

buttons at the top-right corner of the user interface.

To enter Code Edit Mode, do one of the following.

Click View > Code Edit Mode.

Click the Code Edit Mode button at the top-right corner of the

user interface.

To enter Visual Mode, do one of the following.

Click View > Visual Mode.

Click the Visual Mode button at the top-right corner of the user

interface.

Page 28: Samsung TV SDK Manual

28 | Samsung TV SDK Manual

To enter Split View Mode, do one of the following.

Click View > Split View Mode.

Click the Split View Mode button at the top-right corner of the

user interface.

Page 29: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 29

Editing in Visual Mode

When you are in visual mode, you can add components to your scenes and arrange

them as you like.

To add components, click and drag them from the Library panel to the Editing

window. From there, you can click and drag them to move them around in the

scene area.

Resizing Components with the Mouse

When you select a component, it will be surrounded by small boxes on its corners

called anchor points. You can resize the component with the mouse by clicking and

dragging these anchor points. Not all components are fully resizable. If an anchor

point is gray, it cannot be dragged to resize the component.

Selecting Multiple Components

You can select multiple components to move them all at once, align them or make

them all the same size. The last component you select will be the active component

and will be highlighted in purple. The position and size of the active component

will be used as the basis for alignment and resizing commands.

Page 30: Samsung TV SDK Manual

30 | Samsung TV SDK Manual

To select multiple components, do one of the following:

Hold down the shift button and click the components.

Click a blank space in the scene and drag the mouse. A rectangle will

appear. Drag the rectangle over the components you want to select.

Using the Right-click Context Menu

If you right-click a component, you will be presented with a context menu with

commands for cutting, copying, pasting and deleting components. You will also

find commands for some of the functions described below.

Page 31: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 31

Aligning Components

To align a group of components,

1. Select several components and right-click them.

2. In the context menu, select Align and click one of the following

commands.

Align Left: Align the left edge of all components to the

left edge of the active component.

Align Right: Align the right edge of all components to

the right edge of the active component.

Align Top: Align the top edge of all components to the

top edge of the active component.

Align Bottom: Align the bottom edge of all components

to the bottom edge of the active component.

Making Components the Same Size

To make a group of components the same width, height or both,

1. Select several components and right-click them.

2. In the context menu, select Make Same Size and click one of the

following commands.

Horizontally: Make all components the same width as

the active component.

Vertically: Make all components the same height as the

active component.

Both: Make all components the same width and height as

the active component.

Page 32: Samsung TV SDK Manual

32 | Samsung TV SDK Manual

Setting How Components Overlap

Components can overlap each other in the editing window. A component on a

higher level will cover the components on lower levels (these levels are known as

z-order).

To set how a component overlaps other components,

1. Right-click the component and click one of the following commands

in the context menu.

Bring to Top: Make the component overlap all other

components.Send to Bottom: Make the component be

overlapped by all other components.

Move Up: Move the component up one z-order level

Move Down: Move the component down one z-

order level.

Page 33: Samsung TV SDK Manual

Chapter 3 Panels

Page 34: Samsung TV SDK Manual

34 | Samsung TV SDK Manual

Components Panel

The Components panel shows a list of all the scenes in your app and the

components that each scene contains. The panel is useful for getting an overview

of how your app is structured, for adding and deleting scenes, and for selecting

individual components in an app with many components.

While you are in visual mode, you can click a scene or component in the

Components panel to view it in the Editing window. Its properties will also be

shown in component section of the Properties panel.

Context Menu Options

If you right-click a component, you are presented with the following context menu

options:

Delete: Delete the selected component instance. The instance will be

deleted in the editing window as well.

Edit ID: Edit the name of the component instance.

Go to Source Code: Go to the source code responsible for the

component in the scene.

Page 35: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 35

If you right-click a scene, you are presented with the following context menu

options:

Insert Scene: Inserts a new scene right after the selected scene.

Insert Master Scene: A master scene is a scene which inserts a new

app in the current scene. Click this command and select an app in the

dialog box which appears.

Delete Scene: Removes the selected scene from the list.

Rename Scene: Change the name of the scene.

Preview Scene: Preview the scene in the emulator.

Scene 1 is the basic scene which is provided for every app in the Samsung Smart

TV SDK and cannot be deleted or relocated.

Page 36: Samsung TV SDK Manual

36 | Samsung TV SDK Manual

HTML Validator Panel

The Samsung Smart TV SDK can analyze the syntax of an HTML document and

display the results in the HTML Validator panel.

Analyzing and Correcting HTML Validity

To run an HTML validity check,

1. Open the document that you want to analyze in the Editing window.

2. Click Tools > HTML Validator.

The results of the validity check will be shown in the HTML Validator panel. Each

result is organized into 4 columns of information:

Type: Whether result is an error or a warning. Errors are more severe

than warnings.

Row: The line number where the error or warning occurred.

Column: The number of spaces from the left side of the document

where the error or warning occurred.

Content: The specific content of the error or warning.

The Validator panel will normally show both errors and warnings. You can

view only errors by clicking the Error button, or view only warnings by

clicking the Warning button. To view both types again, click the All button.

Page 37: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 37

To edit an error, go to the line and column indicated in the HTML Validator

panel. For example, if you see the results shown in the image at the top of this page,

click Edit > Go to Line and then enter '3' in the Line number box of the Line

Number dialog box. The cursor will be placed at the 3rd line of the code in the

Editing window. Keep in mind, however, that the ultimate cause of the error or

warning may be in a different location than indicated in the HTML Validator panel.

Page 38: Samsung TV SDK Manual

38 | Samsung TV SDK Manual

Library Panel

The Library panel provides convenient pre-made items that you can drag and drop

into into your app's documents and scenes. There are three categories of items

provided: Components, JavaScript and CSS. To switch between the three

categories, click the buttons at the top of the panel. The main part of

the Library panel is a list of pre-made items for whichever category you have

chosen. Click an item to select it. At the bottom of the panel is a description

whichever item is selected.

Components

A component is a pre-made item which can be added to a scene in an app. App

scenes can be created easily by adding, arranging and adjusting components. Many

components are functional items that allow the user to interact with the app. For

example, a button which opens a pop-up window.

Components are added to an app by clicking the component and dragging it over to

the editing window. Components can be arranged within the editing window by

Page 39: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 39

further clicking and dragging. Select a component and press the Delete key to

delete the component.

After dragging a component from the Library panel to the Editing window, you can

edit the component properties in the Properties panel. You can view a list of all the

components that have been added to the Editing window in the Components panel.

JavaScript and CSS

The JavaScript and CSS library items are blocks of pre-made code which can be

added to .js and .css files respectively. When you drag a JS or CSS item into a

document, the item's code is added to the document. After you add the code, you

can change it to fit your app specifically.

Inserting Library Items into the Editing Window

To insert a library item into a document,

1. Click the item in the Library panel.

2. Drag the item from the Library Panel to the Editing window and drop

it in the exact location where you want it inserted.

You cannot add text (JS or CSS) to an app's scenes, nor can you add

components to a text-based document.

Page 40: Samsung TV SDK Manual

40 | Samsung TV SDK Manual

Types of Components

The Samsung Smart TV SDK provides the following components.

Button

Handles button events

Check Box

Provides a check box button for selecting options

Date Picker

Allows the user to select calendar dates

Help Bar

Displays a 960px-width bar at the bottom of the screen

Image

Displays an image.

Input

Provides an empty field into which the user can enter text

Label

Displays a simple string

List Box

A vertical list

List Box 2

Horizontal, vertical list

Page 41: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 41

Loading Image

Displays a waiting image for situations like network loading

Popup

Displays a popup message with an OK button

Popup (OK, Cancel)

Displays a popup message with an OK button and a Cancel button

Radio Button

A button for selecting a single option out of many

Scrollbar

Displays the currently selected position on a list

Video

Fullscreen video/audio playback control

Video 2

Video/audio playback area with adjustable size

Video 2 Controller

Control for adjusting the playback speed, volume, etc. of video/audio playing

in a Video 2 component.

Page 42: Samsung TV SDK Manual

42 | Samsung TV SDK Manual

Log Manager Panel

The Log Manager panel records emulator usage. The panel records such things as

when an app project is opened in the emulator and when emulator buttons are used.

You can open the Log Manager by clicking the icon above the bottom panel.

Button Functions

The Log Manager provides the following buttons.

Start Logging: Begin adding log items to the Log Manager file

Stop Logging: Discontinue adding log items to the Log Manager

file.

Delete Log: Delete log items from the Log Manager file.

Delete Log File: Delete the Log Manager file.

Log Information Settings

The logged material that is displayed in the Log Manager is saved as a log file.

You can view and modify the log file settings from the Preferences dialog box.

1. Click Tools > Preferences.

Page 43: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 43

2. In the Preferences dialog box, click Log.

File name: The name of the file where the log

information is saved.

Folder: The folder where the log file is saved. The

default folder is the folder where the Samsung Smart TV

SDK is installed. To change the folder, click Browse and

select a new location.

Count: The number of log items displayed in the Log

Manager panel.

Save as: Select one of the following save methods.

Use same file name: Save all log information

in the same file.

Use different file name every day: Create a

new log file everyday and save that day's log

information there.

Page 44: Samsung TV SDK Manual

44 | Samsung TV SDK Manual

Use different file name every hour: Create a

new log file every hour and save the hour's

log information there.

Encoding: Select the character set in which the log file

will be encoded. You can choose either UTF-8 (Unicode)

or Basic ANSI.

Use log file: Create the log file in the specified folder and

use it.

3. Select the log file settings that you want and click OK. Click Tools >

Preferences.

Page 45: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 45

Outline Panel

The Outline panel shows an outline of the document you are currently viewing in

the Editing window. The outline panel works for HTML, CSS and JavaScript

documents. The exact content of the outline differs depending on which type of

document you are viewing. If you click on a component of a scene in visual mode,

it will open the scene's JavaScript file in the Outline panel.

You can click on items in the Outline panel to view the sub-items which are

contained within. For example, you can click on an HTML <head> tag in the

Outline panel to view the <meta>, <title> and other tags contained within it.

Clicking on an item in the Outline panel will also select that item in the Editing

window.

Outlines for Different Document Types

Depending on the document type, the contents of the Outline panel will differ as

follows.

HTML Documents: Lists all HTML tags

CSS Documents: Lists all CSS selectors and declarations

JavaScript Documents: Lists all JavaScript functions

Page 46: Samsung TV SDK Manual

46 | Samsung TV SDK Manual

Properties Panel

The Properties panel shows the properties of components, scenes, HTML tags and

inline CSS style declarations. The panel allows you to edit the values of these

properties easily.

When you select a component or HTML tag in the Editing window, the Property

panel shows the properties (or attributes, in the case of HTML tags) of that

component or tag. If you click on the Editing window in Visual Mode without

selecting a component (i.e. click on a blank area in the window), the Properties

panel shows the properties of the current scene.

Component/HTML/CSS Sections

The Properties panel is divided into three sections: Component Properties,

HTML Attributes, and CSS Properties. You can access each section by

clicking the icons at the top of the panel.

In HTML and CSS sections, the left side of the Properties panel contains a list of

all the HTML tag's attributes or CSS properties. The right side contains a list of all

the values for each item. Click on a value to edit it. You can enter the values

Page 47: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 47

directly and the changes will be reflected in the HTML code. If there is a set of

standard values, you can select a value from a drop-down list.

In the Component section, the component's properties are displayed as in a dialog

box. The Component section also displays scene properties.

Page 48: Samsung TV SDK Manual

48 | Samsung TV SDK Manual

Project Panel and Toolbar

The Project panel and Project toolbar are located at the top-right corner of the

user interface. The Project toolbar contains buttons for opening and creating

projects and files. It also has buttons for viewing projects in the emulator. The

Project panel allows you to view all of the files and folders that your project

comprises. You can double-click on any file which the Samsung Smart TV SDK

can open to view the file in the Editing window. You can also view

the project settings, add new files and perform other tasks described below.

The (1) Project toolbar and (2) Project panel.

Page 49: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 49

Creating, Opening and Closing Projects

In the Project panel you can create a new project or open an existing project and

add it to the panel.

Creating a New Project

You can create new projects with the Project panel or toolbar. For more

information, see Creating New Projects.

To create a new project, do one of the following.

On the Project toolbar, click the Project button and click New

Project.

In the Project panel, right-click the Apps item at the top of the panel

and click New Project.

Opening a Project

If you open a project in the Project panel, the project and a list of all the files that it

includes appears. For more information, see Opening and Closing Projects.

To open an existing project in the Project panel, do one of the following.

On the Project toolbar, click the Project button and click Open

Project.

In the Project panel, right-click the Apps item at the top of the panel

and click Open Project.

You can open multiple projects in the Project panel.

Closing a Project

If you close a project in the Project panel, all of the files included in the project

will also be removed from the Project panel. However, files opened in the

Editing window are not removed and will remain open in the Editing window. For

more information, see Opening and Closing Projects.

Page 50: Samsung TV SDK Manual

50 | Samsung TV SDK Manual

To close a file in the Project panel,

Right-click the project and click Close Project in the context menu.

Setting the screen size

Samsung Smart TV (emulator 2.5 or higher) supports the 940*540 resolution or

higher. 2010 Samsung Smart TV (emulator version 2.5) supports 940*540

resolution and 2011 Samsung Smart TV (emulator version 2.5) supports

940*540 and 1280*720 resolution.

You can change the Samsung Smart TV screen size by using the toolbar menu

or setting the width and height directly in the config.xml file.

Resolution menu on the toolbar

Select the resolution option you want from the Resolution drop-down menu on

the toolbar.

Setting the screen size on config.xml

You can set the screen size on the config.xml file of the current project; In this

case you have to set the Screen Resolution on the widget.info file. For example,

Page 51: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 51

if you set the 'width' and 'height' as '1280' and '720' respectively, you have to

add the followings on the widget.info file;

Use Alpha Blending? = Yes

Screen Resolution = 1280x720

The config.xml file and the widget.info file are located in the project's

directory. For instance, the config.xml file and the widget.info file of the 'calc'

application project are located under the C:\Program Files\Samsung\Samsung

TV SDK\Apps\news directory.

Working with Files

The Project panel displays all of the files contained within a project. From the

Project panel, you can open, create, delete and rename files.

Opening a File

To open a file in the Editing window, do one of the following.

In the Project panel, double-click the file.

In the Project panel, right-click the file and click Open in Editing

Window.

On the Project toolbar, click the File button and click Open File.

Creating a File

To create a new file,

On the Project toolbar, click the File button and select the file

type you want to create.

Deleting a File

To delete a file,

Page 52: Samsung TV SDK Manual

52 | Samsung TV SDK Manual

Right-click the file in the Project panel and click Delete in the context

menu.

Renaming a File

To rename a file,

1. Right-click the file in the Project panel and click Rename in the

context menu.

2. Enter the new name and press the Enter key.

Opening a File in an External Program

You can open a file using the normal program that the file type is associated with

in Windows e.g. open an HTML file in Internet Explorer.

To open a file in an external program,

In the Project panel, right-click the file and click Open in External

Program.

Previewing a Project with the Emulator or Debugger

You can test how an app will behave on a TV by using the emulator or debugger

tools. For more information, see Viewing Apps with the Emulator and Using the

Debugger.

To preview the project on the emulator,

1. On the Project toolbar, set the drop-down list to Run Emulator.

2. Click the Play button.

3. When you want to stop the emulator, click the Stop button.

To preview the project on the emulator,

1. On the Project toolbar, set the drop-down list to Run Emulator.

Page 53: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 53

2. Click the Play button.

3. When you want to stop the emulator, click the Stop button.

Modifying the Project Settings

A project's settings determine certain aspects of how an app will appear and behave.

For more information, see Project Settings.

To view and modify a project's settings in the Project panel,

1. Click Project Settings.

2. The settings will appear in the Editing window. Edit them as you

want and click Save.

Modifying the Json Settings

A project's json settings also determine aspects of how an app will appear and

behave.

To view and modify a project's Json settings in the Project panel,

1. Click Json Settings.

2. The json settings will appear in the Editing window. Edit them as you

want and click Save.

Packaging the Project

Packaging a project means preparing and uploading the project to a web server,

from which it can be viewed on a TV. For more information, see Packaging Apps.

To package a project from the Project panel,

1. Click Package.

2. Follow the steps outlined in Packaging Apps.

Page 54: Samsung TV SDK Manual

54 | Samsung TV SDK Manual

Results Panel

The Results panel shows you the results of using the Edit > Find in Files

command. The Find in Files command searches multiple files for a string of text.

If the text is found in a file, the results are displayed in the Results panel. You can

double-click on one of the items in the panel to view the file which contains the

searched-for text.

You can open the Results panel by clicking the icon above the bottom panel.

Searching for a string of text in a file

To find a string of text using the Find in Files dialog box,

1. Click Edit > Find in Files.

2. In the Find in Files dialog box, enter the string to be found and the

location to be searched.

3. Click Find All.

The results will appear in the Results panel. The Results panel displays the

filename and folder as well as the full line of text where the searched-for text was

found.

Page 55: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 55

Find in Files Dialog Box

Find

Enter the text you want to find.

Find in folder

Specify the folder which contains the documents you want to search. Click

Browse to select the folder.

Include subfolders

Search the subfolders contained within the selected folder.

Page 56: Samsung TV SDK Manual

56 | Samsung TV SDK Manual

Match case

Finds a match only if the case of the words' letters matches.

Match whole words only

Finds a match only for whole, separate words and not parts of words.

Search hidden text

Searches the hidden text in a document.

Use the following condition

Select the condition to use. To search using regular expressions, select "Use

regular expression". To use wildcards such as * and %, select "Use

wildcards".

File format to search

Select the file formats to search from the list.

Find All

Begin the search. When the search completes, the results will appear in the

Results panel.

Stop

Stop the search.

To find specific text in the content of the Editing window, click the

button in the Find/Replace dialog box.

To replace specific text in the content of the Editing window, click the

button in the Find/Replace dialog box.

Page 57: Samsung TV SDK Manual

Chapter 4 Creating Apps

Page 58: Samsung TV SDK Manual

58 | Samsung TV SDK Manual

Creating New Projects

When you create a new project, Samsung Smart TV SDK automatically creates all

of the files needed for a basic project. The project will appear in the Project panel.

1. Do one of the following.

On the Project toolbar, click the Project button

and click New Project.

In the Project panel, right-click the Apps item and

click New Project in the context menu.

Click File > New > New Project.

2. In the dialog box that appears, select the type of project that you want

to create (Basic Project, JavaScript Project or Flash Project) and

click Next.

3. Enter the name of the project and click Next. If you are creating a

Flash project, enter a project ID and click the Find button to select

an SWF file to include in your project.

4. The Project Settings will be displayed. Adjust them if you like and

click Finish.

The projects that you create are located in the 'app' folder in the drive where

Samsung Smart TV SDK is installed. For example, if Samsung Smart TV SDK is

Page 59: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 59

installed on the C drive and you create a project named 'calculator', then it would

be saved under C:\Program Files\Samsung\Samsung TV

SDK(X.X.X)\Apps\calculator. (The X.X.X represents the program's version

number.)

Page 60: Samsung TV SDK Manual

60 | Samsung TV SDK Manual

Opening and Closing Projects

Opening a Project

If you open a project, a list of all the files included in the project appears in the

Project panel. If you double-click one of the files in the Project panel, it will open

in the Editing window where you can edit it.

1. To open an existing project, do one of the following:

On the Project toolbar, click the Project button

and click Open Project.

In the Project panel, right-click the Apps item and

click Open Project in the context menu.

Click File > Open Project.

2. A list of existing projects will appear in the Open Project dialog box.

Select a project and click OK. The project and a list of all included

files will appear in the Project panel.

Page 61: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 61

Closing a Project

If you close a project in the Project panel, all of the files included in the project

will also be removed from the Project panel. However, files opened in the Editing

window are not removed and will remain open in the Editing window.

To close a project in the Project panel,

Right-click the project in the Project panel and click Close Project in

the context menu.

Page 62: Samsung TV SDK Manual

62 | Samsung TV SDK Manual

Creating and Saving Files

In the Samsung Smart TV SDK, you can create HTML, CSS, JavaScript, XML and

text files either as single files or as part of an app project file.

Creating a New Document File

To create a new document file,

1. Click File > New.

2. When the list of file formats that the Samsung Smart TV SDK can

create appears, select the file format you desire.

3. A blank document file opens in the Editing window.

When you create a new file by clicking File > New, the new file does not belong

to an app project by default.

Creating a New File as Part of a Project File

When you use the New menu command to create a new file, the new single file is

created apart from any project file. To create a new file belonging to a project file,

1. In the Project Explorer panel, right-click the project in which you

want to create the new file, point to New, and then select the file

format in the context menu.

Page 63: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 63

2. If you select 'HTML file' in the context menu, the new document,

'newfile1' opens in the Editing window, and you can see that the new

file is listed under the app project file in the Project panel.

Saving a File as Part of a App Project

If you create a new single file with the File > New menu command, you can add

the new file to an app project later.

1. Open the file in the Editing window and click File > Save As.

2. In the Save As dialog box, enter the location where the app project

file is saved. For example, if you want to save the file 'sample.css' as

Page 64: Samsung TV SDK Manual

64 | Samsung TV SDK Manual

part of the 'news' app, enter C:\Program Files\Samsung\Samsung TV

SDK(X.X.X)\Apps\new\sample in the File name box and 'CSS File'

in the Save as type box. The X.X.X represents the program's version

number.

3. In the Project panel, you can see that the file is listed as part of the

app project file.

The project file is saved in the directory where the Samsung Smart TV SDK is

installed. For instance, if you installed the Samsung Smart TV SDK in the C: drive,

the project file is saved in C:\Program Files\Samsung\Samsung TV

SDK(X.X.X)\Apps. The X.X.X represents the program's version number.

Page 65: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 65

Opening and Closing Files

You can open HTML, CSS, JavaScript, XML, and text files on your local file

system. You can also easily open files that belong to projects.

Opening a File on the Local File System

You can use the Samsung Smart TV SDK to open files on your local file system,

edit them, and add them to app project files.

1. Click File > Open File.

2. In the Open dialog box, select the file you want to open and click

Open.

Opening a File of a Project

When the project file is in the Project panel

Double-click the file you want to open in the Project panel.

When the project file is not in the Project panel

1. Click File > Open File.

2. In the Open dialog box, select the file in the folder where the app

project file is located. For example, if you want a file from the 'news'

app, the file will be in the C:\Program Files\Samsung\Samsung TV

SDK(X.X.X)\Apps\news directory.

The X.X.X represents the program's version number.

3. Click Open.

Closing Files

To close a file that is open in the Editing window, click File > Close.

Page 66: Samsung TV SDK Manual

66 | Samsung TV SDK Manual

Project Settings

Every project has a collection of general settings which control how the app

appears and behaves on a TV. They include name, description, height, width, etc.

The settings are set in the config.xml file in the project's directory. You can edit the

config.xml file directly from within the Samsung Smart TV SDK's Editing window.

Settings can be changed, moved, added or deleted.

Viewing Project Settings

In the Project panel, click Project Settings.

Adding a Setting

1. In the Editing window, click Add.

2. In the dialog box, enter the Name of the setting.

3. Select a Type from the drop-down list and click OK.

You can choose from three data types: string (string of text), int (integer) or bool

(Boolean).

Removing a Setting

In the Editing window, select a setting and click Delete.

Changing the Location of a Setting

Select a setting that you want to move, then click the Move Up button

to move it up on the settings list or click the Move Down button to

move it down.

Page 67: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 67

List of Default Project Settings

Setting Description

previewjs The preview.js start file

preIcon The path of the preview icon image

cpname Content provider name

cplogo Content provider logo

cpauthjs Content provider authentication JavaScript for login

ver Version information

mgrver Version information of content home

fullwidget Show as fullscreen content? (y or n)

srcctl Content source must be converted to media source? (y or n)

ticker Show content in ticker form? (y or n)

childlock Content requires child lock feature? (y or n)

audiomute Use audio mute when running content? (y or n)

videomute Use video mute when running content? (y or n)

dcont Use dynamic contrast? (y or n)

type Content type

Page 68: Samsung TV SDK Manual

68 | Samsung TV SDK Manual

appname Content name

description Content description

width Content width

height Content height

ThumbIcon 106x87 thumbnail icon

BigThumbIcon 115x95 thumbnail icon

ListIcon 86x70 list icon

BigListIcon 95x78 list icon

author (category)

Content author's contact information.

Includes the following information:

name: Name of author

email: Email address of author

link: Link to author's homepage

organization: Name of author's organization

Page 69: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 69

Project Scenes

Samsung Smart TV SDK projects are divided into scenes. A scene is like a scene

in a film or a flash movie. It allows you to display an arrangement of components,

and then switch to a different scene using software code written into your app. In

this way, your app can switch between different sets of components and different

appearances for better and more varied functionality. Scenes also have properties

of their own such as size, background color, etc. which can be adjusted.

Scenes in the Components Panel

The Components panel shows you the scenes in your app and the components they

contain. You can click on scenes to open them, as well as add or delete scenes. For

more information, see Components Panel.

Viewing Scenes in Visual Mode

You can view scene thumbnails while in Visual Mode. To do so, open Visual

Mode and click the Show Scene List button in the top-left corner of the Editing

window. Click the button again to close the thumbnails.

Page 70: Samsung TV SDK Manual

70 | Samsung TV SDK Manual

To open Visual Mode, click View > Visual Mode or click the Visual Mode

button near the top-right corner of the interface.

Viewing a Scene in the Emulator

You can view a single scene in the emulator. The emulator is a virtual TV which

shows how apps will behave on a real Samsung TV.

To view a single scene on the emulator, do one of the following:

Right-click the scene in the Components panel. Click Preview Scene in

the context menu.

Right-click in a scene thumbnail in Visual Mode and click Preview Scene

in the context menu.

Page 71: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 71

The emulator will run, allowing you to preview how the selected scene will behave

on a real TV.

Master Scenes

A master scene is a project that acts as a single scene within another project.

Master scenes allow you to insert projects into other projects.

Importing and Exporting Master Scenes

To create a master scene, you must convert an existing project into a master scene

by exporting it. The exporting process creates a version of the project which can be

inserted as a master scene. Importing a master scene does the reverse of exporting:

it converts an existing master scene into a project under a new name.

To export a project as a master scene,

1. Open the project that you want to convert into a master scene, or right-

click an open project and click Set as Active in the context menu.

2. Click File > Master Scene > Export Master Scene.

3. In the dialog box, enter a name for the master scene and click OK.

To import a master scene as a project,

1. Click File > Master Scene > Import Master Scene.

Page 72: Samsung TV SDK Manual

72 | Samsung TV SDK Manual

2. In the dialog box, select a master scene to import.

3. In the Project name field, enter a new name (a name different from any

existing project) and click OK. A new project will be created with this

name.

Only Basic projects can be exported as master scenes, not Flash or JavaScript

projects.

When a project is exported, a version of the project is saved in the C:\Program

Files\Samsung TV SDK (X.X.X)\MasterApps\Custom folder. (X.X.X represents the

version number of the program.)

Inserting Master Scenes

Once you have exported a project as a master scene, you can insert the master

scene into another project.

Page 73: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 73

To insert a master scene,

1. Open the project into which you want to insert the master scene.

2. Do one of the following:

Right-click a scene in the Components panel and click Insert Master

Scene in the context menu.

Right-click a scene thumbnail in Visual Mode and click Insert Master

Scene in the context menu.

3. A dialog box will appear with a list of existing projects. Select a project

and click Next.

Page 74: Samsung TV SDK Manual

74 | Samsung TV SDK Manual

4. Use the arrow buttons to select the location for the master scene and click

Finish.

You cannot insert a master scene before Scene 1.

Page 75: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 75

Setting Scene Properties

Like components, scenes also have properties. To view the properties of a scene,

click the background of the scene in the editing window (anywhere there are no

components) and the properties will appear in the Properties panel where they can

be edited.

Scenes have the following properties:

ID: The name of the scene which is used to identify it in the app code.

Left: The left margin of the scene area.

Top: The top margin of the scene area.

Width: The width of the scene in pixel units.

Height: The height of the scene in pixel units.

BG Image: The file path to an image file to be used as the background

of the scene.

Page 76: Samsung TV SDK Manual

76 | Samsung TV SDK Manual

BG Color: An RGB color value for the scene's background color. The

RGB values are separated by semi-colons. Click the down arrow on

the Property panel to open the color picker and select a color.

Page 77: Samsung TV SDK Manual

Chapter 5 Previewing and Packaging

Page 78: Samsung TV SDK Manual

78 | Samsung TV SDK Manual

Viewing Apps with the Emulator

The Samsung Smart TV SDK emulator is a virtual television which shows how

your apps will behave on a real television. When the emulator is opened, a virtual

TV screen appears on the left, and a virtual TV remote control appears on the right.

You can click the buttons of the remote control to interact with your app.

Opening the active project in the emulator

To open the active project in the emulator, do one of the following:

Click Emulator > Run Active Project.

Click the Play button on the Project toolbar.

Page 79: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 79

Opening the emulator without a project

To open the emulator without a project, click the Samsung TV

SDK Emulator(X.X.X) icon on your desktop. X.X.X represents the

version of the emulator.

Opening an app in the emulator

1. In the emulator, click the Open App button.

2. In the Select an App dialog box, select an app project and click OK.

Refreshing an app

To reload an app in its original state, click the Refresh button

in the emulator.

Opening the Smart Hub

The Smart Hub page offers access to the internet and a variety of content.

Page 80: Samsung TV SDK Manual

80 | Samsung TV SDK Manual

To open the Smart Hub page, click the Home button in the

emulator.

Closing the Emulator

On the right is a remote control which acts just like an actual TV

remote control. Click on a button with your mouse to use it. To close

the emulator, click the power button.

Page 81: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 81

Packaging Apps

To use app files which were made with the Samsung Smart TV SDK on your TV,

you must first package the app project files and upload them to a server. The TV

will then import the app from the server and display it to the user.

To package an app, follow the three steps outlined below.

Creating Language Resources

You can create language resources so that your app can be viewed in several

different languages. To do so, you must create packageable language resources

from a Microsoft Excel file which contains your language resource information.

For information on creating this Excel file, see the online documentation.

To create packageable language resources from the excel file.

1. Place the excel file in the folder titled 'lang' in the app project

2. In the Project panel, select the excel file with which you will create a

language resource and right-click it.

3. In the context menu, select Generate Language Resource.

4. For each language entered into the Excel file, a language resource file

is automatically created and saved in the 'lang' folder.

The language resource files are created as *.js files.

Packaging the App

Packaging an app means combining all of the files in the app project into a single

file.

1. In the Project panel, click Packaging.

2. In the Editing window, enter the package name by filling out the four

fields. From left to right, the four fields are: App Title, Version

Number, Region and Date. For a basic project, you will simply enter

a version number.

Page 82: Samsung TV SDK Manual

82 | Samsung TV SDK Manual

3. If you have created language resources, add the language resources

that you want to package from the Packageable Language File List

to Selected Language File List by using the arrow buttons.

4. Click Package.

5. When the app packaging is complete, a dialog box will appear. Click

OK.

The packaged app file is saved in the same location where the Samsung Smart TV SDK

was installed. For example, if the Samsung Smart TV SDK was installed on the C drive, the

package file would be saved in C:\Program Files\Samsung\Samsung TV

SDK(X.X.X)\Package

The X.X.X represents the program's version number.

Setting Up the Server

You can upload the app directly to the server and view it on the television.

To upload apps to the server, first set up the server.

Page 83: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 Heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 83

1. Click Tools > Preferences.

2. In the Preferences dialog box, click Server.

3. Do one of the following.

Use the Apache installation folder: Select this to send

the packaged app to the folder where Apache is installed.

This option will only be available if Apache has been

installed.

Use the virtual directory root folder: Select this to

select the location where the app will be imported onto

the TV. Enter the path in the Root folder input box

directly or click Browse and select the folder.

4. Click OK.

Uploading to the Server

When packaging an app, you can choose whether to directly upload the packaged

app onto the server.

Page 84: Samsung TV SDK Manual

84 | Samsung TV SDK Manual

After setting the server information, the Update the packaged files on the server

checkbox in the Editing window will be activated.

1. In the Editing window, check Update the packaged files on the server.

The Title and Description boxes will become activated.

2. Enter the name of the app in the Title box and enter a short description of

the app in the Description box.

3. Click Package. This completes the app packaging and uploading process.

Page 85: Samsung TV SDK Manual

Chapter 6 Debugging Apps

Page 86: Samsung TV SDK Manual

86 | Samsung TV SDK Manual

Using the Debugger

The Samsung Smart TV SDK provides a debugger for analyzing and correcting

errors in the scripts of your apps.

Starting and Stopping the Debugger

To start the debugger, do one of the following.

Click Debug > Start Debugging.

On the Project toolbar, click the drop-down list and click Run

Debugger, then click the Play button.

To stop the debugger, do one of the following.

Click Debug > Stop Debugging.

On the Project toolbar, click the Stop button.

The Debugging Process

When you start the debugger, your app will run in the emulator. The normal

Samsung Smart TV SDK interface will change into the Debugging Interface,

which has different panels from the normal interface. Once running, the app will

run until it hits the first breakpoint in one of its scripts. You can use the Debugging

Interface panels to view the current state of your app at the breakpoint and identify

errors. Then you can control the further flow of your app's execution using the

Execution Control Commands.

Page 87: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 87

The Debugging Interface

The debugging interface appears when you start the debugger. Normal Samsung

Smart TV SDK panels are replaced with debugging panels as shown below.

1. Loaded Scripts

The Loaded Scripts panel lists all the scripts embedded in the current page.

Page 88: Samsung TV SDK Manual

88 | Samsung TV SDK Manual

2. Opened Windows

The Opened Windows panel shows a list of pages loaded in the SDK. Pages

include web pages loaded in the browser or the HTML source code from a website.

Each entry in the Open Windows panel is the URL of the loaded page.

3. Breakpoints

The Breakpoints panel lists the breakpoints inserted in a project's scripts. It

displays the script name and line number for each breakpoint.

Page 89: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 89

4. Call Stack

The Call Stack panel allows you to view the procedure calls that are currently on

the stack of the emulator. The stack is a list of currently active functions. The Call

Stack panel shows entries in the form of Function Name, Script Name, Script Line

Number.

5. Local Variables

The Local Variables panel provides information about all local variables present in

a function, plus various properties about these variables.

The Local Variables list shows the 'Name', 'Value', and 'Type' properties of the

variables.

6. Program Execution Control Buttons

These buttons control how the program executes after it hits a breakpoint. For more

information, see Using Breakpoints.

Page 90: Samsung TV SDK Manual

90 | Samsung TV SDK Manual

Using Breakpoints

Breakpoints stop the execution of a program at a certain line of code so that you

can analyze the program's behavior, call stack, variables etc.

To insert a breakpoint, click on a line in the editing window and click

Debug > Add/Remove Breakpoint. A mark will appear next to the

line indicating the breakpoint.

To remove a breakpoint, click on the line in the editing window and

click Debug > Add/Remove Breakpoint.

To remove all breakpoints in a script, click Debug > Remove All

Breakpoints.

The Breakpoints panel in the Debugging Interface provides a list of

your breakpoints. To open the source code of a script at the location of

a breakpoint, right-click it in the Breakpoints panel and click Go to

Page 91: Samsung TV SDK Manual

오류! 여기에 표시할 텍스트에 heading 2을(를) 적용하려면 [홈] 탭을 사용하십시오. | 91

Source Code.

Controlling Program Execution

When you hit a breakpoint, the Debug menu will give you access to the following

four commands for controlling program execution. You can also use the buttons by

the Project toolbar.

Continue: Continue program execution normally to the next

breakpoint.

Step Over: Step through the code one line at a time. Step Over

will entirely run through any procedures that are called by the current

procedure, then go to the next line of the current procedure.

Step Into: Step through the code one line at a time. Step Into

will enter any procedures that are called by the current procedure and

begin stepping through them one line at a time.

Step Out: If you are using Step Into and have entered a called

procedure, use Step Out to run through the rest of the procedure and

re-enter the procedure which called it.