Формы

Все состоит из пустоты, а форма – сгущенная пустота.

Альберт Эйнштейн

Этот раздел носит справочный характер, так как содержит общую информацию не только по формам, используемых при разработке приложений в My Visual Database, но и по свойствам других компонентов пользовательского интерфейса.

Формы и компоненты

Основой графического пользовательского интерфейса (GUI) в ОС Windows является форма: прямоугольная область, внутри которой расположены различные визуальные компоненты, которые обеспечивают ввод и отображение информации. В процессе взаимодействия пользователя с компонентами (например, клик мышкой по кнопке или таблице, нажатие клавиши на клавиатуре) или внутренних взаимодействий компонентов между собой (извлечение данных из БД, завершение процесса загрузки данных в визуальный компонент, срабатывание таймера) возникают события. Большая часть этих событий автоматически обрабатывается компонентами, обеспечивая требуемую функциональность приложения. Для некоторых событий, используя язык программирования FastScript, можно написать собственные обработчики. FastScript является диалектом языка Object Pascal.

Визуальные компоненты размещаются на форме или на других компонентах-контейнерах, к которым относятся панель, группа и вкладка. Форма также является компонентом верхнего уровня, которая входит в состав приложения. Как вы уже, наверное, догадались, приложение также является компонентом. Функциональность и внешний вид компонентов определяется настройками свойств компонентов. 

В левой части рабочего окна MVDB находится инструменты отображения структуры компонентов: список компонентов формы и список форм (1). Ниже расположена таблица для редактирования свойств компонентов (2).

Иерархия расположения

Компоненты располагаются на форме в определенной последовательности, друг за другом. Для наглядности можно представить, что визуальные компоненты – это бумажные фигурки, которые выложены на столе (на форме). Выкладывая их один за другим, компоненты, добавленные на форму позже, оказываются поверх компонентов, размещенных ранее, и могут частично или полностью перекрывать их. Кроме того, имеются компоненты-контейнеры, внутри которых также создается своя последовательность расположения элементов.

📝 Иерархию вложенности можно увидеть в дереве компонентов формы, но иерархия расположения там не отображается, так как элементы в дереве сортируются по алфавиту, а не по очередности расположения.

Чтобы изменить очередность расположения элементов внутри его родительского элемента, используйте команды, которые доступны из всплывающего меню.

Всплывающее меню компонентов

При клике правой кнопкой мыши по компоненту появляется всплывающее меню, с помощью которого можно менять иерархию отображения компонента, перемещать его в буфер обмена или удалить.

Указанные выше операции редактирования применяются ко всем выделенным компонентам.

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

☝ Компоненты Label (метка), Image (изображение) и DBImage (сохраняемое изображение),  не имеют своего “окна отображения”. Они рисуются на холсте родительского элемента, поэтому эти компоненты “проваливается” за другие “оконные” компоненты, даже, если находятся на переднем плане. В то же время они имеют возможность установки прозрачности для цвета своего фона.

Общие свойства компонентов

У различных компонентов, которые размещаются на форме, имеются некоторые общие свойства, которые отвечают за их расположение и внешний вид. Так как форма тоже является компонентом, расположенным на экране, то она имеет общие с другими компонентами свойства. Имена свойств имеют английские названия, так как в основу реализации объектной модели и компонентов легли разработки американских математиков и программистов второй половины ХХ века.

📝 Общие свойства – это результат наследования: одного из принципов объектно-ориентированного подхода (ООП) в программировании. Наследование предполагает, что у класса-наследника сохраняются свойства и методы класса-родителя. Подробно принципы ООП будут рассмотрены в отдельной главе.

Таблица 1. Общие свойства компонентов

Название	Свойство	Описание
Name	Название	Название должно отражать назначение элемента и его класс. Название является текстовым идентификатором, поэтому название компонента должно быть уникальным в пределах формы, а название формы должно быть уникальным в пределах проекта. Рекомендации по использованию данного свойства можно найти в разделе Проект “Библиотека” v.1.0.
Left	Лево	Абсцисса положения верхнего левого угла компонента относительно родительского компонента.  Отчет ведётся от левого верхнего угла, в пикселях. Кроме формы, компоненты можно располагать внутри следующих компонент-контейнеров из палитры MVD: Panel – Панель GroupBox – Группа TabSheet – вкладка многостраничного компонента PageControl
Top	Верх	Ордината положения верхнего левого угла компонента относительно родительского компонента.
Width	Ширина	Ширина компонента, в пикселях
Height	Высота	Высота компонента, в пикселях
Visible	Видимость	Признак видимости компонента. В некоторых случаях на форме должны присутствовать невидимые компоненты, которые обеспечивают нужную функциональность приложения, но пользователь не должен с ними взаимодействовать.
Anchors	Якоря	Якорь позволяет фиксировать положение верхней, нижней, правой или левой стороны компонента относительно родительского. Тогда, при изменении размера родительского компонента, будет меняться размер элемента, привязанного якорями. Используйте это свойство для создания адаптивного дизайна форм GUI. Например, если привязать якорями все четыре стороны таблицы, расположенной на форме, то при изменении размера формы, таблица также будет растягиваться по её размеру. Подробно якоря рассматриваются в разделе “Проект “Библиотека” v.1.0“
Caption	Заголовок	Это свойство для отображения текста внутри элемента, он есть у следующих компонент: Form, Label, Button, CheckBox, Panel, GroupBox, TabSheet.
Font	Шрифт	Группа свойств для настройки шрифта (тип, размер, цвет и стиль), которым отображается заголовок (caption) или текст (text).
Font.Color	Цвет шрифта	Цвет шрифта можно задать несколькими способами: – по названию (выбрать из выпадающего списка); – выбрать из палитры; – ввести шестнадцатеричное значение. Для выбора названия цвета используйте выпадающий список: Для открытия стандартного диалога выбора цвета Windows нажмите специальную кнопку: Для ввода значения наберите число в шестнадцатеричном формате: $BBGGRR, где BB – значение синей составляющей цвета GG – значение зелёной составляющей цвета RR – значение красной составляющей цвета Диапазон значений каждой составляющей: 00..FF
Font.Name	Имя шрифта	Название шрифта вы можете указать двумя способами: – выбрать из выпадающего списка; – ввести текстовое значение. В выпадающем списке отображаются шрифты, установленные в операционной системе, и их внешний вид: При ручном вводе, если нет точного совпадения имени шрифта с имеющимся в системе, то операционная система установит похожий шрифт или шрифт по умолчанию.
Font.Size	Размер шрифта	Размер шрифта в пунктах (pt). Этот типографский способ измерения размера шрифта до сих пор используется в компьютерах. Для получения размера в пикселях можно использовать формулу: 1px ≈ 0.75pt Обратите внимание, что реальный размер зависит не только от свойства Font.Size, но и от начертания (названия) шрифта.
Font.Style	Стиль шрифта	Шрифт может быть отображен с тремя атрибутами: B(old) – жирный I(talic) – наклонный U(nderline) – подчеркнутый Для управления атрибутами используйте мини-кнопки с фиксацией:
Color	Цвет	Цвет фона компонента Label
BgColor	Цвет фона	Цвет фона компонентов Form, Edit, Memo, ComboBox, Counter, Panel.
TabStop	Табулостоп	В Windows для передачи фокуса компонентам на форме используется клавиша Tab (Shift+Tab). Этот флаг определяет, включать ли компонент в очередь обхода.
TabOrder	Последовательность табуляции	Порядковый номер в очереди обхода компонентов клавишей Tab (Shift+Tab). Этот способ до сих поря является стандартом, поэтому при проектировании форм редактирования важно правильно настраивать очередь обхода элементов.
Enabled	Доступен	Свойство определяет, доступен ли данный элемент для взаимодействия и можно ли ему передать фокус. Сброс данного флага блокирует ввод или копирование данных, нажатие кнопки. Блокировка распространяется на все дочерние компоненты, расположенные на заблокированном элементе интерфейса.
ReadOnly	Только для чтения	Свойство компонент, предназначенных для ввода данных. При его установке данные можно только увидеть и скопировать, добавить или изменить нельзя.
Constraints	Ограничения	При использовании якорей (anchors) может быть полезным настройка данных свойств, которые определяют минимальные и максимальные размеры элемента при его растягивании, что позволяет сохранять приемлемые размеры для отдельных элементов GUI при изменении размера формы: MaxHeight – максимальная высота; MaxWidth – максимальная ширина; MinHeight – минимальная высота; MinWidth – минимальная высота. Если ограничений нет, то в свойствах находится нулевое значение.
Hint	Подсказка	Важным элементом GUI являются подсказки в виде всплывающих сообщений, которые появляются, если задержать указатель над элементом в течение некоторого времени. Это свойство позволяет задать текст всплывающей подсказки.
ShowHint	Показать подсказку	Флаг, определяющий, нужна ли всплывающая подсказка для данного элемента.
Cursor	Курсор	С помощью этого свойства можно менять внешний вид курсора при наведении указателя на визуальный компонент. Внешний вид курсора зависит от настроек операционной системы.
BiDiMode	Режим двунаправленности	Управление режимом автоматического распознавания направления ввода или отображения данных. Нужно учитывать, если вы используете язык, для которого принято написание справа-налево (арабский, иврит). см. Таблицу 2.

📝 Некоторые из приведенных в Таблице 1 свойства подробно рассматриваются в разделе “Проект “Библиотека” v.1.0“

Таблица 2. Режим направления ввода/отображения текста

Свойства формы

Кроме перечисленных в выше общих свойств, у формы есть специальные свойства, управляющие её внешним видом и поведением.

Таблица 3. Свойства формы

Название	Свойство	Описание
AutoScroll	Автоматическая прокрутка	Включение данного свойства добавляет полосы прокрутки для просмотра содержимого окна, если его размеры уменьшились и не позволяют отобразить все компоненты на форме. Актуально для формы, которая была спроектирована для большого разрешения, а у пользователя размер рабочего стола меньше. В этом случае форму можно развернуть на весь экран и прокручивать, как окно браузера.
Sizeable	Изменяемый размер	При установке этого флага размер формы можно менять. По умолчанию форма создаётся фиксированного размера.  По сути это свойство управляет другим  свойством – BorderStyle: Sizeable = False -> BorderStyle = bsSingle Sizeable = True -> BorderStyle = bsSizeable
BorderStyle	Стиль границы формы	Это свойство определяет тип окна. Внешний вид во многом будет зависеть от типа операционной системы и стиля визуального оформления. см. Таблицу 4 “Стиль границы формы”.
BorderIcons	Иконки рамки	Набор флагов, позволяющий управлять видимостью кнопками управления окном. Подчиняется свойству BorderStyle, позволяет управлять видимостью кнопок на заголовке окна. – biSystemMenu – иконка окна, при нажатии которой отображается системное меню; – biMinimize – кнопка минимизации; – biMaximize – кнопка максимизации; – biHelp – кнопка вызова помощи.
WindowState	Состояние окна	Определяет состояние окна при его открытии: wsNormal – обычное; wsMaximized – развёрнутое на весь экран; wsMinimized – свёрнутое.
MinimizeToTray	Минимизи- ровать в трей	Флаг позволяет при минимизации главной формы перемещать кнопку приложения с панели задач в область уведомлений (значков).
Position	Положение	Свойство определяет, в какой части экрана будет отображаться форма. см. Таблица 5.
Scaled	Масштаби- рование	Позволяет автоматически масштабировать размеры шрифтов и компонентов при включении масштабирования отображения в операционной системе. По умолчанию свойство включено, но по личному опыту могу сказать, что очень сложно спроектировать масштабируемый автоматически интерфейс. Рекомендуется отключать этот флаг, так как мелкий шрифт – это меньшее зло, чем наползающие друг на друга элементы с нечитабельными подписями.
KeyPreview	Перехват нажатий клавиш	Установка этого флага направляет все события от клавиатуры в обработчики событий формы, что позволяет получать сведения о нажатиях клавиш вне зависимости от того, на каком компоненте находится фокус ввода.
ShowOnTaskbar	Отображать на панели задач	По умолчанию для каждой видимой формы создается кнопка на панели задач. Данный флаг позволяет отключать эту опцию.
TransparentColor	Прозрачность	Флаг, позволяющий делать прозрачным область на форме, имеющий какой-либо цвет
TransparentColorValue	Значение прозрачного цвета	Определяет, какой цвет будет прозрачным. Работает вместе со свойством TransparentColor
AlphaBlend	Прозрачность	Флаг позволяет создавать полупрозрачные формы.
AlphaBlendValue	Степень прозрачности	Определяет степень прозрачности формы, от 0 (полностью прозрачная) до 255 (непрозрачная).
DefaultMonitor	Монитор для отображения	Данное свойство позволяет управлять местом отображения формы в системах, где имеется несколько мониторов.

Таблица 4. Стиль границы формы

BorderStyle	Результат
bsSingle	Форма фиксированного размера с рамкой.
bsSizeable	Форма изменяемого размера с рамкой
bsDialog	Диалоговая форма. Фиксированный размер, нет иконки системного меню и главного меню.
bsNone	Форма без заголовка и рамки. Закрыть форму можно с помощью сочетания клавиш Alt+F4
bsToolWindow	Форма фиксированного размера, высота заголовка уменьшена.
bsSizeToolWin	Форма изменяемого размера. Высота заголовка уменьшена.

Таблица 5. Свойство Position

☝ Свойство Position срабатывает при первом отображении формы. Если после этого переместить форму в другое место экрана, то она запомнит своё новое местоположение до завершения работы приложения или до присвоения значения данному свойству.

📝 Чтобы форма запомнила своё положение или размер и восстанавливала её при последующем запуске, вам понадобится скрипт. Также с помощью скрипта можно обеспечить открывание формы по центру главной формы после изменения её положения на экране.

Таблица 6. Свойство DefaultMonitor

Главная форма

Проект может содержать множество форм, которые вы можете самостоятельно добавлять и удалять. Но одна форма будет присутствовать неизменно, это – главная форма приложения. Вкладка с главной формой имеет красный цвет. Вы можете изменить название формы, но удалить её нельзя. MVDB недаром так оберегает главную форму: на ней расположено множество невидимых, но очень полезных компонентов: для соединения с базами данных, для построения отчетов и т.д.. Но, как современному водителю не обязательно знать, что находится под капотом его автомобиля, в большинстве случаев вам не придется беспокоиться о работе всех этих компонент, так как об этом уже побеспокоился разработчик MVDB.

Главная форма появляется автоматически после запуска приложения. При закрытии главной формы работа приложения завершается. Форма содержит главное меню, в котором находятся несколько важных пунктов: закрытие приложения (1), настройка подключения в базе SQLite (2), дизайнер отчетов (3) и отображение формы “About”.

📝 Изменить или скрыть главное меню можно с помощью скриптов. 

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

Модальные формы. Иерархия форм приложения

☝ При запуске приложения создаются все формы проекта, но отображается только главная форма.

Все остальные формы отображаются с помощью кнопок, настроенных для отображения модальной формы или с помощью скриптов. Модальная форма берёт фокус приложения на себя и не отпускает его, пока вы не закроете модальную форму. В то же время из одной модальной формы вы можете открыть другую модальную форму. Таким образом получается иерархия модальных форм приложения. В этой иерархии пользователь может взаимодействовать только с последней открытой формой.

На практике для простых приложений достаточно иметь главную форму, на которой располагаются наиболее значимые данные или результаты работы приложения, и несколько вспомогательных форм для редактирования данных, а также для работы со справочниками или отчетами. Например, если приложение предназначено для стоматологической клиники, то на главной форме будет располагаться график приёма пациентов, а на вспомогательных – справочник врачей, справочник пациентов и формы редактирования для записи на приём и для ведения справочников.

Самая верхняя форма, изображенная на картинке – это форма редактирования. Но прежде, чем перейти к её подробному рассмотрению, необходимо поближе познакомиться с самым мощным компонентом MVDB – кнопкой.