top

How To Integrate CAPH WUI Widgets With jQuery Library

Published 2014-10-27 | (Compatible with SDK 5.0,5.1 and 2013,2014 models)

This file will give some descriptions for integrating caph.wui widget with jQuery

Prerequisites

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Integrate caph.wui with jQuery sample</title>

    <!-- load jquery js source file-->
    <script src="jquery-1.9.1.js"></script>

    <!-- load caph-level1-unified.min.js, caph.css -->
    <script src="$CAPH/1.0.0/caph-level1-unified.min.js" type="text/javascript"></script>
    <link href="$CAPH/1.0.0/caph.css" rel="stylesheet" type="text/stylesheet">

    <!-- load the app -->
    <script src="jQuerySample.js"></script>
</head>

Source files mentioned above are explained in the following table

File Description
jquery-1.9.1.js jQuery source file.
caph-level1-unified.min.js It is include all kinds of is basic widget of UI will be used. It includes external libraries also.
caph.css The class style of caph.wui.
jQuerySample.js The jQuerySample application source file.

Environment

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.

Source File

The files needed for the sample application are here.

How to Develop

  • 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.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    /**
     * jQuery integrates with caph.wui sample
     */
    $(document).ready(function(){
        var UIContext = caph.wui.widget.UIContext;
        var DomContainer = caph.wui.widget.DomContainer;
        var HighLight = caph.wui.widget.HighlightHelper;
    
        var options = {
                'frame': {
                    'width': 250,
                    'height': 100
                },
                'center-position': {
                    'x': 300,
                    'y': 500,
                    'z': 1
                }
            };
    		
        var options2 = {
                'frame': {
                    'width': 250,
                    'height': 100
                },
                'center-position': {
                    'x': 1100,
                    'y': 500,
                    'z': 1
                }
            };
    
        var uiContext = new UIContext();
        var container = new DomContainer(options);
        var container2 = new DomContainer(options2);
    
        //buttons
        var dummyElem = document.createElement("div");
        dummyElem.id = "testbtn1";
        $(container).html("testbtn1");
        container.addCls('u-button-d');
        container.addCls('u-button-normal-d');
        container.addCls('caph-nav-item');
        $(container).click(function() {
            alert('Hi testbtn1!');
        });
        container.appendChild(dummyElem);
    
        var dummyElem = document.createElement("div");
        dummyElem.id = "testbtn2";
        $(container2).html("testbtn2");
        container2.addCls('u-button-d');
        container2.addCls('u-button-normal-d');
        container2.addCls('caph-nav-item');
        container2.appendChild(dummyElem);
        $(container2).click(function() {
            alert('Hi testbtn2!');
        });
    
        //render container to UIContext
        container.render(uiContext);
        container2.render(uiContext);
        uiContext.show();
    
        //HighLight    
        HighLight.init(uiContext);
        caph.wui.widget.Keycontrol.init();
    });
    

    The codes explain as follows:

    Lines 5-7 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: