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

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

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

Пользовательские виджеты позволяют вам писать собственный код и создавать собственные виджеты, которые вы можете перетаскивать в свое приложение и взаимодействовать с ними. Эта возможность позволяет пользователям Tulip расширить границы возможного в 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 точки рядом с виджетом, который вы хотите экспортировать.

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

Импорт

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

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

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

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

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

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

{height="" width=""}.

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

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

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

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