ThingsBoard 3.0 部件库之自定义部件开发

最近想学习下TB的部件开发，做一个简单的跑马灯组件，于是看了下官方文档，结合第三方组件实现一个简单的demo，在此记录下过程。

话不多说，先上效果图。

前言

ThingsBoard小部件是其他UI模块，可以轻松集成到任何IoT Dashboard中。它们提供了最终用户功能，例如数据可视化，远程设备控制，警报管理以及静态自定义html内容的显示。根据提供的功能，每个窗口小部件定义代表一个特定的窗口小部件类型。

部件编辑器分为四部分：

1. 资源/ HTML / CSS窗口。（可在资源窗口cdn引入外部资源）
2. JavaScript窗口（Widget API的所有与窗口小部件相关的JavaScript代码）
3. 设置窗口。（用于为使用react-schema-form builder生成的UI表单自动指定小部件设置的json模式。生成的UI表单显示在窗口小部件设置的“ 高级”选项卡中。通过此模式序列化的Settings对象用于存储特定的窗口小部件设置，并且可以从窗口小部件JavaScript代码访问）
4. 小部件预览窗口。（预览部件）
   
   所有与小部件相关的代码都位于JavaScript部分。还提供了对小部件实例的引用的内置变量self。每个小部件函数都应定义为自变量的属性。 self变量的ctx属性类型为WidgetContext-对窗口小部件上下文的引用，其中包含窗口小部件实例使用的所有必需的API和数据。
   部件API参考地址：widget api文档

开发第一个部件

介绍完部件编辑器后，我们开始第一个部件：marquee组件的开发。

新增部件

1. 进入部件包，点击右下角 “+” 图标，点击 “创建新的部件类型”。
2. 选择静态部件。
   
3. 进入部件编辑器后，安装下面步骤初始化组件，完成后保存。
   

设置资源/ HTML / CSS

1. 资源
   由于marquee组件使用了第三方组件，因此需要cdn引入。点击添加，添加marquee组件的cdn地址即可。
   

2. HTML

<div class="card">
    <div class="card-header card-header-info">
        <div class="demo">
            <h4 class="card-title">
                1、allowCss3Support: 是否使用CSS3动画。
                2、direction: 跑马灯动画的方向。
                3、duplicated: 是否复制文本。
                4、speed: 加载速度。
                5、gap: tickers之间的间隙。
                6、pauseOnHover: 在hover时暂停跑马灯。
                7、在循环结束，暂停跑马灯delayBeforeStart毫秒。
            </h4>

        </div>
    </div>
    <div class="card-body">
        <p class="card-category">
            <span class="text-success">
              <i class="fa fa-spinner fa-spin fa-lg fa-fw" style="color:red">
              </i> 7 
            </span> 
            Marquee Options.
        </p>
        <div class="marquee-container">
            <table>
                <tr>
                    <td><img src="your image path">
                    </td>
                    <td><img src="your image path">
                    </td>
                    <td><img src="your image path">
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="card-footer">
        <div class="stats">
            <i class="material-icons">access_time</i>
            updated 4 minutes ago
        </div>
    </div>
</div>

3. CSS

.marquee-container {
    overflow: hidden;
}

.marquee-container img {
    max-height: 120px;
    height: 120px;
    width: 92%;
}

.demo {
    max-height: 10px;
    height: 10px;
    width: 92%;
}

设置 JavaScript

self.onInit = function() {
    var allowCss3Support = self.ctx.settings
        .allowCss3Support || true;
    var delayBeforeStart = self.ctx.settings
        .delayBeforeStart || 0;
    var direction = self.ctx.settings.direction ||
        "left";
    var duplicated = self.ctx.settings.duplicated ||
        true;
    var speed = self.ctx.settings.speed || 200;
    var gap = self.ctx.settings.gap || 50;
    var pauseOnHover = self.ctx.settings.pauseOnHover ||
        true;
    var pauseOnCycle = self.ctx.settings.pauseOnCycle ||
        0;
    $('.marquee-container').marquee({
        allowCss3Support: allowCss3Support,
        delayBeforeStart: delayBeforeStart,
        direction: direction,
        duplicated: duplicated,
        speed: speed,
        gap: gap,
        pauseOnHover: pauseOnHover,
        pauseOnCycle: pauseOnCycle
    });
    $('.demo').marquee({
        direction: 'left',
        speed: 100
    });
}

设置 Settings

部件代码完成后，可以预览查看效果，但是marquee组件的属性还不能自定义配置，因此我们需要通过Settings窗口设置组件的属性，用来绑定到marquee组件。
Settings schema配置如下：

{
    "schema": {
        "type": "object",
        "title": "Settings",
        "properties": {
            "allowCss3Support": {
                "title": "是否开启浏览器支持CSS3动画，默认true",
                "type": "boolean",
                "default": true
            },
            "delayBeforeStart": {
                "title": "开始动画的延迟时候，单位毫秒，默认为1000",
                "type": "integer",
                "default": 0
            },
            "direction": {
                "title": "跑马灯动画的方向。 'left' / 'right' / 'up' / 'down'",
                "type": "string",
                "default": "left"
            },
            "duplicated": {
                "title": "是否复制文本。默认为false",
                "type": "boolean",
                "default": true
            },
            "speed": {
                "title": "动画的加载速度，单位毫秒，默认为1000。",
                "type": "integer",
                "default": 300
            },
            "gap": {
                "title": "tickers之间的间隙。单位像素，默认为20",
                "type": "integer",
                "default": 50
            },
            "pauseOnHover": {
                "title": "在hover时暂停跑马灯。",
                "type": "boolean",
                "default": true
            },
            "pauseOnCycle": {
                "title": "在循环结束，暂停跑马灯delayBeforeStart毫秒。",
                "type": "integer",
                "default": 0
            }
        }
    },
    "form": [
        "allowCss3Support",           
        "delayBeforeStart",
        "direction",
        "duplicated",
        "speed",
        "gap",
        "pauseOnHover",
        "pauseOnCycle"
        
    ]
}

Setting Schema是基于react-schema-form构建的，在线构建地址：react-schema-form

预览部件

运行部件后，可以在预览窗口看到部件的运行效果，并且可以进入编辑模式，点击高级，查看自定义的配置项，从而进行设置部件的运行效果。

结语

部件开发的方式分在线开发和本地开发。本次学习选择了在线开发，这种方式的优点是开发速度快，比较直观，缺点是如果组件的逻辑过多，就不适用了，毕竟每次开发组件都要写这些繁琐的HTML、CSS和Javascript。相反，本地开发的速度较慢，需要在前端工程里面使用angular封装好组件，组件的参数项可以使用TS的Class类包装好，然后在在线编辑器引用ng组件。