top

How To Use CAPH WUI Widgets With HTML

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

This file will give some descriptions for using caph.wui widget with HTML

Overview

This file will give some descriptions for using caph.wui widget with HTML.

Prerequisites

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:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>caph.wui samples</title>

    <!-- 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="domcontainer.js"></script>
</head>

<body onload="app.run();">
</body>

Source files mentioned above are explained in the table.

File Description
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.
domcontainer.js The domcontainer 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

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

     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
    /**
     * box sample
     */
    var app = app || {};
    
    app.run = function() {
        caph._setBasePath('$CAPH');
        app.handleLoad();
    
        var UIContext = caph.wui.widget.UIContext;
        var DomContainer = caph.wui.widget.DomContainer;
        var HighLight = caph.wui.widget.HighlightHelper;
    
        var options = {
            'frame': {
                'width': 600,
                'height': 680
             },
            'center-position': {
                'x': 300,
                'y': 500,
                'z': 1
            }
        }
    
        var uiContext = new UIContext();
        var container = new DomContainer(options);
    

    The codes explain as follows:

    Lines 10-12 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.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    
    //buttons
    var dummyElem = document.createElement("button");
    dummyElem.id = "testbtn1";
    dummyElem.innerHTML = "testbtn1";
    dummyElem.className = 'u-button-normal-d caph-nav-item';
    dummyElem.addEventListener('click', function(){
        alert('testbtn1 click');
    }, false);
    
    container.appendChild(dummyElem);
    container.render(uiContext);
    uiContext.show();
    
    //HighLight
    
    HighLight.init(uiContext);
    caph.wui.widget.Keycontrol.init();
    

    Code is described below:

    Lines 2-8 Add a button element to domContainer with HTML. Add the class style and content of button and listen the click event.
    Line 10 Append the button on the domContainer object.
    Line 11 Render domContainer object to UIContext.
    Line 12 Show the UIContext. Then the object will be show on your screen.
    Lines 15-20 Add the highlight effect on UIContext and define the key operations to document body.

    The example picture is about button shows on domContainer widget is like, it has highlight effect.