Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

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


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

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

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

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

Обратите внимание, что данный блок не может одновременно присутствовать в проекте с блоком «Входные настройки». При добавлении «BotUI», блок «Входные настройки» удаляется! Равнозначно происходит и наоборот! Будьте внимательны и предварительно, сохраняйте входные настройки интерфейса!

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

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

Визуальный конструктор разделяется на 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-события, которое будет применено к текущему элементу.

кнопка с возможностью добавления JavaScript-события

Multiselect – выпадающий список с возможностью выбора нескольких вариантов. Варианты для выбора задаются через свойство Options, в котором Text - отображаемый текст варианта, Value - значение которое будет передаваться в переменную при выборе варианта.

Выпадающий список с возможностью выбора нескольких вариантов

Capcha Modules – выпадающий список для выбора сервиса «распознавания каптч» из доступных в ZennoPoster.

Выпадающий список для выбора сервиса распознавания каптч

Sms Service – выпадающий список для выбора сервиса «приём смс» из доступных в ZennoPoster.

Выпадающий список для выбора сервиса приёма SMS

Translate Service – выпадающий список для выбора сервиса «перевод текста» из доступных в ZennoPoster.

Выпадающий список для выбора сервиса перевод текста

Tab – контрол содержащий в себе коллекцию вкладок, вкладка может содержать в себе любые контролы кроме Tab. Коллекцию вкладок можно редактировать через свойство Tabs.

Коллекция вкладок

Language Selector – выпадающий список, для отображения той языковой-локализации интерфейса, настройки которой, указываются в разделе: «Редактор интерфейса бота» – «Локализация».

Выбор языкового интерфейса бота

Start Button – кнопка старт.

Stop Button – кнопка стоп.

Interrupt Button – кнопка прервать.

Кнопка для интерфейса бота в программе ZennoPoster

Proxy Control – контрол для настройки использования прокси из текущего проекта.

Proxy Control

Proxy Control, соответствует настройкам прокси и правила в проекте ZennoPoster.

Настройки прокси шаблона в проекте ZennoPoster

Mapper – элемент для синхронизации списков/таблиц/google таблиц текущего проекта, с плагином.

Mapper

User Control – пользовательский контроль, позволяющий добавлять в себя любые пользовательские элементы, которые можно добавить с помощью HTML кода.

User Control

Добавить элемент на интерфейс

Каждый элемент, легко перетаскивается мышкой с панели инструментов на полотно, на котором, могут располагать элементы, только в видимой области.

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

Полотно (или холст), на котором располагаются элементы будущего интерфейса.

Свойства элемента

Данная область, разделяется на 2 раздела:

  • Основные

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

  • Дополнительно

Дополнительные свойства (метаданные) элемента, которые служат, для более тонкой настройки отображения.

Пример: “Поле для ввода пароля

Настроек много, каждая из них описана в нижней области окна

Раздел: Локализация


Локализация пользовательского интерфейса также интуитивно понятна, как и сам редактор. В верхней части находится элемент меню: “Выбор языков”.

Выбрав нужный(е) вам языки, в панели “Элемент”, вы можете сделать интерфейс ещё более отзывчивым, для разных языковых групп.

Пример интерфейса в проекте ZennoPoster


Входные настройки проекта с использованием BotUI

Входные настройки проекта

Чтобы вызвать пользовательский интерфейс настроек проекта, необходимо нажать правой кнопкой мыши на проекте, в появившемся контекстом меню, выбрать “Настройки”.

Входные настройки проекта, через интерфейс бота

Вуаля! Так просто и легко, вы можете создать привлекательный, интуитивно понятный и информативный интерфейс для своего проекта/плагина, который, в последующем можете передать другому пользователю программы ZennoPoster и у него не возникнет трудностей с его использованием.

  • No labels