Обзор пользовательских виджетов

Создание собственных виджетов в Tulip с помощью HTML, CSS и JavaScript

Обзор пользовательских виджетов

Создавайте собственные функции в Tulip с помощью HTML, CSS и JavaScript.
Виджеты библиотеки доступны здесь: https://tulip.co/library/?query=Widgets

Введение

Элементы, которые вы перетаскиваете в свое приложение, называются "Виджеты". Это могут быть кнопки, изображения, поля ввода и все остальное, доступное на панели инструментов.

Пользовательские виджеты позволяют вам писать свой собственный код и создавать свои собственные виджеты, которые вы можете перетаскивать в свое приложение и взаимодействовать с ними. Эта возможность позволяет пользователям Tulip расширить границы возможного в Tulip.

В этой статье мы дадим вам краткий обзор того, как работают пользовательские виджеты.

Основы работы с пользовательскими виджетами

Экран управления пользовательскими виджетами находится на странице настроек вашего аккаунта. Здесь вы можете создавать и удалять виджеты. Редактор пользовательских виджетов позволяет вам написать код виджета, создать реквизиты и события, а также предварительно просмотреть виджет. Ниже приведена диаграмма, описывающая реквизиты и события:

Реквизиты: Реквизиты - это данные, которые совместно используются пользовательскими виджетами и приложениями Tulip. Реквизиты отображаются в редакторе приложений и позволяют редакторам приложений выбирать, какие переменные, записи таблицы или другую информацию связать с реквизитом.

События: События - это сигналы, которые ваш виджет может посылать вашему приложению. События позволяют вашему приложению реагировать на них с помощью триггера и могут нести информацию вместе с ними.

Пользовательские виджеты доступны через селектор Custom down в редакторе приложений.

Создание виджета

:::(Предупреждение) (Предупреждение)
Только пользователи с доступом к настройкам учетной записи (Владельцы учетной записи) могут получить доступ к пользовательскому интерфейсу редактирования виджетов.
:::

Экран редактора виджетов разбит на четыре секции. Код, который вы пишете в левой нижней секции, появится в секции предварительного просмотра, как только вы нажмете на секцию предварительного просмотра. Значения параметров можно изменять непосредственно в разделе предварительного просмотра в целях тестирования.

Специальные функции для взаимодействия с реквизитом и событиями.

Получение значения реквизита

//Получение значения реквизита 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 точки рядом с виджетом, который вы хотите экспортировать.

{height="" width="" width=""}.

1. Выберите "Экспорт".

Импорт

1. На экране обзора пользовательских виджетов выберите 3 точки в верхней части.

{height="" width="800"}.

1. Выберите "Импорт".

{height="" width="350"}.

1. Найдите файл пользовательского виджета в формате .json.

Включение внешних библиотек

Внешние библиотеки расширяют возможности пользовательских виджетов. Внешние библиотеки выполняют большую часть грязной работы по написанию html непосредственно в JavaScript. Внешние библиотеки должны быть включены для каждого виджета, в котором вы хотите их использовать.

1. Находясь в своем виджете, нажмите на меню с тремя точками на ленте.

{height="" width=""}.

1. Выберите "Включить внешнюю библиотеку".

{height="" width="250"}.

1. Выберите расширение, которое вы хотите включить.

Здесь приведено основное описание того, что делает каждое из них, многие из них преуспевают во многих областях, так что не стесняйтесь исследовать.

• jQuery - позволяет более рационально выбирать элементы html, а также манипулировать элементами.
• D3 - золотой стандарт для визуализации данных, крутая кривая обучения, но много гибкости.
• Google Visualization - отличный инструмент для визуализации, как следует из названия.
• javaascript-Ip-solver - Ip solver - это внешняя библиотека, которая может обрабатывать сложные вычисления для решения уравнений.
• Lodash - Lodash предоставляет тонну инструментов, облегчающих работу с типами данных javascript.
• ChartJS - Простейшая библиотека для построения графиков с множеством онлайн-ресурсов.
• Moment - Moment предоставляет множество инструментов для работы с датами и временем.