- 打印
使用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);
小部件构建视频示例
导入/导出应用程序
导出
- 从自定义小组件概述中,选择你想导出的小组件旁边的3个点。
- 选择 "导出"。
导入
- 从自定义小组件概述屏幕,选择顶部的3个点。
- 选择 "导入"。
- 找到.json自定义小工具文件。
启用外部库
外部库进一步扩展了自定义小组件的功能。外部库处理了许多直接在JavaScript中编写html的肮脏工作。在你想使用外部库的地方,必须为每个小组件启用外部库。
- 在你的小工具中,点击功能区中的3点菜单。
- 选择 "启用外部库"。
{高度="" 宽度="250"}
- 选择你想启用的扩展。
{高度="" 宽度="450"}
下面是对每个人作用的基本描述,它们中的许多人在许多方面都很出色,所以请自由探索。
- jQuery- 可以更精简地选择html元素,同时还可以进行元素操作。
- **D3 -**数据可视化的黄金标准,学习曲线很陡峭,但有大量的灵活性。
- **Google Visualization -**一个伟大的工具,顾名思义,用于做可视化。
- **javaascript-Ip-solver -**Ip solver是一个外部库,可以处理复杂的计算来解决方程。
- **Lodash -**Lodash提供了大量的工具,使得使用javascript数据类型更加容易。
- **ChartJS -**关于最简单的图形库,有大量的在线资源。
- **Moment -**Moment提供了大量的工具来处理日期和时间。