Интерфейс бота

Интерфейс бота (англ. bot user interface, далее BotUI) – это визуальный конструктор, для создания интерфейса на основе web-технологий: HTML, CSS, Java Script. С помощью данного редактора, вы сможете, без особых знаний веб разработки, просто и быстро создавать красивый, интуитивно понятный, современный, мультиязычный интерфейс для ваших проектов! BotUI включает функционал настроек и позволяет передавать входные параметры шаблону/плагину для его последующего выполнения в ZennoPoster.

Добавить «Интерфейс бота» в проект

Для этого, необходимо нажать «Добавить» на панели статических блоков редактора проекта ProjectMaker, и в появившемся контекстном меню, выбрать «Добавить интерфейс бота», или нажав правой кнопкой мыши в любой области нижней части, вызвать контекстное меню.

Open

На панели появится соответствующая иконка, которая открывается двойным кликом мыши.

Open

Редактор интерфейса бота

Визуальный конструктор разделяется на 2 основных раздела:

Основные настройки интерфейса

• Меню

• Рабочая область

Локализация интерфейса

• Меню

• Панель элементов

- Далее, мы рассмотрим пошагово, каждый из разделов.

Раздел: Основные настройки

Меню

• Новый – создать новый интерфейс, при этом, полностью очищает основное полотно и удаляет все имеющиеся, на нем, элементы.

• Просмотр – открывает форму предварительного просмотра интерфейса, который при сохранении проекта, и добавление его в ZennoPoster, будет выглядеть аналогичным образом.

• Отменить – вернуться на шаг назад.

• Повторить – вернуться на шаг вперёд.

• Открыть код – открывает редактор исходного кода, визуального конструктора.

• Язык – переключатель между языковой-локализацией интерфейса.

• Справка – справочная информация по редактору пользовательского интерфейса.

Рабочая область

Рабочая область для создания интерфейса, состоит их 3-х частей:

1. Панель инструментов

2. Внешний вид интерфейса

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 - значение которое будет передаваться в переменную при выборе варианта.

Capcha 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 и у него не возникнет трудностей с его использованием.