Интерфейс бота (англ. bot user interface, далее BotUI) – это визуальный конструктор, для создания интерфейса на основе web-технологий: HTML, CSS, Java Script. С помощью данного редактора, вы сможете, без особых знаний веб разработки, просто и быстро создавать красивый, интуитивно понятный, современный, мультиязычный интерфейс для ваших проектов! BotUI включает функционал настроек и позволяет передавать входные параметры шаблону/плагину для его последующего выполнения в ZennoPoster.
...
Добавить «Интерфейс бота» в проект
Для этого, необходимо нажать «Добавить» на панели статических блоков редактора проекта ProjectMaker, и в появившемся контекстном меню, выбрать «Добавить интерфейс бота», или нажав правой кнопкой мыши в любой области нижней части, вызвать контекстное меню.
...
На панели появится соответствующая иконка, которая открывается двойным кликом мыши.
...
| Info |
|---|
Обратите внимание, что данный блок не может одновременно присутствовать в проекте с блоком «Входные настройки». При добавлении «BotUI», блок «Входные настройки» удаляется! Равнозначно происходит и наоборот! Будьте внимательны и предварительно, сохраняйте входные настройки интерфейса! |
Редактор интерфейса бота
...
Визуальный конструктор разделяется на 2 основных раздела:
Основные настройки интерфейса
Меню
Рабочая область
Локализация интерфейса
Меню
Панель управления
- Далее, мы рассмотри пошагово, каждый из разделов.
Раздел: Основные настройки
...
Меню
...
Новый – создать новый интерфейс, при этом, полностью очищает основное полотно и удаляет все имеющиеся, на нем, элементы.
Просмотр – открывает форму предварительного просмотра интерфейса, который при сохранении проекта, и давление его в ZennoPoster, будет выглядеть аналогичным образом.
Отменить – вернуться на шаг назад.
Повторить – вернуться на шаг вперёд.
Открыть код – открывает редактор исходного кода, визуального конструктора.
Язык – переключатель между языковой-локализацией интерфейса.
Справка – справочная информация по редактору пользовательского интерфейса.
Рабочая область
...
Рабочая область для создания интерфейса, состоит их 3-х частей:
Панель инструментов
Внешний вид интерфейса
Свойства элемента
Слева панель инструментов с различными элементами: формы для ввода текста, выбор между вариантами, дополнительные модули и сервисы, кнопки, чекбоксы и другие элементы (каждый разберем ниже), которые позволяют строить привлекательный, интуитивно понятный клиентский интерфейс. В центре макет ваших будущих входных настроек (полотно), на которое вы можете перетаскивать нужные вам элементы из панели инструментов слева и располагать их нужным вам образом. А справа панель с настройками свойств, того или иного элемента, где можно указать цвет, шрифт, переменную в которую будет попадать значение из этого элемента и много других настроек, о которых мы ещё расскажем.
Панель инструментов
Text –обычный текст для пометок на полотне.
...
Textbox – поле для ввода однострочного текста.
...
Password –поле для ввода пароля (отличается от Textbox тем, что визуально символы заменяются на кружочки).
...
Number – поле, в котором можно указать только целочисленное значение.
...
Boolean – чекбокс, может принимать значение true или false.
...
TextArea – поле для ввода многострочного текста.
...
Select – выпадающий список. Варианты для выбора задаются через свойство “Options”, в котором “Text” - отображаемый текст варианта, “Value” - значение которое будет передаваться в переменную при выборе варианта.
...
Radio – группа из радиокнопок. Варианты для выбора задаются через свойство “Options”, в котором “Text” – отображаемый текст варианта, “Value” - значение которое будет передаваться в переменную при выборе варианта.
...
Filename – поле для ввода пути к файлу. Значение по умолчанию указывается через свойство FilePath, в ZennoPoster значение устанавливается через диалоговое окно, вызываемое по нажатию кнопки […].
...
Button – кнопка, с возможностью добавления JavaScript-события, которое будет применено к текущему элементу.
...
Multiselect – выпадающий список с возможностью выбора нескольких вариантов. Варианты для выбора задаются через свойство Options, в котором Text - отображаемый текст варианта, Value - значение которое будет передаваться в переменную при выборе варианта.
...
Captcha Modules – выпадающий список для выбора сервиса «распознавания каптч» из доступных в ZennoPoster.
...
Sms Service – выпадающий список для выбора сервиса «приём смс» из доступных в ZennoPoster.
...
Translate Service – выпадающий список для выбора сервиса «перевод текста» из доступных в ZennoPoster.
...
Tab – контрол содержащий в себе коллекцию вкладок, вкладка может содержать в себе любые контролы кроме Tab. Коллекцию вкладок можно редактировать через свойство Tabs.
...
Language Selector – выпадающий список, для отображения той языковой-локализации интерфейса, настройки которой, указываются в разделе: «Редактор интерфейса бота» – «Локализация».
...
Start Button – кнопка старт.
Stop Button – кнопка стоп.
Interrupt Button – кнопка прервать.
...
Proxy Control – контрол для настройки использования прокси из текущего проекта.
...
Proxy Control, соответствует настройкам прокси и правила в проекте ZennoPoster.
...
Mapper – элемент для синхронизации списков/таблиц/google таблиц текущего проекта, с плагином.
...
User Control – пользовательский контрол, позволяющий добавлять в себя любые пользовательские элементы, которые можно добавить с помощью HTML кода.
...
Добавить элемент на интерфейс
Каждый элемент, легко перетаскивается мышкой с панели инструментов на полотно, на котором, могут располагать элементы, только в видимой области.
...
Внешний вид интерфейса
Полотно (или холст), на котором располагаются элементы будущего интерфейса.
...
Свойства элемента
Данная область, разделяется на 2 раздела:
Основные
...
При нажатие на элемент (который располагается на полотне), в окне свойств, появляются параметры, в которые можно указать значения: шрифт, размер шрифта, цвет текста и пр. Каждый элемент имеет свои уникальный параметры, описание которых, можно посмотреть ниже в том же окне.
Дополнительно
...
Дополнительные свойства (метаданные) элемента, которые служат, для более тонкой настройки отображения.
Пример: “Поле для ввода пароля”
...
Настроек много, каждая из них описана в нижней области окна
Раздел: Локализация
...
Локализация пользовательского интерфейса также интуитивно понятна, как и сам редактор. В верхней части находится элемент меню: “Выбор языков”.
...
Выбрав нужный(е) вам языки, в панели “Элемент”, вы можете сделать интерфейс ещё более отзывчивым, для разных языковых групп.
Пример интерфейса в проекте ZennoPoster
...
Входные настройки проекта с использованием BotUI
...
Чтобы вызвать пользовательский интерфейс настроек проекта, необходимо нажать правой кнопкой мыши на проекте, в появившемся контекстом меню, выбрать “Настройки”.
...
Вуаля! Так просто и легко, вы можете создать привлекательный, интуитивно понятный и информативный интерфейс для своего проекта/плагина, который, в последующем можете передать другому пользователю программы ZennoPoster и у него не возникнет трудностей с его использованием.