top

How To Customize CAPH WUI Widgets

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

Give some descriptions for making user widget which inherits the widget of the caph.wui

Prerequisites

To customize caph.wui widget, take label widget for example. First you should get caph.js file, and put below codes into the file, it is main add namespace in it:

1
2
3
4
5
6
7
8
9
(function(window) {
    'use strict';

    caph.namespace('caph.wui.widget', /** @lends caph.wui.widget */
    {
        Label : Label
    });
    return caph;
})(this);

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 in here.

How to Develop

  • We will give an example to introduce how to customize caph.wui widget. First you should create a *.js source file. Like below, it can include some widgets and common properties such as Box, CommonUtil and WidgetEnum that we use. So you should import the source files at the beginning of the file. All the codes should be written in a closure function.

    1
    2
    3
    4
    5
    (function(window) {
        var Box = window.caph.wui.widget.Box;
        var CommonUtil = window.caph.wui.widget.CommonUtil;
        var WidgetEnum = window.caph.wui.widget.WidgetEnum;
    })(this);
    

    The codes explain as follows:

    Lines 3 – 5 Import the widget files which will be used, including box and common properties files. Box is a widget with rectangle region and background color. It is the base class for Image, GridWidget, ColorTag, Panel, Label, ListWidget widgets. CommonUtil file is main define some common methods and properties. WidgetEnum file is list some types and properties.
  • Second, the new customize caph.wui widget should have constructor function, it will initialize some parameters. Like below:

    1
    2
    3
    4
    5
    6
    7
    function Label(options) {
        this.disableFocus = true;
        this.lineHeight = null;
        this.iSelect = false;
        Box.call(this, options);
    }
    Label.prototype = Object.create(Box.prototype);
    

    The codes explain as follows:

    Line 1 This is constructor function name.
    Lines 2 – 4 This is new customize label’s options. Including the widget default is disableFocus, the lineHeight is 0px, and the widget be default is not selected.
    Lines 5 – 7 This code is for inherit. Label is inherited from box class.
  • Third, the new customize caph.wui widget must have a createEl function. Because your UI must be render to UIContext, then it can be showed. createEl function will be called by render function, it can define some properties, and set the default values.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    var CntLabelID = 0;
    Label.prototype._createEl = function() {
        if (this.id === undefined || this.id === null) {
            this.id = CommonUtil.getId(this.ctype, CntLabelID++);
        }
    
        this.callSuper(this._createEl);
        this._domObject.style.lineHeight = this.height + 'px';
    
        this.setText(this.text);
        this.setSize(this.width, this.height);
        this.setHeight(this.height);
        this.setLineHeight(this.lineHeight);
    };
    

    The codes explain as follows:

    Line 1 Initialize the id for new customize label widget.
    Line 3 - 5 This is to generate id for new customize label object.
    Line 7 This is for call the parent object _CreateEl function of Label.
    Lines 8 – 13 This is to initialize the function which belongs to the new customize label widget, including set text, size, height and lineHeight, it’s the customize options for users.
  • Last, there is an example function for the new customize caph.wui widget just as follows, you can create yourself function like this. In this example, it set the text content of label widget.

    1
    2
    3
    4
    5
    6
    Label.prototype.setText = function(_text) {
        this.text = _text;
        if (this._domObject !== undefined && this._domObject !== null) {
            this._domObject.textContent = _text;
        }
    };
    

    The codes explain as follows:

    Lines 1 – 6 Define a setText method of customize caph.wui widget for label, it can set the text content for the new customize caph.wui widget, it offers interface to users.