- Распечатать
Создание собственных виджетов в 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);
Пример сборки виджета видео
Импорт/экспорт приложений
Экспорт
- В обзоре пользовательских виджетов выберите 3 точки рядом с виджетом, который вы хотите экспортировать.
{height="" width="" width=""}.
- Выберите "Экспорт".
Импорт
- На экране обзора пользовательских виджетов выберите 3 точки в верхней части.
{height="" width="800"}.
- Выберите "Импорт".
{height="" width="350"}.
- Найдите файл пользовательского виджета в формате .json.
Включение внешних библиотек
Внешние библиотеки расширяют возможности пользовательских виджетов. Внешние библиотеки выполняют большую часть грязной работы по написанию html непосредственно в JavaScript. Внешние библиотеки должны быть включены для каждого виджета, в котором вы хотите их использовать.
- Находясь в своем виджете, нажмите на меню с тремя точками на ленте.
{height="" width=""}.
- Выберите "Включить внешнюю библиотеку".
{height="" width="250"}.
- Выберите расширение, которое вы хотите включить.
Здесь приведено основное описание того, что делает каждое из них, многие из них преуспевают во многих областях, так что не стесняйтесь исследовать.
- jQuery - позволяет более рационально выбирать элементы html, а также манипулировать элементами.
- D3 - золотой стандарт для визуализации данных, крутая кривая обучения, но много гибкости.
- Google Visualization - отличный инструмент для визуализации, как следует из названия.
- javaascript-Ip-solver - Ip solver - это внешняя библиотека, которая может обрабатывать сложные вычисления для решения уравнений.
- Lodash - Lodash предоставляет тонну инструментов, облегчающих работу с типами данных javascript.
- ChartJS - Простейшая библиотека для построения графиков с множеством онлайн-ресурсов.
- Moment - Moment предоставляет множество инструментов для работы с датами и временем.