自定义小工具概述
  • 17 Sep 2022
  • 1 分钟阅读
  • 贡献者

自定义小工具概述


Article Summary

使用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提供了大量的工具来处理日期和时间。

本文对您有帮助吗?