Samsung TV SDK Manual

Contents | 1
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
2 | Samsung TV SDK Manual
Chapter 1
Getting Started
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
4 | Samsung Smart TV SDK Manual
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.
! Heading 2() [] . | 5
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.
6 | Samsung Smart TV SDK Manual
Chapter 2
The Work Environment
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.
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.
! Heading 2() [] . | 9
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.
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 to display the Outline panel as shown below. icon at the top of the panel space to display the Components panel or click the Outline
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.
! Heading 2() [] . | 11
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.
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 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. or . Click and drag the panel border to adjust the panel's size. If you reach the
Click Click panels.
to fill the vertical area with the top panel. to split the vertical area between to the top and bottom
Click
to fill the vertical area with the top panel.
! Heading 2() [] . | 13
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.
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.
! Heading 2() [] . | 15
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>
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.
! Heading 2() [] . | 17
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>
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.
! Heading 2() [] . | 19
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.
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.
! Heading 2() [] . | 21
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.
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.
! Heading 2() [] . | 23
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
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
! Heading 2() [] . | 25
The CSS Toolbar
The toolbar offers the following button:
Turn the selected text into a comment.
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 user interface. button at the top-right corner of the
To enter Visual Mode, do one of the following.

Click View > Visual Mode. Click the Visual Mode interface. button at the top-right corner of the user
! Heading 2() [] . | 27
To enter Split View Mode, do one of the following.

Click View > Split View Mode. Click the Split View Mode user interface. button at the top-right corner of the
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.
! Heading 2() [] . | 29
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.
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.
! Heading 2() [] . | 31
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 zorder level.
Chapter 3
Panels
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.
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.
! Heading 2() [] . | 35
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 clicking the Warning button, or view only warnings by button. button. To view both types again, click the All
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.
! Heading 2() [] . | 37
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
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.
! Heading 2() [] . | 39
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
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.
! Heading 2() [] . | 41
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.
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.
! Heading 2() [] . | 43
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.
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
! Heading 2() [] . | 45
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: HTML Attributes, and clicking the icons at the top of the panel.
Component Properties,
CSS Properties. You can access each section by
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
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.
! Heading 2() [] . | 47
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.
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 Project.
button and click New
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 Project.
button and click Open
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.
! Heading 2() [] . | 49
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,
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 type you want to create.
button and select the file
Deleting a File
To delete a file,
! Heading 2() [] . | 51
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. button.
3. When you want to stop the emulator, click the Stop 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. button.
3. When you want to stop the emulator, click the Stop

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.
! Heading 2() [] . | 53
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.
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.
! Heading 2() [] . | 55
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
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 and click New Project.
button
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
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.)
! Heading 2() [] . | 59
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 and click Open Project.
button
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.
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.
! Heading 2() [] . | 61
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.
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
! Heading 2() [] . | 63
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.
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.
! Heading 2() [] . | 65
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.
List of Default Project Settings
Setting previewjs preIcon cpname cplogo cpauthjs ver mgrver fullwidget srcctl ticker childlock audiomute videomute dcont type
Description The preview.js start file The path of the preview icon image Content provider name Content provider logo Content provider authentication JavaScript for login Version information Version information of content home Show as fullscreen content? (y or n) Content source must be converted to media source? (y or n) Show content in ticker form? (y or n) Content requires child lock feature? (y or n) Use audio mute when running content? (y or n) Use video mute when running content? (y or n) Use dynamic contrast? (y or n) Content type
! Heading 2() [] . | 67
appname description width height ThumbIcon
Content name Content description Content width Content height 106x87 thumbnail icon
BigThumbIcon 115x95 thumbnail icon ListIcon BigListIcon 86x70 list icon 95x78 list icon 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
author (category)
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.
! Heading 2() [] . | 69
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.
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 rightclick 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.
! Heading 2() [] . | 71
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.
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.
! Heading 2() [] . | 73
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.
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.
! Heading 2() [] . | 75
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
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.
Opening the emulator without a project
To open the emulator without a project, click the version of the emulator.
Samsung TV
SDK Emulator(X.X.X) icon on your desktop. X.X.X represents the
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 in the emulator.
button
Opening the Smart Hub
The Smart Hub page offers access to the internet and a variety of content.
! Heading 2() [] . | 79
To open the Smart Hub page, click the Home emulator.
button in the
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.
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.
! Heading 2() [] . | 81
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.
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.
! Heading 2() [] . | 83
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
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.
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.
! heading 2() [] . | 87
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.
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.
! heading 2() [] . | 89
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
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.
! heading 2() [] . | 91

Samsung TV SDK Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Samsung TV SDK Manual

Uploaded by

Copyright:

Available Formats

Contents | 1

2 | Samsung TV SDK Manual

Introducing Samsung Smart TV SDK

4 | Samsung Smart TV SDK Manual

Starting Samsung Smart TV SDK

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

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

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

6 | Samsung Smart TV SDK Manual

The Work Environment

The Editing Environment

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

8 | Samsung TV SDK Manual

Breakpoints: Displays the debugger breakpoints contained in a script.

Viewing the Editing Window File List

10 | Samsung TV SDK Manual

Adjusting the Editing Area

12 | Samsung TV SDK Manual

Adjusting Panel Size

Click Click panels.

to fill the vertical area with the top panel.

Code Editing Settings

14 | Samsung TV SDK Manual

Highlight current line

Show line numbers

Show the source code line number in the left margin.

Mark blank space

Show end of line

Show the end of each line of code.

<When soft-wrap is turned on>

<When soft-wrap is turned off>

16 | Samsung TV SDK Manual

View expand/collapse buttons

Use tabs to indent

Set the amount of space between lines.

<When source coloring is on>

<When source coloring is off>

18 | Samsung TV SDK Manual

Enable code helpers

Font / Color Settings

Select the type of text to modify from the list.

Choose the characters' size.

Set the color of the text in the Editing window.

20 | Samsung TV SDK Manual

Set the text's background color.

Preview how the text will appear in the Editing window.

Grid Lines and Rulers

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

22 | Samsung TV SDK Manual

To make components snap to the grid lines, click the

icon at the top-left corner

The HTML Toolbar

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

24 | Samsung TV SDK Manual

The JavaScript Toolbar

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

The CSS Toolbar

The toolbar offers the following button:

Turn the selected text into a comment.

26 | Samsung TV SDK Manual

Code Edit Mode, Visual Mode & Split View Mode

Switching Between Modes

To enter Visual Mode, do one of the following.