Редактор окон
Last updated
Last updated
Кнопка “Редактор окон” (редактор форм) в меню разработки позволяет создавать свои собственные окна и отображать их в модальном и немодальном режиме, в том числе, асинхронно по отношению к ходу сценария.
Модальное окно не дает продолжить работу приложения, пока не будет закрыто. Немодальное окно позволяет пользователю переключаться на другие режимы работы приложения без его закрытия, но визуально всегда расположено поверх приложения. Кроме того, созданные окна можно привязывать к пользовательским элементам в других приложениях.
Редактор окон позволяет использовать как фиксированную, так и адаптивную верстку окон. Адаптивная вёрстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов. Фиксированная верстка — тип верстки, при котором ширина контента жестко задана в пикселях и не меняется в зависимости от размеров окна браузера.
Пользовательский интерфейс Редактора окон состоит из следующих основных областей:
Основное меню (верхняя панель);
Общие элементы и контейнеры;
Центральная рабочая область;
Панель свойств элементов.
№ п/п | Элемент интерфейса | Описание |
1. | меню “Файл” | Позволяет использовать базовые функции по управлению пользовательскими формами в редакторе окон. |
2. | меню “Правка” | Позволяет выполнить действия по отмене, повтору, копировании и т.п. |
3. | кнопка “Новое окно” | Позволяет развернуть новую форму для редактирования. |
4. | кнопка “Предпросмотр” | Позволяет увидеть тот вариант, который будет доступен после верстки. Также, можно воспользоваться клавишей F5. |
5. | кнопка “Редактировать свойства окна” | Позволяет корректировать настройки формы. Также, можно воспользоваться клавишей F8. |
6. | кнопка “Редактировать события окна” | Позволяет корректировать настройки формы. Также, можно воспользоваться сочетанием клавиш Ctrl+F8. |
7. | Позволяет отменить действие. | |
8. | Позволяет повторить действие. | |
9. | Позволяет удалить выбранный элемент. | |
10. | Позволяет выровнять выбранный элемент по левому краю. | |
11. | Позволяет выровнять выбранный элемент по центру. | |
12. | Позволяет выровнять выбранный элемент по правому краю. | |
13. | Позволяет выровнять выбранный элемент по верху. | |
14. | Позволяет выровнять выбранный элемент по середине. | |
15. | Позволяет выровнять выбранный элемент по низу. | |
16. | Позволяет выровнять выбранный элемент ширину. | |
17. | Позволяет выровнять выбранный элемент высоту. | |
18. | Позволяет выровнять выбранный элемент размеры. |
Меню "Файл" Редактора окон содержит следующие функции:
№ п/п | Элемент интерфейса | Описание |
1. | пункт “Новое окно” | Позволяет развернуть новую форму для редактирования. |
2. | пункт “Экспорт в файл” | Позволяет экспортировать форму в json файл. Также, можно воспользоваться сочетанием клавиш Ctrl+E.
|
3. | пункт “Импорт из файла” | Позволяет импортировать форму из json файла. Также, можно воспользоваться сочетанием клавиш Ctrl+I. |
4. | пункт “Предпросмотр окна” | Позволяет увидеть тот вариант, который будет доступен после верстки. Также, можно воспользоваться клавишей F5. |
5. | пункт “Редактировать свойства окна” | Позволяет корректировать настройки формы. Также, можно воспользоваться клавишей F8. |
6. | пункт “Редактировать события окна” | Позволяет корректировать настройки формы. Также, можно воспользоваться сочетанием клавиш Ctrl+F8. |
7. | пункт “Закрыть” | Позволяет закрыть Редактор окон. |
Окно “Редактировать настройки формы” можно открыть несколькими способами:
В меню “Файл” с помощью пунктов “Редактировать свойства окна” или “Редактировать события окна”.
В основном меню с помощью кнопок “Редактировать свойства окна” или “Редактировать события окна”.
С помощью клавиш клавиатуры “F8” и “Ctrl+F8” для открытия Редактора настроек формы на вкладке “Свойства” и на вкладке “События” соответственно.
Вкладка "Свойства" окна "Редактировать настройки формы" содержит следующие функции:
№ п/п | Элемент интерфейса | Описание |
1. | кнопка “Добавить элемент” | Позволяет добавить элемент из перечня общих элементов с помощью выбора из выпадающего списка. |
2. | кнопка “Переместить вверх” | Позволяет переместить вверх выбранный элемент. |
3. | кнопка “Переместить вниз” | Позволяет переместить вниз выбранный элемент. |
4. | колонка “Имя привязки” | .Позволяет выбрать переменную, к которой будет выполнена привязка другой переменной |
5. | колонка “Тип привязки” | Тип привязки, сравнение или приравнивание. |
6. | колонка “Значение привязки” | Позволяет выбрать переменную, к которой будет выполнена привязка значения. |
Вкладка "События" окна "Редактировать настройки формы" содержит следующие функции:
№ п/п | Элемент интерфейса | Описание |
1. | кнопка “Добавить элемент” | Позволяет добавить элемент из перечня общих элементов, которые уже установлены в окне (форме) с помощью выбора из выпадающего списка. |
2. | кнопка “Добавить события кнопок” | Позволяет добавить события кнопок |
3. | колонка “Имя” | Имя добавленного элемента. |
4. | колонка “Значение” | Значение события. |
Меню "Правка" Редактора окон предоставляет следующие опции:
№ п/п | Элемент интерфейса | Описание |
1. | пункт “Отменить” | Позволяет отменить действие. Также, можно воспользоваться сочетанием клавиш Ctrl+Z. |
2. | пункт “Повторить” | Позволяет повторить действие. Также, можно воспользоваться сочетанием клавиш Ctrl+Y. |
3. | пункт “Копировать” | Позволяет копировать элемент. Также, можно воспользоваться сочетанием клавиш Ctrl+C. |
4. | пункт “Вставить” | Позволяет вставить элемент. Также, можно воспользоваться сочетанием клавиш Ctrl+V. |
5. | пункт “Удалить” | Позволяет удалить элемент. Также, можно воспользоваться клавишей Delete. |
При использовании Редактора окон доступен ряд элементов и инструментов:
многоуровневая табличная верстка;
кнопки, чекбоксы, текстовые поля;
обычные и выпадающие списки, а также списки с галочками;
радиокнопки и радиогруппы;
календари;
парольные и другие специальные типы полей;
картинки;
прогрессбары;
текстовый редактор с форматированием;
сплиттеры, вкладки, полосы прокрутки;
редактируемые таблицы данных;
другие элементы управления.
У каждого элемента управления более 50 настраиваемых свойств, определяющих их внешний вид и поведение. Значения каждого из них, а также действия пользователей в окне, могут быть привязаны к изменению значений выбранных переменных, и наоборот - изменение значений переменных приводит к изменению значений соответствующих элементов управления. Этот функционал позволяет разрабатывать в рамках сценария робота разветвленные диалоговые и экспертные системы, окна настроек робота, интерактивные подсказки и помощников, а также целые многооконные приложения.
Важно! Для демонстрации работы этого функционала в папке Project добавлена игра "Крестики-нолики" - первые в мире крестики-нолики, реализованные средствами RPA-платформы.
№ п/п | Элемент интерфейса | Описание |
Общие элементы | ||
1.1. | Курсор | Позволяет выбрать элемент на форме для его настройки/перемещения. |
1.2. | Label | Позволяет установить текстовую метку в редактируемом окне (форме). |
1.3. | Button | Позволяет установить кнопку. |
1.4. | CheckBox | Позволяет установить чекбокс. |
1.5. | TextBox | Позволяет установить текстовое поле. |
1.6. | ComboBox | Позволяет выбирать один элемент из списка предварительно определенных вариантов. |
1.7. | CheckedListBox | Позволяет установить простой список с чекбоксами. |
1.8. | DateTimePicker | Позволяет установить элемент с выбором даты и времени. |
1.9. | LinkLabel | Позволяет установить элемент с гиперссылкой. |
1.10. | ListBox | Позволяет установить простой список. |
1.11. | MaskedTextBox | Позволяет установить текстовое поле с контролем ввода и проверкой автоматически на наличие ошибок. |
1.12. | MonthCalendar | Позволяет установить элемент с датой, которую можно выбрать с помощью визуального календаря на месяц. |
1.13. | NumericUpDown | Позволяет установить счетчик с числовым полем ввода. |
1.14. | PictureBox | Позволяет установить элемент, отображающий графические объекты следующих форматов: растровые изображения, GIF, JPEG, метафайл или значок. |
1.15. | ProgressBar | Позволяет установить индикатор, который отображает прогресс выполнения задачи. |
1.16. | RadioButton | Позволяет установить элемент, который предоставляет возможность выбрать одну опцию из предопределенного набора. |
1.17. | RichTextBox | Позволяет установить текстовое поле с возможностью ввода и форматирования текста.
|
1.18. | DataGridView | Позволяет установить элемент с отображением данных в табличном формате. |
Контейнеры | ||
2.1. | Курсор | Позволяет выбрать элемент на форме для его настройки/перемещения |
2.2. | GroupBox | Позволяет установить рамку вокруг группы элементов управления. |
2.3. | Panel | Позволяет установить панель, содержащую другие элементы управления. |
2.4. | SplitContainer | Позволяет установить две разделенные сплитером панели. Изменяя положение сплитера, можно изменить размеры этих панелей. |
2.5. | TabControl | Позволяет установить элемент управления с несколькими вкладками. Каждая вкладка будет хранить некоторый набор других элементов управления таких, как кнопки, текстовые поля и др. |
2.6. | TableLayoutPanel | Позволяет установить элемент для упорядочивания компонентов в виде сетки или таблицы |
Центральная рабочая область Редактора окон предназначена для работы с созданным окном (формой) и его оформления. Здесь отображаются результаты всех манипуляций, которые производятся на верхней панели основного меню и на боковых панелях Редактора окон.
Панель свойств элементов позволяет настраивать окно (форму), менять ее наименование и настраивать свойства отдельно каждого из установленных в окне (форме) элементов и контейнеров. Для выбора элемента, который нужно настроить, его необходимо выбрать в выпадающем списке в верхней части панели. На правой панели расположены вкладки, их количество и содержимое меняется в зависимости от выбранного элемента. Каждую из вкладок можно развернуть для настройки элемента окна (формы). Для удобства содержимое вкладок можно отсортировать не только по категориями, но и по алфавиту.
№ п/п | Элемент интерфейса | Описание |
1. | вкладка “Внешний вид” | Настройка параметров внешнего вида выбранного элемента. |
2. | вкладка “Данные” | Настройка привязки данных выбранного элемента. |
3. | вкладка “Макет” | Настройка макета выбранного элемента. |
4. | вкладка “Поведение” | Настройка поведения выбранного элемента. |
5. | вкладка “Прочее” | Настройка прочих свойств выбранного элемента. |
6. | вкладка “Разработка” | Настройка свойств, относящихся к разработке. |
7. | вкладка “Специальные возможности” | Настройка свойств, относящихся к специальным возможностям. |
8. | вкладка “Стиль окна” | Настройка стиля окна. |
9. | вкладка “Фокус” | Настройка свойств, относящихся к фокусу выбранного элемента. |
10. | Асинхронные | Этого у себя вообще не нашел |
кнопка
кнопка
кнопка
кнопка
кнопка
кнопка
кнопка
кнопка
кнопка
кнопка
кнопка
кнопка