[Youtube Video] Creating a Simple CAPH Application in Samsung Smart TV
The CAPH (CAF) framework is Samsung’s official UI component framework for Smart TV applications on 2015 and later models. This tutorial introduces the framework and walks through creating a simple box widget application entirely by hand — without using the visual drag-and-drop UI designer.
What Is the CAPH Framework?
The CAPH framework is a UI framework bundled with the Samsung Smart TV SDK for TV models from 2015 onwards. It provides a library of pre-built, customizable UI components so developers can focus on application logic rather than building interface elements from scratch. Some of the most commonly used components include:
- Box
- Panel
- Scene
- Progress bar
- Grid
- List views
- Navigator
Beyond UI components, CAPH also ships with AngularJS and jQuery packages, giving developers access to modern web development tools within the Smart TV environment.
Creating a CAPH Project in the SDK
To create a CAPH project in the Samsung Smart TV SDK, first switch to the CAPH perspective from the “Open Perspective” menu. Then go to File > New Project, select “Web App Project” under Samsung Smart TV, and choose the CAPH Web UI Framework option. You’ll see two sub-options: Basic Project and UI Designer. This tutorial uses the Basic Project to code the widget by hand rather than dragging and dropping components in the visual designer.
Understanding Scenes and the Scene Manager
The CAPH framework is organized around the concept of scenes, where each scene represents a single view or page in your application. The Scene Manager controls which scene is displayed, hidden, or activated at any time. When the app loads, the index page initializes the CAPH framework and confirms it is running in a Smart TV environment (not a regular browser). The default project includes one scene file (scene1.js) — think of it as the first page of your application.
To set up the Scene Manager and add your scene, the pattern looks like this: get a reference using CF.Widget.SceneManager.getInstance(), then call addSceneEventHandler with the scene name and an event handler object that includes an onCreate callback — this is where UI components are initialized.
Rendering a Box Widget
Inside the onCreate callback, a UI context is required before any component can be rendered — similar to the canvas rendering context in standard HTML5. Obtain it with CF.Widget.Widget.UIContext and instantiate it with new UIContext().
Next, get a reference to the Box class from CF.Widget.Widget.Box and create an instance. The Box widget supports several configuration methods:
- addClass() — attach a CSS class for styling
- setSize(width, height) — define the dimensions
- setPosition(x, y, z) — set the x, y, and z coordinates (z is set to 0 for a 2D view)
- setOpacity() — control transparency
- setScale(x, y, z) — apply a scaling factor
Finally, call boxWidget.render(uiContextObject) and make the context visible. The Box renders immediately to the scene.
Styling and Running the Application
CAPH applications include default styles for all built-in components, referenced through a stylesheet included in the project’s HTML. For custom styles, create a separate CSS file and link it in the HTML. In this tutorial, a .box-class style sets the background color to green, which is visibly applied to the rendered box in the emulator.
To run the application, right-click the project name in the Project Explorer and select “Run as Samsung Smart TV Emulator.” The box widget appears on screen with the correct dimensions, position, and background color.
Watch the full video to see each step of this process in action and get a clear starting point for building more complex CAPH-based Smart TV applications.