top

Coding Your JavaScript Application: Sample Code

Published 2014-10-27 | (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

Coding Your JavaScript Application: Sample Code

The sections below provide the complete code for the application developed in Coding Your JavaScript Application

config.xml

<?xml version="1.0" encoding="UTF-8"?>
    <widget>
        <ThumbIcon>Resource/image/icon/picasa_106.png</ThumbIcon>
        <BigThumbIcon>Resource/image/icon/picasa_115.png</BigThumbIcon>
        <ListIcon>Resource/image/icon/picasa_85.png</ListIcon>
        <BigListIcon>Resource/image/icon/picasa_95.png</BigListIcon>
        <previewjs>PreviewHelloWorld</previewjs>
        <cpname>Samsung</cpname>
        <cplogo>Resource/image/settings_logo.png</cplogo>
        <cpauthjs></cpauthjs>
        <ver>0.930</ver>
        <mgrver>1.000</mgrver>
        <fullwidget>n</fullwidget>
        <srcctl>n</srcctl>
        <ticker>n</ticker>
        <childlock>n</childlock>
        <audiomute>n</audiomute>
        <videomute>n</videomute>
        <dcont>y</dcont>
        <network>y</network>
        <hubsite>n</hubsite>
        <widgetname>HelloWorld</widgetname>
        <description>Welcome!</description>
        <width>960</width>
        <height>540</height>
        <author>
            <name>Samsung</name>
            <email></email>
            <link>http://acme-widget.example.com</link>
            <organization>Acme Examples, Inc.</organization>
         </author>
    </widget>

index.html

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Hello World!!</title>
        <script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
        <script type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
        <script type="text/javascript" src="JavaScript/Main.js"></script>

        <link rel="stylesheet" type="text/css" href="CSS/Main.css"/>
    </head>
    <body onload="Main.onLoad();">
        <div id="welcome">
            Welcome to Samsung widget world!
        </div>
        <a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"></a>
    </body>
</html>

Main.js

var Main = {                     // Main object
}

var widgetAPI = new Common.API.Widget();        // Creates Common module
var tvKey = new Common.API.TVKeyValue();

Main.onLoad = function() {             // called by body's onload event
    alert("Main.onLoad()");
    widgetAPI.sendReadyEvent();             // Sends ready message to Application Manager
    document.getElementById("anchor").focus();    // Sets focus on anchor for handling key inputs
                                                  // from the remote control
    /**
     * JavaScript code Here!
     */
}

Main.keyDown = function() {            // Key handler
    var keyCode = event.keyCode;
    alert("Main Key code : " + keyCode);

    switch (keyCode) {
        case tvKey.KEY_LEFT:
            alert("left");
            document.getElementById("welcome").innerHTML = "Nice to meet you.";
            /**
             * Code for Left key event!
             */
            break;
        case tvKey.KEY_RIGHT:
            alert("right");
            document.getElementById("welcome").innerHTML = "I'm so happy.";
            break;
        case tvKey.KEY_UP:
            alert("up");
            document.getElementById("welcome").innerHTML = "I Love you.";
            break;
        case tvKey.KEY_DOWN:
            alert("down");
            document.getElementById("welcome").innerHTML = "Good job.";
            break;
        case tvKey.KEY_ENTER:
            alert("enter");
            break;
        case tvKey.KEY_RETURN:
            break;
    }
}

Main.css

body {
    margin: 0;
    padding: 0;
    background-color: transparent;
}

#welcome {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 500px;
    height: 50px;

    background-color: #AFAFAF;
    color: #99FFFF;
    font-size: 30px;
    text-align: center;
}