# <H1 align="center">Модуль «Интерфейс»</h1> 

<p> Данный модуль предназначен для создания диалоговых окон для общения с пользователем робота. Это могут быть окна, позволяющие прикрепить файл, ввести какие-либо данные – дату, имена, почтовые адреса и другое, с чем впоследствии будет работать робот, или наоборот, окна, отображающие результат работы.</p> 
<p> Создание окна заключается в добавлении на него контролов – элементов интерфейса таких, как надписи, текстовые поля, кнопки, выпадающие списки.</p> 

## Основное окно
<p> Окно модуля состоит из нескольких частей:
<p> •	Добавить элемент - настройка добавляемого элемента;
<p> •	Общие настройки – общие настройки диалогового окна;
<p> •	Список элементов – таблица, в которой содержатся все добавленные элементы;
<p> •	Окно с предварительным просмотром диалогового окна на текущий момент (правая часть окна). 
<H1 align="center">![Screenshot](img/interface_1.png)</h1> 
<p> Начинать работу с диалоговым окном следует с общих настроек, а именно с настройки сетки, которую можно открыть по кнопке «Настройка сетки». 
## Общие настройки
<p> К общим настройкам относится название окна – «Титул», его ширина и высота и настройка сетки. При установке флажка «На весь экран» поля «Высота» и «Ширина» не будут учитываться.
<p> По нажатию на кнопку «Настройка сетки» появится окно настроек строк и колонок сетки.
<H1 align="center">![Screenshot](img/interface_2.png)</h1> 
<p> Сетка – это условная разметка элементов интерфейса, некоторая таблица, в которую будут помещаться контролы. Например, если нужно создать окно, в которое пользователь бы вводил два каких-то параметра – конечную и начальную даты, за которые необходимо скачивать почту, то настроить диалоговое окно для ввода этих дат можно несколькими способами:
<p> •	Первый способ
<p> В две строки, 4 элемента интерфейса – на первой строке подпись и поле для ввода начальной даты, на второй строке подпись и поле для ввода конечной даты
<H1 align="center">![Screenshot](img/interface_3.png)</h1> 
<p> Для такой настройки сетки необходимо задать две колонки – первая, для надписей, вторая для полей ввода, и две строки – первая для начальной даты, вторая - для конечной.
<p> •	Второй способ
<p> В одну строку, 3 элемента интерфейса – подпись, поле для ввода первой даты, поле для ввода второй даты.
<H1 align="center">![Screenshot](img/interface_4.png)</h1> 
<p> В таком случае используется три колонки и одна строка.
<p> •	Третий способ
<p> В одну строку, 4 элемента интерфейса – два поля для ввода и подписи к каждому из них.
<H1 align="center">![Screenshot](img/interface_5.png)</h1>
<p> Здесь используются 4 колонки и 1 строка.
<p> Для каждой колонки можно задать свою ширину, для каждой строки – высоту:
<H1 align="center">![Screenshot](img/interface_6.png)</h1>
<p> Высота и ширина вводятся в пикселях, но можно использовать относительные размеры окна, например, если одна колонка должна быть больше другой в два раза и их всего две, то в поле «Ширина» можно ввести «1*» для первой колонки, и «2*» для второй:
<H1 align="center">![Screenshot](img/interface_7.png)</h1>
<p> Результат такой разметки:
<H1 align="center">![Screenshot](img/interface_8.png)</h1>
<p> Нумерация строк и колонок начинается с 0. С помощью кнопки «Удалить» можно удалить ненужную строку или колонку, по кнопке «Редактировать» можно изменить высоту или ширину.
<p> После настройки сетки она будет отображена пунктирной линией в окне предварительного просмотра в правой части окна, и затем можно приступить к добавлению контролов. 
## Добавление элемента интерфейса
<p> Для добавления на окно нового элемента необходимо заполнить поля, представленные на рисунке:
<H1 align="center">![Screenshot](img/interface_9.png)</h1>
<p> Обязательными полями являются все, кроме полей «Объединить колонки/строки».
## Поле «Тип»
<H1 align="center">![Screenshot](img/interface_10.png)</h1>
<p> Сначала выбирается тип добавляемого элемента интерфейса из предложенных:
<p> •	Поле для ввода – поле, в которое можно ввести любую строку;
<H1 align="center">![Screenshot](img/interface_11.png)</h1>
<p> •	Надпись – статичная строка текста, которая не может быть отредактирована пользователем;
<H1 align="center">![Screenshot](img/interface_12.png)</h1>
<p> •	Выпадающий список – поле со стрелочкой сбоку, по нажатию которого открывается список заранее определенных значений;
<H1 align="center">![Screenshot](img/interface_13.png)</h1>
<p> •	Таблица – отображение в виде таблицы заранее созданной переменной. Возможно редактирование полей таблицы, но невозможно создание новых колонок в ней;
<H1 align="center">![Screenshot](img/interface_14.png)</h1>
<p> •	Выбор даты – поле с иконкой календаря, по нажатию на которую пользователю будет предложено выбрать определенную дату. Возможен ввод значения даты вручную, при вводе других строк поле автоматически подберет наиболее подходящую дату к введенным данным. Формат даты ДД.ММ.ГГГГ;
<H1 align="center">![Screenshot](img/interface_15.png)</h1>
<p> •	Выбор файла – поле с иконкой в виде трех точек, по нажатию на которую пользователю будет предложено выбрать файл. Путь до выбранного файла запишется в это поле;
<H1 align="center">![Screenshot](img/interface_16.png)</h1>
<p> •	Выбор папки – поле с иконкой в виде трех точек, по нажатию на которую пользователю будет предложено выбрать папку. Путь до выбранной папки запишется в это поле. Выглядит так же, как и «Выбор файла».
## Поле «Источник данных»
<p> В это поле вводится название переменной или строка, на основе которой контрол будет заполнен. Немного поподробнее о поле при выборе различных элементов интерфейса:
<p> •	Для типа элемента «Надпись» туда вводится значение, которое должно быть отображено в выводимой надписи;
<p> •	Для «Поле для ввода», «Выбор даты», «Выбор файла» и «Выбор файла» вводится значение, которое сразу будет указано в поле, если это необходимо. Если поле должно быть пустым, то не надо заполнять «Источник данных»;
<p> •	Для «Таблицы» необходимо подать заполненную табличную переменную для её отображения;
<p> •	Для элемента интерфейса «Выпадающий список» необходимо передать набор значений, которые пользователю будет предложено выбрать. Делается это через символ «;». Это могут быть строки, переменные-элементы, переменные-списки или табличные переменные, состоящие из одного столбца. Например, введено следующее значение, при приведенных далее примерах заполнения переменных:
<H1 align="center">![Screenshot](img/interface_17.png)</h1>
<H1 align="center">![Screenshot](img/interface_18.png)</h1>
<H1 align="center">![Screenshot](img/interface_19.png)</h1>
<p> Результат будет выглядеть следующим образом:
<H1 align="center">![Screenshot](img/interface_20.png)</h1>
## Поля «Колонка» и «Строка»
<p> В эти поля необходимо ввести номер колонки и строки сетки (таблицы), в которых должен располагаться добавляемый контрол. Например, в примере с датами (рис. 8.22.2) контрол «Надпись» - «Начальная дата» располагается в 0 колонке и 0 строке, а надпись «Конечная дата» - в 0 колонке и 1 строке.
## Поля «Объединить колонки» и «Объединить строки»
<p> В некоторых случаях необходимо выводить поля не в конкретной клеточке сетки, а в объединении нескольких клеток. Например – нужно предложить пользователю выбрать Excel-файл для записи в него результатов и ввести начальную и конечную дату, по которым будут собираться некоторые данные. Хотелось бы объединить это в две строки, но для ввода даты нужно как минимум 2 поля, а поле для выбора файла – одно. 
<H1 align="center">![Screenshot](img/interface_21.png)</h1>
<p> Для того, чтобы растянуть поле для выбора файла по длине полей для ввода даты, нам необходимо разместить его не просто в 1 колонке и 0 строке, но и объединить для него две колонки, чтобы оно занимало сразу обе:
<H1 align="center">![Screenshot](img/interface_22.png)</h1>
<H1 align="center">![Screenshot](img/interface_23.png)</h1>
<p> То есть при заполнении поля «Объединить колонки» колонки, начиная с той, что указана в поле «Колонка», будут объединены по горизонтали в одну.
<p> Аналогично с полем «Объединять строки» - указанное количество строк, начиная с той, что указана в поле «Строка», будут объединены в одну:
<H1 align="center">![Screenshot](img/interface_24.png)</h1>
## Поле «Переменная»
<p> В это поле вводится название переменной, в которую будет записано значение, введенное (для выпадающего списка – выбранное) пользователем. Является обязательным полем для всех типов контролов, кроме «Надписи».
<p> После заполнения всех полей необходимо нажать на кнопку «Добавить». После нажатия на нее элемент сразу отобразиться в окне предпросмотра в правой части окна. 
<H1 align="center">![Screenshot](img/interface_25.png)</h1>
<p> По кнопке «Предпросмотр» откроется диалоговое окно в таком виде, в котором оно будет представлено пользователю.
<p> Удалить или отредактировать элемент можно, предварительно выбрав его в области «Список элементов», а затем нажав на соответствующую кнопку, находящуюся над списком с элементами.
<p> После добавления всех необходимых контролов нужно нажать кнопку «Сохранить» в правой нижней части окна.
