top

How To Create CAPH Application

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

Give some descriptions for creating CAPH application

Prerequisites

To create CAPH application, take box widget for example, you should include caph.wui dependencies, basic widget of UI, the base style of UI, box app source files in your application by putting the following code in the <head> and <body> sections of box.html, just as follows:

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

    <!-- load caph-level1-unified.min.js -->
    <script src="$CAPH/1.0.0/caph-level1-unified.min.js"></script>

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

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

Source files mentioned above are explained in the following table:

File Description
caph-level1-unified.min.js It includes all kinds of basic widget of UI that will be used. It includes external libraries also.
box.js The box 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

The application source file box.js includes few steps: first, import some widgets about UIContext and box used. Second, define the options of box widget about x, y, z coordinates, width and height parameters, set the position, the opacity and the scale, add class style, new the UIContext and box object, render box to UIContext and so on, in order to show on the screen. The source codes part 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
/**
* caph.wui.widget.box sample
*/
var app = app || {};

app.run = function() {

    var UIContext = caph.wui.widget.UIContext;
    var Box  = caph.wui.widget.Box;

    var info = {'x': 300, 'y': 300 ,'z':0, width:300, height:300};
    var uiContext = new UIContext();
    var widget = new Box();

    widget.setSize(info.width, info.height);
    widget.setPosition(info.x, info.y, info.z);
    widget.setOpacity(0.5);
    widget.setScale(0.8, 0.5, 0);

    widget.addCls('boxcls');
    widget.render(uiContext);
    uiContext.show();
};

The codes explain as follows:

Line 8 Import the UIContext widget will be used, the UIContext widget is the root canvas, in order to render object on it.
Line 9 Import the box widget will be used. Box is a widget with rectangle region and background color. It is the base class for Image, GridWidget, ColorTag, Panel, Label, ListWidget widgets.
Line 12 New the UIContext object. UIContext is a canvas, all the caph.wui widgets used in the source file should be rendered on it.
Line 13 New the box object. Box is an caph.wui widget.
Line 15-18s Set the width and height size of box object. Set the object position, if you don’t do this the object will display on the top left corner of your screen. Set the opacity and scale of box.
Line 20-21s Add class style to box, in order to show the box object more beautiful. Render box object to UIContext.
Line 22 Last, showing the UIContext. Then the box object will be shown on your screen.

The example picture is about box widget shows on your screen is like: