To create integrating caph.wui widget with jQuery application, you should include caph.wui dependencies, basic widget of UI, the base style of UI, the CSS style of caph.wui, jQuery and jQuerySample app source files in your application by putting the following code in the <head> section of jQuerySample.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.

Integrating caph.wui widget with jQuery test example source code as follows, we add two buttons on domContainer widget, at the time, add the click event to them using jQuery style, add the highlight effect on UIContext and set the key operations to document body. First, you should import some source files about widgets used, and then define some options for widget, new widget objects, define some properties to two buttons, and last, render the two button objects on UIContext, in order to show on the screen.

Import the widgets will be used, including UIContext, domcontainer and highlight. 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.

Line 9-31s

Set the options of domcontainer, including width, height defined in the frame tag and the position to show defined in the center-position tag.

Line 33-35s

New the UIContext and domContainer object. UIContext is a canvas, all the caph.wui widgets used in the source file should be rendered on it. DomContainer will include some DOM elements with html on it.

Line 38-58s

Add two button elements to domContainer using html, set the class style and content of the button and give click event to the two buttons.

Line 61-62s

Render domContainer object to the UIContext.

Line 63

Show the UIContext. Then the object will be show on your screen.

Line 66-67s

Add the highlight effect on UIContext and define the key operations to document body.

The example picture is show on your screen is like, button 1 has received the highlight effect, button 2 has normal status: