02

App Development on Samsung SmartTV

Structure of a Samsung SmartTV Application

Project Types

Web Application

Summary

Structure of a Samsung SmartTV Application

Structure of a Samsung SmartTV Application

A Samsung SmartTV application runs on the WebKit browser engine. This means that a SmartTV application is similar to a common website based on HTML pages. However, a SmartTV application has a distinct difference from a common website; unlike a website with variable resolution and keyboard and mouse input, a SmartTV application runs on fixed resolution with remote controller input. SmartTV users are already accustomed to navigating with a remote controller's directional, Enter, and Back keys.

The above figure demonstrates the structural difference of a website and a TV application. From 2012, Samsung SmartTV has been using the standard WebKit browser engine that is also used by Google Chrome and Apple Safari, instead of its previous MAPLE (Markup Engine Platform for Embedded System) application engine.

For all practical purposes, the Samsung SmartTV application is similar to front-end development of a common web service. Business logic such as server calls and event handling are implemented with JavaScript, and graphical interfaces are designed with CSS and HTML pages.

Application Resolution

A SmartTV application supports HD-level 1280 × 720 and 960 × 540 resolutions. The majority of applications for 2013 TVs are designed with 1280 × 720 resolution. Also, high-end 2012 and 2013 models support full HD (1920 × 1080) resolution.

Application Types

Samsung SmartTV applications can be categorized into the following types, based on how they are displayed on screen.

As shown above, there are full-screen applications, single-wide applications that occupy some screen area, and ticker applications that float on a screen.

Project Types

One of the following three project types needs to be selected while you're creating a new Samsung SmartTV application project. Each project type has the following characteristics:

• Basic App Project: Uses a WYSIWYG visual code editor for easy application development.
• Flash App Project: Implemented in Adobe Flash. Samsung SmartTV supports Flash-based applications with a selection of Flash functions and components suitable for TV applications.
• JavaScript App Project: The most common project that can utilize the most of the Samsung SmartTV platform's capability. It can even control the lifecycle and processes of an application.

Basic App Project

The Basic App Project type is useful for beginners because it provides a visual editing tool not supported by other project types. It can utilize various Samsung UI components on a WYSIWYG editor to easily design an application layout.

The WYSIWYG editor can add, edit, or delete UI components using an XML file. The XML file has the .scene extension, and is grouped with automatically created HTML, CSS, and JavaScript files with the same name. The created files and the XML file consist of a scene, which functions as a display screen layer of a SmartTV application.

As shown on the right, a project's layout is first designed in the WYSIWYG editor. Then the saved project file can be clicked with the right mouse button to choose the “Sync with Code” function to automatically create HTML, CSS, and JavaScript files for the project.

The Basic App project's UI components are designed in Samsung SmartTV's basic UI style. Knowledge in components structure and manual CSS code editing is necessary to modify the design.

Flash App Project

A Flash App Project utilizes internal Flash support of a Samsung SmartTV. Adobe Flash Professional version software is required in addition to the Samsung SmartTV SDK. Source code is programmed in the Flash software, and the SDK is used to test and package the application. A Flash App Project also uses standard JavaScript API by including the Flash object in the index.html file.

Unlike other project types, the Flash File ID and Path need to be configured while creating a Flash App Project.

Please note that a SmartTV has a limited Flash player that cannot match performance of an emulator running on a PC. For example, a SmartTV can only process 30 frames per second for a Flash animation. Please keep this performance limitation of a SmartTV in mind while designing a Flash App Project.

JavaScript App Project

As briefly mentioned, the JavaScript App Project is the standard SmartTV development method and is the focus of this book. Because the majority of standard device APIs and application lifecycle processes are implemented in JavaScript, this project type allows a developer fine control of native APIs.

JavaScript app programming is also easy to learn for a developer experienced in web application, because it uses the same standard web development method.

This is the most versatile project type because it allows developers to go beyond Samsung's SDF guidelines and to directly access all application components.

Web Application

As shown previously, a Samsung SmartTV application is implemented as a web application. While this does not support all web technologies including server side containers or server side programming languages, a Samsung SmartTV application has almost a similar front-end structure that allows using custom web client development practices.

This also means it is critical to understand general web environments and HTML (its building blocks); CSS (its style maker); and JavaScript (its binding agent).

HTML in SmartTV Programming

There are different HTML file structures to accommodate scene design, which is a page or a screen layer design of a SmartTV application. This book will introduce a scene-based programming technique that uses layers, instead of separate HTML files, to handle each scene. Therefore, only one top-level HTML file—index.html—will be used. Screens contained in HTML layers, anchors to handle focuses, and objects with necessary device APIs are all included in the index.html file. As in a website, the HTML file represents the application itself as its starting point.

CSS in SmartTV Programming

CSS defines display styles. It is even more vital to handle design elements with CSS on an application that runs on a SmartTV with limited processing power and screen resolution.

JavaScript in SmartTV Programming

JavaScript is the execution code that runs the application. It calls device APIs, handles DOM elements for events, and manages focus and scene transactions for a SmartTV application. All necessary functions and event handling can be implemented using JavaScript.