13.4 Создание элементов

Создание элементов - одна из главных возможностей, которую предлагают плагины Bubble. Используя Javascript вы можете создать новый опыт взаимодействия для конечного пользователя, и позволить пользователям плагина использовать визуальный редактор для добавления элементов на страницу, отображения динамических данных и т.д.

Создание элемента требует понимания работы элементов в Bubble, различных полей, которые в них используются и т.д. Обратите внимание, что создание элементов требует знаний Javascript и веб-разработки. Мы рекомендуем обратиться на форум за помощью, если вам нужно руководство при создании нового плагина. Простую реализацию вы можете увидеть здесь (!!!ЛНК!!!).

Добавление элементов в плагин

В плагине может быть любое количество элементов. Элементы добавляются с помощью кнопки "Add a new element", после чего вы перемещаетесь по списку элементов и кликаете по подходящему элементу (или подраздел) на левой панели.

Тестирование плагина

Элементы должны тестироваться и в режиме Редактора и в режиме работы. В режиме редактора происходит тестирование того, как отображаются изменения, внесенные в Редакторе свойств, а в режиме работы вы будете тестировать в основном работу вашего кода. Также нужно добавить плагин в ваше приложение и протестировать плагин, нажав на тестовую кнопку. Если плагин еще не установлен в вашем тестовом приложении, то он будет добавлен. Также хорошей привычкой является оставлять тестовое приложение открытым, тогда клик по кнопке "Go to test app"/"Перейти в тестовое приложение" обновит существующую вкладку и загрузит последнюю версию плагина.

Создание элемента

Определение основных свойств

Первое, что нужно сделать при создании элемента - задать его свойства Режима Редактора (Edit Mode), которые определяют поведения элемента в редакторе. В частности, вам нужно выбрать имя, категорию, иконку и изображение-заглушку (запуск кода элемента в редакторе невозможен, поэтому вам нужно изображение, которым будет представлен элемент).

После этого вы будете выбирать свойства, применяемые к элементу и задавать поля, которые будет заполнять пользователь при использовании элемента в своем приложении. Первыми из них настраиваются стандартные свойства Bubble с простыми CSS параметрами. Вы можете выбрать свойства фона, размеры, границы и т.д., которые применяются к внешнему тэгу div. Эти свойства не являются обязательными, можно создать элемент и без их использования (кроме координат и размеров: если вы хотите, чтобы у элемента маг меняться размер, выберите пункт "Resizable")

Определение полей

В следующем разделе вы можете задать поля. Поле - это свойство, которое пользователь задает в Редакторе свойств. Поле определяется именем, подписью и типом редактирования.

У вас есть несколько типов редактирования:

• Static Text, Static Nimber: простое поле, в котором можно что-то напечатать

• Checkbox: флажок, который при работе возвращает значение да/нет

• Color: отображает панель выбора цвета, и значением будет RGBA код выбранного цвета

• Dropdown: используется, если вы хотите предоставить пользователю выбор из набора вариантов. Для задания набора нужно ввести различные варианты через запятую в предоставленное ввода.

• Static Image: позволяет пользователю загрузить изображение.

• Dynamic Value: у пользователя отобразится панель, в которой он сможет задать динамическое выражение с помощью Конструктора выражений. Вам нужно определить тип данных, который ожидается Редактором от этой панели (текст, число, адрес и т.д.). Данные также могут быть списком, если вы поставите соответствующую отметку.

• App Type: это особый тип, в котором пользователю нужно задать тип данных, который будет использоваться элементом. Например, для элемента карты вам может понадобиться поле, которое будет называться "Тип маркера", а пользователи будут выбирать один из предложенных типов. После того, как вы задали такое поле, в элементе вы сможете задать поле, в котором пользователю будет предложено выбрать тип поля. Например, в случае с картой вам нужно будет, чтобы пользователь определил, в каком поле содержится адрес. Так как вам нужно знать тип данных поля, вы можете ограничить типы полей, чтобы они показывали только адреса.

Прим. пер. Проще зайти в Bubble и потыкать руками, чтобы понять, что такое App Type. Даже на английском приходит мало понимания.

Поле может быть необязательным (и, следовательно, не будет отмечаться пропущенным в Редакторе свойств) и "In style". Если здесь поставить флажок, то когда пользователь будет задавать стиль в вашего элемента в Редакторе Bubble, это поле будет в него включено. Обычно в стиль включаются цвета и другие визуальные опции, а источники данных - нет.

Определение состояний

Состояния позволяют передавать данные из одних элементов в другие элементы или действия в Редакторе приложения. Например, у поля ввода может быть значение, у карты может быть "выбранный маркер" и т.д. Вам нужно объявить различные состояния, в которые можно передавать данные, тогда как ваш код будет отвечать за то, чтобы состояния сохраняли нужное значение. Для каждого состояния нужно задать тип данных, чтобы Bubble понимал, как интерпретировать значение в редакторе.

События и действия

События и Действия - это способ, которым ваш элемент может запустить рабочий процесс или сам измениться под действием другого рабочего процесса.

Ваш элемент может запускать события. Для того, чтобы ваш элемент запускал событие, например по клику на него, вам нужно объявить различные события, которые может запускать ваш элемент, благодаря чему Bubble сможет сформировать соответствующий список во вкладке Процессы. Затем ваш код будет запускать эти события (см ниже).

Наконец, к элементам могут быть прикреплены некоторые действия. Например, сброс данных карты, чтобы убрать все метки и т.д. Опять же, сами действия будут созданы на Javascript, а вам нужно будет задать их имена и различные поля, которые в них применяются. Объявление полей аналогично объявлению полей элемента.

Код

После объявления этой различной информации вы можете переходить к коду ваших элементов. Это происходит в нижней части редактора. Для каждой функции вы увидите редактор кода и документацию, в которой отображены различные объекты, которыми вы можете управлять в этой функции. В частности, объект instance будет представлять элемент, а объект context предоставит доступ к вспомогательным данным, таким как текущий пользователь, функция загрузки файлов и т.д.

Элемент определяется несколькими функциями. Функция initialize вызывается, когда элемент на странице становится видимым. Она запускается однажды для каждого экземпляра. Функция update запускается в момент изменения свойств элемента. Эта функция может запускаться многократно, и ваш код должен следить, что именно изменилось, чтобы избежать ненужных срабатываний. Действия представляются с помощью run action. (????) Подробности касаемо загрузки данных и отличий асинхронного и синхронного кода см ниже.

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