315 lines
19 KiB
Markdown
315 lines
19 KiB
Markdown
# МОДУЛЬ «ИНТЕРФЕЙС»
|
||
|
||
## Основные моменты
|
||
|
||
Данный модуль предназначен для создания диалоговых окон для общения с
|
||
пользователем робота. Это могут быть окна, позволяющие прикрепить файл,
|
||
ввести какие-либо данные – дату, имена, почтовые адреса и другое, с чем
|
||
впоследствии будет работать робот, или наоборот, окна, отображающие
|
||
результат работы.
|
||
|
||
Создание окна заключается в добавлении на него контролов – элементов
|
||
интерфейса таких, как надписи, текстовые поля, кнопки, выпадающие
|
||
списки.
|
||
|
||
### Основное окно
|
||
|
||
Окно модуля состоит из нескольких частей:
|
||
|
||
- Настройки окна – общие настройки диалогового окна;
|
||
|
||
- Параметры элемента интерфейса - настройка добавляемого элемента;
|
||
|
||
- Список элементов – таблица, в которой содержатся все добавленные
|
||
> элементы;
|
||
|
||
- Окно с предварительным просмотром диалогового окна на текущий момент
|
||
> (правая часть окна).
|
||
|
||
<center><img src="\media\image275.png" style="width:5.875in;height:3.42708in" /></center>
|
||
|
||
<center>Рис. 1. Основное окно модуля</center>
|
||
|
||
Начинать работу с диалоговым окном следует с общих настроек, а именно с
|
||
настройки сетки, которую можно открыть по кнопке «Настройка сетки».
|
||
|
||
## Настройки окна
|
||
|
||
К настройкам окна относится название окна – «Титул», его ширина и высота
|
||
и настройка сетки. При установке флажка «На весь экран» поля «Высота» и
|
||
«Ширина» не будут учитываться.
|
||
|
||
По нажатию на кнопку «Настройка сетки» появится окно настроек строк и
|
||
колонок сетки.
|
||
|
||
<center><img src="\media\image276.png" style="width:5.05208in;height:3.03125in" /></center>
|
||
|
||
<center>Рис. 2. Настройка сетки</center>
|
||
|
||
Сетка – это условная разметка элементов интерфейса, некоторая таблица, в
|
||
которую будут помещаться контролы. Например, если нужно создать окно, в
|
||
которое пользователь бы вводил два каких-то параметра – конечную и
|
||
начальную даты, за которые необходимо скачивать почту, то настроить
|
||
диалоговое окно для ввода этих дат можно несколькими способами:
|
||
|
||
- Первый способ
|
||
|
||
\- в две строки, 4 элемента интерфейса – на первой строке подпись и поле
|
||
для ввода начальной даты, на второй строке подпись и поле для ввода
|
||
конечной даты
|
||
|
||
<center><img src="\media\image277.png" style="width:2.59375in;height:1.709in" /></center>
|
||
|
||
<center>Рис. 3. Пример окна №1</center>
|
||
|
||
Для такой настройки сетки необходимо задать две колонки – первая, для
|
||
надписей, вторая для полей ввода, и две строки – первая для начальной
|
||
даты, вторая - для конечной.
|
||
|
||
- Второй способ
|
||
|
||
\- в одну строку, 3 элемента интерфейса – подпись, поле для ввода первой
|
||
даты, поле для ввода второй даты.
|
||
|
||
<center><img src="\media\image278.png" style="width:3.96599in;height:1.10417in" /></center>
|
||
|
||
<center>Рис. 4. Пример окна №2</center>
|
||
|
||
В таком случае используется три колонки и одна строка.
|
||
|
||
- Третий способ
|
||
|
||
\- в одну строку, 4 элемента интерфейса – два поля для ввода и подписи к
|
||
каждому из них.
|
||
|
||
<center><img src="\media\image279.png" style="width:3.66667in;height:1.2in" /></center>
|
||
|
||
<center>Рис. 5. Пример окна №3</center>
|
||
|
||
Здесь используются 4 колонки и 1 строка.
|
||
|
||
Для каждой колонки можно задать свою ширину, для каждой строки – высоту:
|
||
|
||
<center><img src="\media\image280.png" style="width:5.97761in;height:3.53356in" /></center>
|
||
|
||
<center>Рис. 6. Пример настройки сетки</center>
|
||
|
||
Высота и ширина вводятся в пикселях, но можно использовать относительные
|
||
размеры окна, например, если одна колонка должна быть больше другой в
|
||
два раза и их всего две, то в поле «Ширина» можно ввести «1\*» для
|
||
первой колонки, и «2\*» для второй:
|
||
|
||
<center><img src="\media\image281.png" style="width:4.13233in;height:1.83751in" /></center>
|
||
|
||
<center>Рис. 7. Пример использования относительных размеров</center>
|
||
|
||
Результат такой разметки:
|
||
|
||
<center><img src="\media\image282.png" style="width:6.49653in;height:0.89236in" /></center>
|
||
|
||
<center>Рис. 8. Пример разметки</center>
|
||
|
||
Нумерация строк и колонок начинается с 0. С помощью кнопки «Удалить»
|
||
можно удалить ненужную строку или колонку, по кнопке «Редактировать»
|
||
можно изменить высоту или ширину.
|
||
|
||
После настройки сетки она будет отображена пунктирной линией в окне
|
||
предварительного просмотра в правой части окна, и затем можно приступить
|
||
к добавлению контролов.
|
||
|
||
## Добавление элемента интерфейса
|
||
|
||
Для добавления на окно нового элемента необходимо заполнить поля,
|
||
представленные на рисунке 9:
|
||
|
||
<center><img src="\media\image283.png" style="width:6.38027in;height:1.84808in" /></center>
|
||
|
||
<center>Рис. 9. Поля для добавления нового элемента</center>
|
||
|
||
Обязательными полями являются все, кроме полей «Объединить
|
||
колонки/строки». Поле «Фильтр по файлам» доступно только для элемента
|
||
«Выбор файла».
|
||
|
||
### Поле «Тип»
|
||
|
||
<center><img src="\media\image284.png" style="width:2.02083in;height:1.79206in" /></center>
|
||
|
||
<center>Рис. 10. Выпадающий список с выбором типа элемента</center>
|
||
|
||
Сначала выбирается тип добавляемого элемента интерфейса из предложенных:
|
||
|
||
- Поле для ввода – поле, в которое можно ввести любую строку;
|
||
|
||
> <center><img src="\media\image285.png" style="width:1.9685in;height:0.41661in" /></center>
|
||
|
||
<center>Рис. 11. Элемент «Поле для ввода»</center>
|
||
|
||
- Надпись – статичная строка текста, которая не может быть
|
||
отредактирована пользователем;
|
||
|
||
<center><img src="\media\image286.png" style="width:1.8331in;height:0.44786in" /></center>
|
||
|
||
<center>Рис. 12. Элемент «Надпись»</center>
|
||
|
||
- Выпадающий список – поле со стрелочкой сбоку, по нажатию которого
|
||
открывается список заранее определенных значений;
|
||
|
||
> <center><img src="\media\image287.png" style="width:1.94767in;height:1.01029in" /></center>
|
||
|
||
<center>Рис. 13. Элемент «Выпадающий список»</center>
|
||
|
||
- Таблица – отображение в виде таблицы заранее созданной переменной.
|
||
Возможно редактирование полей таблицы, но невозможно создание новых
|
||
колонок в ней;
|
||
|
||
> <center><img src="\media\image288.png" style="width:2.47886in;height:1.53106in" /></center>
|
||
|
||
<center>Рис. 14. Элемент «Таблица»</center>
|
||
|
||
- Выбор даты – поле с иконкой календаря, по нажатию на которую
|
||
пользователю будет предложено выбрать определенную дату. Возможен
|
||
ввод значения даты вручную, при вводе других строк поле
|
||
автоматически подберет наиболее подходящую дату к введенным данным.
|
||
Формат даты ДД.ММ.ГГГГ;
|
||
|
||
<center><img src="\media\image289.png" style="width:2.49969in;height:2.05183in" /></center>
|
||
|
||
<center>Рис. 15. Элемент «Выбор даты»</center>
|
||
|
||
- Выбор файла – поле с иконкой в виде трех точек, по нажатию на
|
||
которую пользователю будет предложено выбрать файл. Путь до
|
||
выбранного файла запишется в это поле.
|
||
|
||
<center><img src="\media\image290.png" style="width:1.42691in;height:0.42703in" /></center>
|
||
|
||
<center>Рис. 16. Элемент «Выбор файла»</center>
|
||
|
||
Для фильтрации отображаемых пользователю файлов можно воспользоваться
|
||
полем «Фильтр по файлам», в которое вводится строка вида: «Название типа
|
||
файлов (доступные расширения)\|доступные расширения». Можно задать
|
||
несколько настроек фильтрации, разделителем для этого является символ
|
||
«\|». Пример:
|
||
|
||
В данном случае отображается две настройки фильтрации:
|
||
|
||
1. All files (\*.\*), в которой отображаются файлы с любым расширением;
|
||
|
||
2. Microsoft Excel Worksheet (\*.xl\*; \*.csv), в которой отображаются
|
||
файлы с расширениями .csv и начинающимися на .xl (то есть .xlsx, xls
|
||
и другие).
|
||
|
||
<center><img src="\media\image291.png" style="width:4.29355in;height:0.61458in" /></center>
|
||
|
||
- Выбор папки – поле с иконкой в виде трех точек, по нажатию на
|
||
которую пользователю будет предложено выбрать папку. Путь до
|
||
выбранной папки запишется в это поле. Выглядит так же, как и «Выбор
|
||
файла».
|
||
|
||
### Поле «Источник данных»
|
||
|
||
В это поле вводится название переменной или строка, на основе которой
|
||
контрол будет заполнен. Немного поподробнее о поле при выборе различных
|
||
элементов интерфейса:
|
||
|
||
- Для типа элемента «Надпись» туда вводится значение, которое должно
|
||
быть отображено в выводимой надписи;
|
||
|
||
- Для «Поле для ввода», «Выбор даты», «Выбор файла» и «Выбор файла»
|
||
вводится значение, которое сразу будет указано в поле, если это
|
||
необходимо. Если поле должно быть пустым, то не надо заполнять
|
||
«Источник данных»;
|
||
|
||
- Для «Таблицы» необходимо подать заполненную табличную переменную для
|
||
её отображения;
|
||
|
||
- Для элемента интерфейса «Выпадающий список» необходимо передать
|
||
набор значений, которые пользователю будет предложено выбрать.
|
||
Делается это через символ «;». Это могут быть строки,
|
||
переменные-элементы, переменные-списки или табличные переменные,
|
||
состоящие из одного столбца. Например, введено следующее значение,
|
||
при приведенных далее примерах заполнения переменных:
|
||
|
||
<center><img src="\media\image292.png" style="width:3.64538in;height:0.87489in" /></center>
|
||
|
||
<center>Рис. 17. Пример заполнения поля «Источник данных»</center>
|
||
|
||
<center><img src="\media\image293.png" style="width:3.17583in;height:2.21733in" /></center>
|
||
|
||
<center><img src="\media\image294.png" style="width:3.14286in;height:3.14286in" /></center>
|
||
|
||
<center>Рис. 18. Примеры заполнения используемых переменных</center>
|
||
|
||
Результат будет выглядеть следующим образом:
|
||
|
||
<center><img src="\media\image295.png" style="width:1.53106in;height:1.47898in" /></center>
|
||
|
||
<center>Рис. 19. Пример результирующих данных</center>
|
||
|
||
### Поля «Колонка» и «Строка»
|
||
|
||
В эти поля необходимо ввести номер колонки и строки сетки (таблицы), в
|
||
которых должен располагаться добавляемый контрол. Например, в примере с
|
||
датами (Рис. 9.30.2) контрол «Надпись» - «Начальная дата» располагается
|
||
в 0 колонке и 0 строке, а надпись «Конечная дата» - в 0 колонке и 1
|
||
строке.
|
||
|
||
### Поля «Объединить колонки» и «Объединить строки»
|
||
|
||
В некоторых случаях необходимо выводить поля не в конкретной клеточке
|
||
сетки, а в объединении нескольких клеток. Например – нужно предложить
|
||
пользователю выбрать Excel-файл для записи в него результатов и ввести
|
||
начальную и конечную дату, по которым будут собираться некоторые данные.
|
||
Хотелось бы объединить это в две строки, но для ввода даты нужно как
|
||
минимум 2 поля, а поле для выбора файла – одно.
|
||
|
||
<center><img src="\media\image296.png" style="width:4.62338in;height:1.84784in" /></center>
|
||
|
||
<center>Рис. 20. Пример окна без объединения колонок</center>
|
||
|
||
Для того, чтобы растянуть поле для выбора файла по длине полей для ввода
|
||
даты, нам необходимо разместить его не просто в 1 колонке и 0 строке, но
|
||
и объединить для него две колонки, чтобы оно занимало сразу обе:
|
||
|
||
<center><img src="\media\image297.png" style="width:5.8961in;height:1.67376in" /></center>
|
||
|
||
<center>Рис. 21. Пример заполнения полей элемента интерфейса для настройки
|
||
объединения колонок</center>
|
||
|
||
<center><img src="\media\image298.png" style="width:4.54435in;height:1.81458in" /></center>
|
||
|
||
<center>Рис. 22. Пример окна с объединенными колонками в первой строке сетки</center>
|
||
|
||
То есть при заполнении поля «Объединить колонки» колонки, начиная с той,
|
||
что указана в поле «Колонка», будут объединены по горизонтали в одну.
|
||
|
||
Аналогично с полем «Объединять строки» - указанное количество строк,
|
||
начиная с той, что указана в поле «Строка», будут объединены в одну:
|
||
|
||
<center><img src="\media\image299.png" style="width:4.57639in;height:1.83056in" /></center>
|
||
|
||
<center>Рис. 23.. Пример окна с объединенными строками в первой колонке сетки</center>
|
||
|
||
### Поле «Переменная»
|
||
|
||
В это поле вводится название переменной, в которую будет записано
|
||
значение, введенное (для выпадающего списка – выбранное) пользователем.
|
||
Является обязательным полем для всех типов контролов, кроме «Надписи».
|
||
|
||
После заполнения всех полей необходимо нажать на кнопку «Добавить».
|
||
После нажатия на нее элемент сразу отобразиться в окне предпросмотра в
|
||
правой части окна.
|
||
|
||
<center><img src="\media\image300.png" style="width:6.69306in;height:3.87584in" /></center>
|
||
|
||
<center>Рис. 24. Пример заполненного окна модуля «Интерфейс»</center>
|
||
|
||
По кнопке «Предпросмотр» откроется диалоговое окно в таком виде, в
|
||
котором оно будет представлено пользователю.
|
||
|
||
Удалить или отредактировать элемент можно, предварительно выбрав его в
|
||
области «Список элементов», а затем нажав на соответствующую кнопку,
|
||
находящуюся над списком с элементами.
|
||
|
||
После добавления всех необходимых контролов нужно нажать кнопку
|
||
«Сохранить» в правой нижней части окна.
|