一个 Smart TV 应用至少包含以下几部分:
index.html 文件
应用程序的入口。
config.xml 文件
这个xml文件放在应用结构的根目录，包含安装应用程序所需要的信息。
JavaScript 文件
主要作用是控制应用程序的行为。
CSS 文件
定义应用程序的布局，样式。
Image 文件
图像资源。
- 示例应用
接下来会实现一个简单的应用程序，这个应用只包含了显示文本和打印遥控器的事件的功能。
- 实现config.xml文件
- 实现index.html文件
- 实现JavaScript文件
- 实现CSS文件
- 增加遥控器响应处理
首先文件结构如下：
- Css
- Main.css
- JavaScript
- Main.js
- Resources
- Images
- settings_logo.png
- Images
- config.xml
- index.html
- 实现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> | 内容显示的方式。
| 数字 |
| <contents> | 内容显示的文件路径。 只有下面的类型需要指定此标签:
| 文件路径 |
| <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> | 应用在播放视频的时候会遇到下面的问题：
| 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 |
- 实现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 οnlοad="Main.onLoad();">
<div>
Welcome to Samsung application world!
</div>
</body>
</html>
- 实现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文件。
- 实现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;
}
- 响应遥控器事件
用户可以在点击遥控器的时候改变屏幕上显示的文字。首先需要在index.html中增加一个<a>标签，为这个标签的onkeydown事件指定一个处理函数并设置焦点到这个标签上。然后点击遥控器的按键。你指定的处理函数就会执行。
下面的代码指定了一个叫做keyDown的处理函数：
<body οnlοad="Main.onLoad();">
<div id="welcome">
Welcome to Samsung application world!
</div>
<a href='javascript：void(0);' id='anchor' οnkeydοwn='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)
954
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
