top

SDK IDE

‘IDE’ of Samsung TV SDK provides a developer friendly environment with multiple utilities to improve development quality and time. We will discuss more about IDE features and description in this page.

Overview

Samsung TV SDK IDE is a powerful tool for creating and modifying source code. It supports all basic coding features, such as syntax highlighting, content assist, and privilege checking.

Web Editor provides support for JavaScript, HTML, and CSS file editing.

Supported Features

Writing and Editing Codes

Checking the Syntax

Samsung TV SDK IDE provides a code checking tool to help you to identify and correct problems with the structural quality of your code.

There are 2 ways, manual and automatic, to inspect your code:

  • Manual check
  1. In the Project Explorer view, select a JavaScript file.
  2. Right-click the file and select Check JavaScript Rules.
Note

You can check JavaScript immediately, even without saving the file.

Checking JavaScript rules manually

Checking JavaScript rules manually

  • Automatic check
    When writing code, if there are syntax errors, the automatic check displays the CSSLint or JSLint validator results on the left edge of the editor.
    If you save a file, the project is built and syntax is checked automatically.

Checking JavaScript automatically

Checking JavaScript automatically

JavaScript scan results in the Problems view

JavaScript scan results in the Problems view

  • Using content assist.
    You can get suggestions for HTML, CSS, and JavaScript tag and attribute properties. Also, if you mistype, content assist displays an error. Press Ctrl + Space to open content assist.

Content assist in a CSS file

Content assist in a CSS file

Syntax Check Settings

If you want to adjust the error level settings for the CSS or JavaScript Validator, go to “Window” > “Preferences” > “Tizen Studio” > “Web” > “Editor” > “CSS Editor” or “JavaScript Editor”.

By default, the CSS or JavaScript syntax check is operated when a document is saved or the project built. However, you can set the detailed attributes in the preferences. To change the inspection point, adjust it in “CSS Editor” or “JavaScript Editor” > “Build” or “Reconcile”:

If you select “Build” the editor performs a check when building the project.
If you select “Reconcile” the editor performs a check when saving the file.
For more information, see CSSLint and JavaScriptLint .

Using JavaScript Log Console View

The JavaScript Log Console view is a tool that helps to debug the log analysis using the JavaScript Console API when developing Web applications. The JavaScript Log Console view is active only in the Debug launch mode.

Using the console functions provided to JavaScript code, the view shows the log information in the target.

Table: Supported JavaScript log methods

Method Example
console.log console.log("console.log");
console.info console.info("console.info");
console.warn console.warn("console.warn");
console.error console.error("console.error");
console.debug console.debug("console.debug");

JavaScript log method colors

JavaScript log method colors

Content Assist

Content assist is a function provided in parts of the Samsung TV SDK Web Editor to help you write code faster and more efficiently.

Content assist allows you to quickly type names in the context of the code. It can be further improved to assist the you. For example, you can just type in the first letter as lowercase (uppercase letters from a type or variable name), and press Ctrl + Space to be offered all the choices that match the entered letters that are valid for the current context (class name, interface name, variable, or field names).

The Samsung TV SDK IDE supports Web API, W3C API, jQuery API, and jQuery Mobile API. User-defined and third party APIs can be supported by expanding the content assist functionality.

For more details, see Content Assist

Code Productivity

The Code Beautifier is a tool that can help you understand code and make it easier to read.

The Code Minifier is a smart compression tool. Minification is the process of compressing code from the original size to the smallest size without affecting its operation.

For more details, see Improving Your Code Productivity

Privilege Checker

The Samsung TV SDK Web Editor provides a checker to identify potential privilege violation problems in the application code. This check is performed automatically, and you can easily verify the source code in your project.

For more details, see Privilege Checker.

Samsung TV SDK IDE Web Preferences

Samsung TV SDK IDE Web preferences are pieces of information that you store persistently and use to configure the workspace. They refer to a set of options, such as resources, file colors, version control options, and code styles.

For more details, see Using the Samsung TV SDK Web Editor Web Preferences.

Configuration Editor

The Samsung TV Web application configuration file is composed of XML elements, including the element as its root and other elements. These elements represent the application information, such as configuration elements and Tizen extending configuration elements for TV applications.

This configuration information is used when you install or run the Tizen Web application on the Tizen platform. The Tizen Web application project must have the config.xml file in the project root directory.

The configuration file can be easily edited with the Web application configuration editor (form editor), or you can modify the XML structure directly using the configuration source editor. With the form editor, you can set the project configuration (manifest), even if you have no experience of developing a Tizen Web application project. If you are fluent with the configuration file XML structure, you can create the configuration file directly through the configuration source editor.

For more details, see Using the Configuration Editor.

Running Application

Connecting the Real Device

If you have tested your application on the SDK Emulator, it should be ready for uploading and testing on the TV set.

It is possible to complete most of the testing of an application on the emulator. But still, it is highly recommended to test your application on the TV also, after it has been tested on the emulator. Both the emulator and the TV environments are very similar but there are differences between the two at hardware level.

Following are the steps to install and run apps in TV:

  • Connect your PC and TV to the same network. (same network means same router)
  • Set “Developer Mode” in the TV.
  • Download SDK and and connect to TV with SDK.
  • Latest firmware (version number should be more than 1400.0)
  • You should register device profile and author signature before running application on TV.
    [How to register certificate]

For more details, see Using the Remote Device (Samsung TV)

Emulator

The Tizen Studio TV Emulator is designed to help developers execute web-based Tizen applications on their PC. The benefit of the tool is to let developers test their apps on PC without going through the time consuming process of deploying their app on a real TV device.

The Emulator is a virtual machine that closely resembles the real TV SW stack.

For more details, see Using the TV Emulator.

Interface Description

Basic view of Samsung TV SDK IDE

As per image reference shown above, IDE provides following “Views” :

  • “Menu Bar”: Provide functionalities to create/modify project or application.
  • “Tool Bar”: Provide ‘Quick Access’ to all the functionalities provided by “Menu Bar”.
  • “Change Perspective”: To open and change perspective of running IDE.
  • “Project Explorer”: Display hierarchical view of Projects and Resources.
  • “Editor”: To edit HTML, CSS, JS, XML files.
  • “Outline”: Gives structural summary of selected files in editor.
  • “Connection Explorer”: Display Tree view of target devices with file system of target device access.
  • “Problems”: Display errors and warnings for open project in project explorer.
  • “Console”: Shows IDE log view.

Default view can be modified by showing or hiding the windows on IDE.

To add more view, goto “Window” > “Show View” > “Others”. A pop up will open. Select the view as per requirement in IDE and click “OK”. Adjust the position of view by drag and drop, any where in the “IDE window”.

To close any view from IDE screen, click on “close” icon.

References

TV Simulator
TV Emulator