`
arest
  • 浏览: 21625 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

在三星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

 

  1. 实现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> 应用在播放视频的时候会遇到下面的问题:
  1. 如果视频数通过HDMI播放(比如DVD),当应用程序执行来源切换的时候声音会混淆(Youtube)。
  2. 由于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

 

  1. 实现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>

  1. 实现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文件。

  1. 实现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;
}

  1. 响应遥控器事件

用户可以在点击遥控器的时候改变屏幕上显示的文字。首先需要在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

0
0
分享到:
评论

相关推荐

    vue-smart-widget-智能小部件是Vue.js 2.x的灵活且可扩展的内容容器组件。-Vue.js开发

    vue-smart-widget智能小部件是一个灵活且可扩展的内容容器组件。 它包括标题和正文部分,而小部件主体包括edi vue-smart-widget。智能小部件是一种灵活且可扩展的内容容器组件。 它包括页眉和正文部分,小部件正文...

    基于Java的smart-doc-maven-plugin官方maven插件设计源码

    本项目是基于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概述 Smart TV是指...

    json-smart-2.3-API文档-中文版.zip

    赠送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-...

    Python库 | smart_open-1.3.1-py2-none-any.whl

    smart_open库最初由Apache Hadoop社区的成员开发,其设计目标是为处理大型文件(如TB级)提供方便,尤其在HDFS(Hadoop Distributed File System)和其他分布式文件系统上。它支持多种打开模式,包括读、写和追加,...

    IPSO-Smart-Objects-Expansion-Pack.pdf

    在开始详细解释之前,我们首先要了解几个关键术语,以及这些术语在整个文档中的含义。 首先,“IPSO”代表“Internet Protocol for Smart Objects”,也就是智能对象的互联网协议。该协议的目标是为内存大小为16KB...

    json-smart-2.4.7-API文档-中文版.zip

    赠送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...

    accessors-smart-1.2-API文档-中文版.zip

    赠送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文档...

    accessors-smart-2.4.7-API文档-中文版.zip

    赠送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-8 程序合集 S7-200 Smart入门笔记1——流水灯 按钮 S7-200 Smart入门笔记1——流水灯 定时器 S7-200 Smart入门笔记2——读时钟 S7-200 Smart入门笔记3——呼吸灯 S7-200 Smart入门笔记4——...

    smart-doc-maven-plugin-maven资源

    smart-docmaven

    S7-200Smart 经典案例(入门篇).rar

    《S7-200Smart 经典案例(入门篇)》这个压缩包文件是针对初学者设计的一份宝贵资源,旨在帮助用户深入了解并掌握西门子S7-200Smart系列PLC的基本操作和编程技巧。PLC,全称可编程逻辑控制器,是一种在工业自动化...

    S7-200SMART-PC-ACCESS-V2.3安装包-链接地址.txt

    S7-200SMART_PC_ACCESS_V2.3安装包

    S7-200 SMART编程示例.smart

    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...

    accessors-smart-1.2-API文档-中英对照版.zip

    赠送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--入门篇

    STF,全称为Smart Test Framework,是一个用于自动化测试的开源框架,特别适合移动设备的测试。作为初学者,想要快速入门STF,首先要理解它的核心概念和基本功能。STF结合了C++编程语言,利用结构体进行数据组织,并...

    Smart-device-to-smart-device communications

    D2D 外文文献 Smart-device-to-smart-device communications D2D 外文文献 Smart-device-to-smart-device communications

    java写qq源码-smart-doc-maven-plugin:用于smart-docapi文档生成工具的maven插件

    smart-doc-maven-plugin是smart-doc官方团队开发的maven插件。 这个插件可以从 smart-doc 1.7.9 获得。 使用 smart-doc-maven-plugin 可以更轻松地将 smart-doc 集成到您的项目中,并且集成更轻量级。 您不再需要在...

    react-native-smart-sortable-sudoku-grid, 一个智能可以排序的数独网格,用于响应原生应用程序.zip

    react-native-smart-sortable-sudoku-grid, 一个智能可以排序的数独网格,用于响应原生应用程序 react-native-smart-sortable-sudoku-grid 一个智能可以排序的数独网格,用于... 它在iOS和安卓上工作。预览 安装npm i

    s7-200-SMART-V2.5-应用手册.pdf

    入门指南 连接到 CPU. 21.1 组态CPU 以进行通信 211.1 概述.. 21.12 建立以太网硬件通信连接 21.1.3 与CPU建立以太网通信 建立RS485硬件通信连接 2.1.1.4 与CPU建立RS485通信 2.1.1.5 创建示例程序、 程序段1:启动...

Global site tag (gtag.js) - Google Analytics