自定义部件概述

使用 HTML、CSS 和 JavaScript 在 Tulip 中创建自己的小部件

拖放到应用程序中的项目称为 Widget。它们可以是按钮、图片、输入框以及工具栏上的其他任何东西。

自定义 Widget 允许您编写自己的代码并创建自己的 Widget，然后将其拖放到应用程序中并与之交互。这一功能允许 Tulip 用户拓展 Tulip 的应用范围。

观看以下概述视频，快速深入了解这一功能：

查看 Tulip 库中的自定义部件！

自定义 Widget 基础知识

自定义 Widget 管理页面位于账户设置页面。您可以在这里创建和删除部件。自定义 Widget 编辑器允许您编写 Widget 代码、创建道具和事件并预览 Widget。下图描述了什么是道具和事件：

**道具：**道具是自定义 widget 和 Tulip 应用程序之间共享的数据。道具将在应用程序编辑器中公开，并允许应用程序编辑器选择要与道具关联的变量、表记录或其他信息。

**事件：**事件是 Widget 可以发送给应用程序的信号。事件允许应用程序通过触发器做出响应，并可随附信息。

自定义 Widget 可通过 "应用程序编辑器 "中的 "自定义 "下拉选择器访问。

创建部件

Widget 编辑器屏幕分为四个部分。点击进入预览部分后，您在左下角部分编写的代码将显示在预览部分。出于测试目的，可以直接在预览部分更改道具值。

与道具和事件交互有一些特殊功能。

获取道具值

//获取道具值getValue('我的道具');/``/将道具存储到变量中let myVariable = getValue('My Prop')；

当道具发生变化时执行操作

//当道具值发生变化时采取行动getValue('我的道具', (internalVariable) => { doSomething(internalVariable);})；

设置道具的值

设置道具的值setValue('My Prop',value_to_set)；

//将文本道具的值设置为 "hello!"setValue('我的文本道具', 'hello!）

//设置对象中的一个项目的值setValue('我的对象道具', { '对象中的键': 'new value' });````

触发事件

触发事件fireEvent('event',payload)；

//fireEvent('My Event')；

//fireEvent('My Event', myVariable);``` 带有效载荷的事件。

下图说明了应用程序中自定义 widget 的信息流。输入变量数据存储到道具中。值变化会发出一个事件信号，触发器会将数据存储到输出变量中。

小部件构建视频示例

导入/导出应用程序

导出

1. 在自定义 widget 概览中，选择要导出的 widget 旁边的 3 个点。

1. 选择 "导出"。

导入

1. 在 "自定义 widget 一览 "屏幕中，选择顶部的 3 个圆点。

1. 选择 "导入"。

1. 找到 .json 自定义 widget 文件。

启用外部库

外部库进一步扩展了自定义 widget 的功能。外部库可以处理大量直接在 JavaScript 中编写 html 的脏活累活。必须为每个要使用外部库的 widget 启用外部库。

1. 在 Widget 中，点击功能区中的 3 点菜单。

{height="" width="""}

1. 选择 "启用外部库"。

1. 选择要启用的扩展。

以下是对每种扩展功能的基本描述，其中许多扩展在多个领域都有出色表现，请自由探索。

• jQuery- 可以更精简地选择 HTML 元素，并进行元素操作。
• **D3 -**数据可视化的黄金标准，学习曲线陡峭，但灵活性极高。
• **Google Visualization -**顾名思义，是实现可视化的绝佳工具。
• **javaascript-Ip-solver -**Ip solver 是一个外部库，可以处理复杂的计算以求解方程。
• **Lodash -**Lodash 提供了大量工具，让使用 javascript 数据类型变得更容易。
• **ChartJS -**最简单的图形库，提供大量在线资源。
• **Moment -**Moment 提供了大量处理日期和时间的工具。