# <H1 align="center">MODULE «INTERFACE»</h1> 

<p> This robot is designed for creating dialog windows for communicating with the user of the robot. It can be windows that allow you to attach a file, enter any data - date, names, mailing addresses, and other things that the robot will subsequently work with or vice versa windows that display the result of work.</p> 
<p> To create a window you need to add controls to it - interface elements such as labels, text fields, buttons, drop-down lists.</p> 

## The main window
<p> Module window consists of the following parts:
<p> ●	Window settings - general settings for the dialog window;
<p> ●	Interface Item Settings - Configure the item you need to add;
<p> ●	List of elements - a table that contains all the added elements;
<p> ●	A window with a preview of the current dialog window (right side of the window).
<H1 align="center">![Screenshot](img/interface_1.png)</h1> 
<p> You should start working with a dialog window from the grid settings, which can be opened using the «Grid settings» button.
## Window settings
<p> Window settings include the«Title», its width and height, and grid settings. By clicking the «Fullscreen» checkbox  fields «Height» and «Width» won't be taken into account.
<p> By clicking the «Grid settings» button a window for grid and column settings appears.
<H1 align="center">![Screenshot](img/interface_2.png)</h1> 
<p> A grid is a conditional markup of interface elements, a table in which controls will be placed into. For example if you need to create a window in which the user would enter 2 parameters – the starting and the finishing date, between which you need to download emails, then you can configure dialog windows in several ways.
<p> ●	First method 
<p> - in two rows, 4 interface elements - on the first row a signature and a field for entering the start date, on the second row a signature and a field for entering the end date
<H1 align="center">![Screenshot](img/interface_3.png)</h1> 
<p> For this grid setting, you need to specify two columns - the first for inscriptions, the second for input fields, and two rows - the first for the start date, the second for the end.
<p> ●	Second method 
<p> - in one row, 3 interface elements – signature, field for entering the first date, field for entering the second date.
<H1 align="center">![Screenshot](img/interface_4.png)</h1> 
<p> In this case 3 columns and 1 row is used.
<p> ●	Third method
<p> - In one row, 4 interface elements – two input fields and signatures to every one of them.
<H1 align="center">![Screenshot](img/interface_5.png)</h1>
<p> In this case 4 columns and 1 row is used
<p> You can specify the width for every column, and the height for every row
<H1 align="center">![Screenshot](img/interface_6.png)</h1>
<p> The height and width are entered in pixels, but you can use the relative dimensions of the window, for example, if one column should be twice as large as the other and there are only two of them, then in the «Ширина» field you can enter «1*» for the first column, and «2*» for the second:
<H1 align="center">![Screenshot](img/interface_7.png)</h1>
<p> The result of this layout: 
<H1 align="center">![Screenshot](img/interface_8.png)</h1>
<p> Row and column numbering starts at 0. You can delete the row or column you don't need with a «Delete» button, and you can change the height or the width with the  «Edit» button.
<p> After adjusting the grid, it will be displayed with a dashed line in the preview window on the right side of the main window, and then you can start adding controls.
## Adding an interface element
<p> To add a new element you need to fill in the fields demonstrated on the Figure 
<H1 align="center">![Screenshot](img/interface_9.png)</h1>
<p> All fields are necessary except  «Merge rows/columns»..
## Field «Type»
<H1 align="center">![Screenshot](img/interface_10.png)</h1>
<p> First, the type of the added interface element is selected from the ones proposed:
<p> ●	Input field - a field into which you can enter any line;
<H1 align="center">![Screenshot](img/interface_11.png)</h1>
<p> ●	Caption - a static line of text that cannot be edited by the user;
<H1 align="center">![Screenshot](img/interface_12.png)</h1>
<p> ●	Drop-down list - a field with an arrow on the side, by clicking on it a list of predefined values is going to be opened;
<H1 align="center">![Screenshot](img/interface_13.png)</h1>
<p> ●	Table - a table view of a previously created variable. It is possible to edit table fields, but it is impossible to create new columns in it;
<H1 align="center">![Screenshot](img/interface_14.png)</h1>
<p> ●	Date selection - a field with a calendar icon, by clicking on which the user will be asked to select a specific date. You can enter the date value manually; when entering other lines, the field will automatically select the most suitable date for the entered data. Date format DD.MM.YYYY;
<H1 align="center">![Screenshot](img/interface_15.png)</h1>
<p> ●	File selection - a field with an icon in the form of three dots, by clicking on which the user will be asked to select a file. The path to the selected file is written to this field;
<H1 align="center">![Screenshot](img/interface_16.png)</h1>
<p> ●	Selecting a folder – пa field with an icon in the form of three dots, by clicking on which the user will be asked to select a folder. The path to the selected folder is written to this field. Looks exactly like «File selection».
## Field «Data source»
<p> Enter the name of the variable or a string on the basis of which the control will be filled in this field.Немного поподробнее о поле при выборе различных элементов интерфейса:
<p> ●	For the «Signature» element type a value is entered there, which should be showed in the displayed label;
<p> ●	For «Input field», «Date selection», «File selection» and «Folder selection» a value is entered that will be immediately indicated in the field, if necessary. If you want the field to be blank, you shouldn't fill «Data source»;
<p> ●	For «Table» you must submit a completed table variable to display it;
<p> ●	For the «Drop-down list» interface element it is necessary to transfer a set of values that the user will be offered to select. It is done through the «;» symbol. These can be rows, element variables, list variables, or table variables consisting of a single column. For example, the following value was entered in the following examples of filling in variables:
<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> The result will look like this: 
<H1 align="center">![Screenshot](img/interface_20.png)</h1>
## Fields «Column» and «Row»
<p> In these fields, you must enter the column number and grid lines (tables) in which the added control should be located. For example, in the example with dates (Figure 9.25.2), the control «Label» - «Start date» is located in column 0 and row 0, and the signature «End date» - is in column 0 and row 1.
## Fields «Merge columns» and «Merge rows»
<p> In some cases, it is necessary to display fields not in a specific cell of the grid, but in a combination of cells. For example - you need to prompt the user to select an Excel file to write the results to and enter the start and the end date, according to which data will be collected. It would be nice to merge this in two rows, but to enter the date you need at least 2 fields, and to select a  file - one. 
<H1 align="center">![Screenshot](img/interface_21.png)</h1>
<p> In order to stretch the field for selecting a file along the length of the fields for entering the date, we need to place it not just in 1 column and 0 row, but also merge two columns for it so that it occupies both at once:
<H1 align="center">![Screenshot](img/interface_22.png)</h1>
<H1 align="center">![Screenshot](img/interface_23.png)</h1>
<p> When filling out the «Merge columns» field, columns starting from the one indicated in the «Column» field, will be merged into one horizontally.
<p> SImilar with the «Merge rows» field - specified amount of rows starting with the one that is specified in the «Row» field, will be merged into one:
<H1 align="center">![Screenshot](img/interface_24.png)</h1>
## Field «Variable»
<p> The name of the variable is entered into this field, into which the value entered (for the drop-down list - selected) by the user is written. It is a required field for all types of controls, except for the «Label».
<p> After filling out all required fields press the «Add» button. After clicking on it, the element will immediately appear in the preview window on the right side of the window. 
<H1 align="center">![Screenshot](img/interface_25.png)</h1>
<p> By clicking the «Preview» button a dialog window will be opened in the form in which it will be presented to the user.
<p> You can delete or edit an element by first selecting it in the «List of items» area, and then clicking on the corresponding button located above the list with items.
<p> After adding all the necessary controls, click the «Save» button in the lower right part of the window.
