在三星smart TV上开发widget-入门篇

一个 Smart TV 应用至少包含以下几部分:
index.html 文件
应用程序的入口。
config.xml 文件
            这个xml文件放在应用结构的根目录，包含安装应用程序所需要的信息。
JavaScript 文件
主要作用是控制应用程序的行为。
CSS 文件
定义应用程序的布局，样式。
Image 文件
图像资源。

1. 示例应用

接下来会实现一个简单的应用程序，这个应用只包含了显示文本和打印遥控器的事件的功能。

1. 实现config.xml文件
2. 实现index.html文件
3. 实现JavaScript文件
4. 实现CSS文件
5. 增加遥控器响应处理

首先文件结构如下：

• Css
  • Main.css
• JavaScript
  • Main.js
• Resources
  • Images
    • settings_logo.png
• config.xml
• index.html

2. 实现config.xml文件

config.xml 文件包含应用执行，更新和一些操作环境的设置等信息。应用程序管理器根据这些信息来控制应用程序的版本，环境设置并在需要的时候创建和管理用户帐户。Config.xml文件必须放在应用安装的根目录，且包含下表中列出来的标签。
应用执行时config.xml 文件会首先被读取。 <ver>标签可以决定应用是否需要升级到新的版本。 <ThumbIcon> 标签定义了应用显示的缩略图。
<?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>
    <category></category>
    <autoUpdate>n</autoUpdate>
    <cpname>MyCP</cpname>
    <cpauthjs></cpauthjs>
    <login>y</login>
    <ver>0.930</ver>
    <mgrver>1.000</mgrver>
    <fullwidget>y</fullwidget>
    <srcctl>y</srcctl>
    <ticker>n</ticker>
    <childlock>n</childlock>
    <audiomute>n</audiomute>
    <videomute>n</videomute>
    <dcont>y</dcont>
    <network>y</network>
    <widgetname>HelloWorld</widgetname>
    <description>Welcome!</description>
    <width>960</width>
    <height>540</height>
    <author>
        <name>Samsung Electronics Co. Ltd.</name>
        <email></email>
        <link>http://www.sec.co.kr/</link>
        <organization>Samsung Electronics Co. Ltd.</organization>
    </author>
</widget>
标签详情：

标签	描述	值
<widget>	根节点，必须要写的。	-
<ThumbIcon>	在应用程序管理器中显示的图标（没有焦点的时候）。大小是106 x 86 像素。	文件路径
<BigThumbIcon>	在应用程序管理器中显示的图标（有焦点的时候）。大小是115 x 95 像素。	文件路径
<ListIcon>	在应用程序管理器中显示的图标（列表模式，无焦点）。大小是85 x 70 像素。	文件路径
<BigListIcon>	在应用程序管理器中显示的图标（列表模式，有焦点）。大小是95 x 78像素。	文件路径
<category>	应用的分类名称.可选的有 video（视频）, sports（运动）, game（游戏）, lifestyle（生活）, information（资讯）, education（教育）。	字符串
<autoUpdate>	是否需要自动更新。不需要的话设置为n。	y | n
<apptype>	内容显示的方式。 11: HTML + Javascript + Flash Player 12: Adobe SWF ( Ver. Flash Lite 3.1 ) 13: Adobe SWF ( Ver. Flash 10.1 ) 14: Lua Script	数字
<contents>	内容显示的文件路径。 只有下面的类型需要指定此标签: 12: Adobe SWF (Ver. Flash Lite 3.1) 13: Adobe SWF (Ver. Flash 10.1) 14: Lua Script	文件路径
<cpname>	应用提供商。	字符串
<cpauthjs>	这个文件用来向服务提供商确认帐户信息，必须遵循固定的格式。	String
<login>	决定是否需要登录. 设置为 ‘y’的话,需要在应用程序管理器中输入用户和密码进行登录，并且在<cpauthjs>标签值的JavaScript文件中进行有效性验证。	y | n
<ver>	应用版本号，服务器可以根据这个版本号进行更新。	x.xxx
<mgrver>	指定应用程序依赖的应用管理器版本号	x.xxx
<fullwidget>	应用程序是全屏显示还是指定宽度显示。这个标志同时会影响声音播放策略。	y | n
<srcctl>	如果设置为’y’， TV信号源会自动从频道或外接输入切换到内部的媒体播放器，当应用关闭的时候会自动恢复（比如YouTube应用）。	y | n
<childlock>	是否支持 childLock 功能. 这个功能允许用户锁定应用程序。	y | n
<audiomute>	是否静音。如果设置为’y’，应用程序启动时TV的广播会被静音。如果应用显示为全屏的时候设置为’y’，否则设置为’n’。	y | n
<videomute>	是否禁用TV视频。如果设置为’y’，应用程序启动时TV播放的视频不会显示在屏幕上。	y | n
<dcont>	是否禁用动态对比度功能。这个功能会调整TV的对比度。如果应用程序显示为全屏，设置这个标签值为’y’，否则设置为’n’。	y | n
<movie>	应用在播放视频的时候会遇到下面的问题： 如果视频数通过HDMI播放（比如DVD），当应用程序执行来源切换的时候声音会混淆（Youtube）。 由于TV图像和视频的帧率不同，屏幕会出现闪烁。 设置此属性为’y’可以避免上面的问题。	y | n
<widgetname>	应用程序名称。	String
<description>	应用程序描述。	String
<width> <height>	应用程序的宽高。	Number
<author>	应用程序作者。	string
<network>	是否需要网络。如果设置为’y’，当网络未连接时启动应用程序会有错误提示。默认为’y’。	y | n
<hubsite>	是否验证hubsite，如果设置为’y’, 当hubsite为验证时启动应用程序会有错误提示。默认为’n’。	y | n
<pushNotice>	是否提供推送服务。默认为’n’。	y | n
<pushUerbinding>	是否为指定的用户提供推送服务。默认为’n’。	y | n
<flashplayer>	是否支持嵌入式或独立的Flash Player。	y | n

3. 实现index.html文件

下面是index.html的示例代码段。这段代码首先引入了Main.js文件，然后 在body的load事件中调用Main.onLoad方法：
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Hello World!!</title>
        <script type="text/javascript" src="JavaScript/Main.js"></script>
    </head>
    <body onload="Main.onLoad();">
        <div>
            Welcome to Samsung application world!
        </div>
    </body>
</html>

4. 实现JavaScript文件

当HTML文档加载完成，Main.js文件中定义的onLoad方法会被触发。
下面的代码是创建Main对象和onLoad方法：
var Main = {    // Main object };
 
Main.onLoad = function () {     // called by body's onload event
    alert("Main.onLoad()");
    /**
     * JavaScript code Here!
     */
}
 
上述步骤执行完之后，在控制台会打印一行调试信息（Main.onLoad中的打印）。但是注意文字“Welcome to Samsung application world!”并没有在屏幕上显示出来。你还需要加入应用管理器提供的common模块。先在index.html的head中引入此模块：
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
在Main.js中把common模块声明为全局变量，然后调用它的sendReadyEvent()方法。这样应用程序管理器才会将应用程序显示到屏幕上：
var Main = {    // Main object};
 
var widgetAPI = new Common.API.Widget();    // Creates Common module
 
Main.onLoad = function () {     // called by body's onload event
    alert("Main.onLoad()");
    widgetAPI.sendReadyEvent(); // Sends ready message to Application Manager
    /**
     * JavaScript code Here!
     */
}
运行程序。文字 “Welcome to Samsung application world!”会显示在TV屏幕上。要修改文字显示的样式，需要进一步修改CSS文件。

5. 实现CSS文件

在index.html文件的head中引入css文件：
<link rel="stylesheet" type="text/css" href="CSS/Main.css"/>
给index.html文件中显示文字的div指定一个id：
<div id="welcome">Welcome to Samsung application world!</div>
在css文件夹中增加一个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;
}

6. 响应遥控器事件

用户可以在点击遥控器的时候改变屏幕上显示的文字。首先需要在index.html中增加一个<a>标签，为这个标签的onkeydown事件指定一个处理函数并设置焦点到这个标签上。然后点击遥控器的按键。你指定的处理函数就会执行。
下面的代码指定了一个叫做keyDown的处理函数：
<body onload="Main.onLoad();">
    <div id="welcome">
        Welcome to Samsung application world!
    </div>
    <a href='javascript：void(0);' id='anchor' onkeydown='Main.keyDown();'></a>
</body>
在keyDown() 方法中打印用户的按键信息：
Main.keyDown = function(){     // Key handler
    var keyCode = event.keyCode;
    alert("Main Key code : " + keyCode);
}
在上面的方法中，每个按键都会对应不同的keyCode。应用管理器提供的common模块里包含了所有按键的code定义。需要引入TVKeyValue模块：
<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
修改 Main.js 文件 ，使用common模块识别不同的按键，并执行不同的处理：
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;
    }
}

当用户按遥控器的上，下，左，右键时welcome标签中显示的文字会做相应的改变。

转载请注明来源：智能生活 (http://www.kgsoft.cn)

原文地址：http://www.kgsoft.cn/html/2014/develop_0603/2524.html