To create using caph.wui widget application, take highlight widget for example, you should include caph.wui dependencies, basic widget of UI, the base style of UI, The CSS style of caph.wui, highlight app source files in your application by putting the following code in the <head> and <body> sections of highlight.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.

In order to show the application with CAPH WUI Widgets on the screen, first it needs a thing to paint, it’s a UIContext, which is the root canvas, in order to render CAPH WUI Widget objects on it, thus the objects can be displayed.

The file will introduce the highlight widget, it includes Navigator, GridWidget, ListWidget, Panel and Button strip widgets, so we will give some descriptions about these widgets.

Navigator is a sample widget with a layout in it. Each layout block has an image and a label. When the image is clicked, it will navigate to some other UIContext.

Take adding one panel item to the GridWidget object for example as follows, you can add other items like this, Import Panel source codes, new the Panel object, set the image and text content to Panel object, add the Panel object to GridWidget widget.

var Panel = caph.wui.widget.Panel;
var panel1 = new Panel(options);
panel1.setURL('img/2.jpg');
panel1.setText('Panel1');
gridwidget.addItem(panel1);
How can user draw the ``GridWidget`` widget on the ``UIContext`` of screen is like:

gridwidget.render(uiContext);uiContext.show();

ListWidget is a widget list group that displays widgets in one dimensional, it’s a special example of GridWidget, you can add some caph.wui widgets on it.

To set the main options of ListWidget object, including width, height, cycle, maximum size, default it can focus, the width, height, margin left, margin right, margin top and margin bottom of each item parameters and so on, using the following codes:

Take adding one panel item to the ListWidget object for example as follows, you can add other items like this, Import Panel source codes, define the options about width, height, textHeight, margin and labelScroll (whether the text on Panel label can scroll), new the Panel object, set the image and text content to Panel object, add the Panel object to ListWidget widget.

To set the main options of Button strip object, including width, height, cycle, focusHighlightCLs, focusClsTargetWidth, focusClsTargetHeight and CSS style of Button strip parameters, using the following codes:

Take adding one label item to the Button strip object for example as follows, adding CSS style to Button strip Object, you can add other items like this:

strip.addItem(0,'What');strip.addCls('bb');

How can user draw the Panel widget on the UIContext of screen is like:

strip.render(uiContext);uiContext.show();

The following parts will be in order to show how to use caph.wui widget, so first we will import the source files about these widgets we used about UIContext, GridWidget, Image and so on, at the beginning of the highlight.js file, just as follows:

Import the UIContext`widgetwillbeused.The``UIContext widget is the root canvas, in order to render object on it.

Line 11

Import the GridWidget widget will be used. The GridWidget object is widget group that displays widgets in a two-dimensional.

Line 12

Import the Image widget will be used. Image is the object that contains the image.

Line 13

Import the highlight widget will be used. 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 14

Import the Panel widget will be used. The Panel object is a widget that consists with Image UI and Label UI.

Line 15

Import the ListWidget widget will be used. The object is widget list.

Line 16

Import the Navigator widget will be used. Navigator is a class with a layout in it. Each layout block has an image and a label. When the image is clicked, it will navigate to some other UIContext.

Line 17

Import the button strip widget will be used. Button Strip is a class, with a layout in it. Each layout block has a label. When the label is chosen, it will highlight.

Second, it will define some options about width, height, labelCls and so on parameters, and position parameters for these widgets about Navigator, GridWidget, ListWidget and button Strip, we should define before the special operations, the codes just as follows:

Define the position of ListWidget, decide the location showing on the screen.

Lines 43-47

Define the position of button strip, decide the location showing on the screen.

Third, rendering the navigator widget object to the UIContext object, it should new the UIContext and navigator object, define the options about width, height, cycle and so on parameters for navigator, add 5 items to navigator object, set the position for showing the navigator object and render it on the UIContext object.

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

Line 13

New the navigator object. navigator is a class with a layout in it. Each layout block has an image and a label. When the image is clicked, it will navigator to some other UIContext.

Lines 15-19

Add some items on the navigator widget, they has image, text content and state.

Line 21

Set the navigator object position. If you don’t do this the navigator will display on the top left corner of your screen.

Line 22

Render navigator object to UIContext. Then the navigator object will be show on your screen.

Fourth, rendering the GridWidget widget to the UIContext, we should new the GridWidget object, set the layout style, add some item objects including image and panel objects to it, set the position for showing and render on the UIContext object.

New the GridWidget object. The object is widget group that displays widgets in a two-dimensional.

Line 2

Set the GridWidget object position. If you don’t do this the GridWidget will display on the top left corner of your screen.

Lines 4-10

Add some image objects to item list. The images have added the class style.

Lines 12-15

Set the row and column layout style of GridWidget.

Lines 17-18

Set the layout of GridWidget object and add some items on it.

Lines 20-22

New the panel object. Add the image and text on the panel object.

Lines 23

Add panel objects on GridWidget widget.

Lines 24

Render GridWidget object to UIContext. Then the GridWidget object will be show on your screen.

Fifth, rendering the ListWidget and button strip widgets to the UIContext, we should new the ListWidget and button strip objects firstly, then add some item objects to them, set the position for showing and render on the UIContext object, add the highlight effect on UIContext and set the key operations to document body. Thus, we finish the introduce about how to use caph.wui widget.

New the ListWidget object. The object is widget list. Add some image objects to item list. The images have added the class style.

Lines 8-9

Set the ListWidget object position. If you don’t do this the ListWidget will display on the top left corner of your screen. And render ListWidget object to UIContext. Then the object will be show on your screen.

Lines 16-22

Add some items on the button strip widget, render button strip object to UIContext. Then the object will be show on your screen. Set the button strip object position. If you don’t do this the button strip will display on the top left corner of your screen.

Line 24

Add the highlight effect on UIContext.

Line 26-31s

Show the UIContext and define the key operations to document body.

The example picture is about above widgets shows on your screen is like, the second item of GridWidget has highlight effect:

When moving the highlight effect among CAPH WUI Widgets, you can set the caph_nav_item class style to the CAPH WUI Widgets, in order to find up, down, left and right position of widgets with the highlight effect to the current widget, if you set, it can easily find the exact widgets, if you don’t set, even though the widget near the current widget in the up, down, left and right directions, it won’t find the widgets. You can look at the following pictures.

Above two pictures, the two buttons and the items of button strip have the caph_nav_item class style, the progressbar widget hasn’t this class style, when user wants to press the “up” key to move the highlight effect to progressbar, but the button_0 has the highlight effect, this case could well explain this question, you can look at the following pictures.

There are some differences between setScale and setSize methods, when setScale method is called, the display width and height of widget will be changed, but the value of height and width properties will not be modified, but when setSize method is called, the value of height and width properties are changed. Besides, setScale method can modify the x, y, z coordinate for scale position of the widget, but setSize method can only modify the x, y coordinate of the widget. About setScale method you can look at the following pictures, the panel widget is in the normal state, the width and height are 180px and 200px, the focusScaleX and focusScaleY are all 1 by matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,1200,360,1,1).

By the setScale method you can look at the following pictures, the panel widget is in the magnify state, the width and height are also 180px and 200px, the focusScaleX and focusScaleY are all 1.25 by matrix3d(1.25,0,0,0,0,1.25,0,0,0,0,1,0,1200,360,1,1).

About setSize method, you can look at the following pictures, you can paint a box on the UIContext object with width and height are 300px and 300px, If user doesn’t call setSize method, the width and height are 0px, and there won’t see a box on the UIContext object.