自定义小工具概述

使用HTML、CSS和JavaScript在Tulip中建立你自己的小工具

自定义小部件概述

使用HTML、CSS和JavaScript在Tulip中建立你自己的功能。
这里有库中的小工具：https://tulip.co/library/?query=Widgets

简介

你拖放到你的应用程序中的项目被称为 "Widget"。这些可以是按钮、图片、输入框，以及其他任何可以从工具栏中获得的东西。

自定义部件允许你编写自己的代码并创建你自己的部件，然后你可以拖放到你的应用程序上并与之互动。这种能力使Tulip用户能够扩展Tulip中可能存在的边界。

在这篇文章中，我们将给你一个关于自定义部件如何工作的快速概述。

自定义小工具基础知识

自定义Widget管理界面可以在你的账户设置页面找到。这是你可以创建和删除小工具的地方。自定义小工具编辑器允许您编写小工具代码，创建道具和事件，并预览您的小工具。下面是一个描述什么是道具和事件的图示。

**道具。**道具是在自定义小组件和郁金香应用程序之间共享的数据。道具将在应用程序编辑器中公开，并允许应用程序编辑器选择哪些变量、表记录或其他信息来与道具相关联。

{high="" width="550"}.

**事件。**事件是你的Widget可以向你的应用程序发送的信号。事件允许你的应用程序用一个触发器来响应，并且可以伴随着它们携带信息。

{height="" width="550"} 自定义小组件可以通过自定义小组件访问。

自定义Widget可以通过App Editor中的Custom down选择器访问。

{高度="" 宽度="800"}

创建一个小工具

::(警告) (警告)
只有能够访问账户设置的用户（账户所有者）才能访问自定义小部件编辑用户界面。
:::

小工具编辑界面被分成四个部分。你在左下角部分写的代码，一旦你点击进入预览部分，就会出现在预览部分。为了测试目的，可以在预览部分直接改变道具值。

与道具和事件互动的特殊功能。

获取道具的价值

//获取一个道具的价值 getValue('My Prop')。
//将道具存储到一个变量中 let myVariable = getValue('My Prop');

//在道具值改变时做一些事情 getValue('My Prop', (internalVariable) => { doSomething(internalVariable); });

设置一个道具的值

**设置道具的值**
setValue('My Prop',*value\_to\_set*); 


//将一个文本道具的值设置为'hello!
setValue('My Text Prop', 'hello!');


//设置对象中的一个项目的值
setValue('My Object Prop', { 'Key inside object': 'new value' });

启动一个事件

**启动一个事件**
fireEvent('event',*payload*); 


//发射一个没有有效载荷的事件
fireEvent('My Event');


//触发一个有负载的事件
fireEvent('My Event', myVariable);

小部件构建视频示例

导入/导出应用程序

导出

1. 从自定义小组件概述中，选择你想导出的小组件旁边的3个点。

1. 选择 "导出"。

导入

1. 从自定义小组件概述屏幕，选择顶部的3个点。

1. 选择 "导入"。

1. 找到.json自定义小工具文件。

启用外部库

外部库进一步扩展了自定义小组件的功能。外部库处理了许多直接在JavaScript中编写html的肮脏工作。在你想使用外部库的地方，必须为每个小组件启用外部库。

1. 在你的小工具中，点击功能区中的3点菜单。

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

{高度="" 宽度="250"}

1. 选择你想启用的扩展。

{高度="" 宽度="450"}

下面是对每个人作用的基本描述，它们中的许多人在许多方面都很出色，所以请自由探索。

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