samsung tv sdk manual
TRANSCRIPT
Contents | 1
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
Chapter 1 Getting Started
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
오류! 여기에 표시할 텍스트에 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.
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.
Chapter 2 The Work Environment
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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>
오류! 여기에 표시할 텍스트에 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.
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>
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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
오류! 여기에 표시할 텍스트에 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
26 | Samsung TV SDK Manual
The CSS Toolbar
The toolbar offers the following button:
Turn the selected text into a comment.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
Chapter 3 Panels
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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
오류! 여기에 표시할 텍스트에 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.
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
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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
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
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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,
오류! 여기에 표시할 텍스트에 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,
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
Chapter 4 Creating Apps
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
오류! 여기에 표시할 텍스트에 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.)
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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
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
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
Chapter 5 Previewing and Packaging
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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.
Chapter 6 Debugging Apps
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.
오류! 여기에 표시할 텍스트에 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.
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.
오류! 여기에 표시할 텍스트에 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.
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
오류! 여기에 표시할 텍스트에 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.