The Samsung TV SDK IDE provides a developer-friendly environment and tools to improve development quality and minimize development time. This topic describes the main features of the Samsung TV SDK IDE.

The Samsung TV SDK IDE Web Editor 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.

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

SDK IDE Interface

The following figure illustrates the parts of the Samsung TV SDK IDE interface.

Figure 1. Samsung TV SDK IDE interface

Figure 1. Samsung TV SDK IDE interface

The Samsung TV SDK IDE interface is composed of a set of views:

  • "Menu Bar" provides functionalities to create or modify your project or application.
  • "Tool Bar" provides quick access to frequently-used functionalities in the menu bar.
  • "Change Perspective" buttons allow you to open and change the editing perspective of the IDE. For TV application development, use the "Web" perspective.
  • "Project Explorer" view displays a hierarchical view of the opened projects and their resources.
  • "Editor" view is where you edit HTML, CSS, JS, and XML code.
  • "Outline" view gives a structural summary of the selected file in the editor.
  • "Connection Explorer" view displays a tree view of the connected emulators and target devices, and allows you to access their file systems.
  • "Problems" view displays errors and warnings for the selected project.
  • "Console" view displays the IDE logs.

You can customize the IDE by modifying which views are shown.

To add more views to the IDE:

  1. In the Samsung TV SDK IDE menu, select "Window > Show View > Other".

    Figure 2. Show View dialog

    Figure 2. Show View dialog

    The "Show View" dialog opens.

  2. Select the view you want and click "OK".

  3. Adjust the position of the view by dragging and dropping it into any of the panes in the IDE. To remove a view, click "x" on its title tab, or right-click the title tab and select "Close".

Writing and Editing Code

The Samsung TV SDK IDE provides tools for writing and editing code.

Checking the Syntax

Syntax checking tools help you identify and correct problems with the structural quality of your code.

There are 2 ways 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".

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

      Figure 3. Checking JavaScript rules manually

      Figure 3. Checking JavaScript rules manually

    3. View the results in the "Problems" view.
      Figure 4. JavaScript scan results in the Problems view

      Figure 4. JavaScript scan results in the Problems view

  • 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.

      Figure 5. Checking JavaScript automatically

      Figure 5. Checking JavaScript automatically

    • When you save a file, the project is built and the syntax is checked automatically.

Modifying 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 run when a document is saved or the project is built. However, you can configure the details in the preferences. To change the inspection point, adjust it in the "CSS Editor" or "JavaScript Editor" tab:

  • 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 Content Assist

Content assist is a functionality 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 HTML, CSS, and JavaScript code. For example, you can simply type the first letters, and press "Ctrl + Space" to get suggestions for element and attribute properties that match the entered letters and are valid for the current context (class name, interface name, variable, or field names). If you mistype a name, content assist displays an error.

The Samsung TV SDK IDE supports Web API, W3C API, jQuery API, and jQuery Mobile API. The content assist functionality can be expanded with support for user-defined and third party APIs.

Figure 6. Content assist for CSS

Figure 6. Content assist for CSS

For more information, see Content Assist.

Setting IDE Preferences

The Samsung TV SDK IDE Web Preferences tool allows you to set the Web preferences, which are a set of options, such as resources, file colors, version control options, and code styles. The preferences allow you to configure the workspace to optimize your working environment.

For more information, see Setting Tizen Studio Web Preferences.

Configuring the Application

The Tizen Web application configuration file is composed of XML elements, including the <widget> element as its root. These elements represent the application information, such as configuration elements and Tizen-specific configuration elements for TV applications.

The configuration information is used when you install or run the Tizen Web application. 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 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 in 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 information, see Configuring Applications.

Debugging Code

The Samsung TV SDK IDE provides tools to help you debug and test your applications.

JavaScript Log Console

The "JavaScript Log Console" view is a tool that helps you to debug the application through log analysis. You can use the tool with the JavaScript Console API when developing Web applications. The "JavaScript Log Console" view is active only in the "Debug" launch mode.

You can use JavaScript console methods to show log information for your application in the "JavaScript Log Console" view.

Table 1. Supported JavaScript log methods
Method Example
console.log console.log("console.log");"");
console.warn console.warn("console.warn");
console.error console.error("console.error");
console.debug console.debug("console.debug");

Figure 7. JavaScript log method colors

Figure 7. JavaScript log method colors

Code Beautifier and Minifier

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 information, see Cleaning Up Your Code.

Privilege Checker

The Privilege Checker tool allows you 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 information, see Verifying Privilege Usage.

Application Running and Testing

You can run and test your application on an emulator imitating the target environment, or on a real target Tizen device.

Using the Emulator

The TV emulator imitates the target environment running Tizen Web applications. You can test your application in this replicated environment before deploying it to a real target device.

The emulator is a virtual machine that closely resembles a real TV software stack.

For more information, see TV Emulator.

Using a Target Device

If you have tested your application on the emulator, it is ready for uploading and testing on a target TV device.

Even though it is possible to complete most application testing on the emulator, it is highly recommended that you also test your application on a target device. The emulator and the TV environments are very similar but there are some differences at the hardware level.

Before installing and running apps on a target TV device:

  • Connect your computer and TV to the same network.
  • Switch on "Developer Mode" on the TV.
  • Connect to the TV from the SDK.
  • Make sure that the TV has the latest firmware installed (version 1400.0 or higher).
  • Create a certificate profile.

For more information, see Running Applications on TV.