To introduce use caph.wui widget with HTML, take domContainer widget for example, you should include caph.wui dependencies, basic widget of UI, the base style of UI, the class style of caph.wui, domContainer app source files in your application by putting the following code in the <head> and <body> sections of domContainer.html, just as follows:

Use Samsung Smart TV SDK and caph.wui to create applications that run on a TV screen, you need: Samsung TV connected to the Internet, SDK or a text editor for creating HTML, JavaScript and CSS files. You can also use the emulator provided with the SDK to debug and test the applications before uploading them in your TV.

First, it should import the source files for some widgets such as UIContext, domContainer and highlight widgets at the beginning of the domContainer.js file. Define some options about domContainer widget. Besides, new the UIContext and domContainer objects as follows.

Import the widgets that will be used, including UIContext, domContainer and highlight objects. The UIContext widget is the root canvas, in order to render object on it. The DomContainer is a container of DOM elements. The HighlightHelper is a selector. Its alternative terms could be cursor or focus that can be generally controlled by user’s remote control. It moves over widgets or UI templates. It always knows where it should move when any input events like up, down, left, and right happen.

Lines 14-24

Set the options of domContainer widget, including width, height in the frame tag and position in the center-position tag.

Line 26

New the UIContext object. UIContext is a canvas, all the caph.wui widgets should be rendered on it.

Line 27

New the domContainer object. It is a container to add some widgets on it.

Second, we will add the button element on the domContainer widget with HTML, it should initialize some parameters. And then render domContainer object to UIContext object, in order to show on the screen. Last, add the highlight effect on UIContext and set the key operations to document body.