一个 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 onload="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 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)
相关推荐
vue-smart-widget智能小部件是一个灵活且可扩展的内容容器组件。 它包括标题和正文部分,而小部件主体包括edi vue-smart-widget。智能小部件是一种灵活且可扩展的内容容器组件。 它包括页眉和正文部分,小部件正文...
本项目是基于Java的smart-doc-maven-plugin官方maven插件设计源码,包含43个文件,其中包括27个Java源文件、7个Markdown文档、2个JSON文件、1个gitignore文件、1个LICENSE文件、1个NOTICE文件、1个PNG图片文件、1个...
在智能电视(Smart TV)开发领域,三星是一个重要的参与者,其Smart TV平台为开发者提供了丰富的功能和工具。本文将基于“Smart TV开发帮助文档”这一主题,深入探讨相关知识点。 一、Smart TV概述 Smart TV是指...
赠送jar包:json-smart-2.3.jar; 赠送原API文档:json-smart-2.3-javadoc.jar; 赠送源代码:json-smart-2.3-sources.jar; 赠送Maven依赖信息文件:json-smart-2.3.pom; 包含翻译后的API文档:json-smart-2.3-...
smart_open库最初由Apache Hadoop社区的成员开发,其设计目标是为处理大型文件(如TB级)提供方便,尤其在HDFS(Hadoop Distributed File System)和其他分布式文件系统上。它支持多种打开模式,包括读、写和追加,...
在开始详细解释之前,我们首先要了解几个关键术语,以及这些术语在整个文档中的含义。 首先,“IPSO”代表“Internet Protocol for Smart Objects”,也就是智能对象的互联网协议。该协议的目标是为内存大小为16KB...
赠送jar包:json-smart-2.4.7.jar; 赠送原API文档:json-smart-2.4.7-javadoc.jar; 赠送源代码:json-smart-2.4.7-sources.jar; 赠送Maven依赖信息文件:json-smart-2.4.7.pom; 包含翻译后的API文档:json-smart...
赠送jar包:accessors-smart-1.2.jar; 赠送原API文档:accessors-smart-1.2-javadoc.jar; 赠送源代码:accessors-smart-1.2-sources.jar; 赠送Maven依赖信息文件:accessors-smart-1.2.pom; 包含翻译后的API文档...
赠送jar包:accessors-smart-2.4.7.jar; 赠送原API文档:accessors-smart-2.4.7-javadoc.jar; 赠送源代码:accessors-smart-2.4.7-sources.jar; 赠送Maven依赖信息文件:accessors-smart-2.4.7.pom; 包含翻译后...
S7-200 Smart入门笔记1-8 程序合集 S7-200 Smart入门笔记1——流水灯 按钮 S7-200 Smart入门笔记1——流水灯 定时器 S7-200 Smart入门笔记2——读时钟 S7-200 Smart入门笔记3——呼吸灯 S7-200 Smart入门笔记4——...
smart-docmaven
《S7-200Smart 经典案例(入门篇)》这个压缩包文件是针对初学者设计的一份宝贵资源,旨在帮助用户深入了解并掌握西门子S7-200Smart系列PLC的基本操作和编程技巧。PLC,全称可编程逻辑控制器,是一种在工业自动化...
S7-200SMART_PC_ACCESS_V2.3安装包
S7-200 SMART CPU断电重启后保持运动控制的当前位置值 S7-200 SMART ModbusRTU S7-200 SMART ModbusTCP S7-200 SMART 读写V90PN的驱动参数 S7-200 SMART 自由口通信超时处理实例 S7-200 SMART通过PROFINET连接V90 PN...
赠送jar包:accessors-smart-1.2.jar; 赠送原API文档:accessors-smart-1.2-javadoc.jar; 赠送源代码:accessors-smart-1.2-sources.jar; 赠送Maven依赖信息文件:accessors-smart-1.2.pom; 包含翻译后的API文档...
STF,全称为Smart Test Framework,是一个用于自动化测试的开源框架,特别适合移动设备的测试。作为初学者,想要快速入门STF,首先要理解它的核心概念和基本功能。STF结合了C++编程语言,利用结构体进行数据组织,并...
D2D 外文文献 Smart-device-to-smart-device communications D2D 外文文献 Smart-device-to-smart-device communications
smart-doc-maven-plugin是smart-doc官方团队开发的maven插件。 这个插件可以从 smart-doc 1.7.9 获得。 使用 smart-doc-maven-plugin 可以更轻松地将 smart-doc 集成到您的项目中,并且集成更轻量级。 您不再需要在...
react-native-smart-sortable-sudoku-grid, 一个智能可以排序的数独网格,用于响应原生应用程序 react-native-smart-sortable-sudoku-grid 一个智能可以排序的数独网格,用于... 它在iOS和安卓上工作。预览 安装npm i
入门指南 连接到 CPU. 21.1 组态CPU 以进行通信 211.1 概述.. 21.12 建立以太网硬件通信连接 21.1.3 与CPU建立以太网通信 建立RS485硬件通信连接 2.1.1.4 与CPU建立RS485通信 2.1.1.5 创建示例程序、 程序段1:启动...