Формы, или Окна бывают разные

Задачи урока

  • Работа с несколькими формами.
  • Работа с компонентами RadioButton и GroupBox.

Выполнение упражнения

В этом уроке мы создадим приложение «Длина строки» (рисунок 1), которое вычисляет длину строки, введенной в однострочный редактор. У приложения будет два дополнительных окна: окно «Опций«, в котором задаются цвет фона приложения и заголовок главного окна, и окно «О программе», в котором будет содержаться информация о приложении. Последнее окно является стандартным интерфейсным элементом практически любого приложения. Через него пользователь узнаёт об авторе приложения и может поблагодарить его за проделанную работу.

а)image002 б)image004 в) image006
Рисунок 1. Окна приложения

1. Дизайн приложения

  1. В новом проекте создайте две дополнительные формы. В результате у него будут три формы (Form1, Form2, Form3) с соответствующими программными модулями (Unit1, Unit2, Unit3).
  2. Для упрощения программного кода компонентам принято присваивать осмысленные имена. Но форма  — это тоже компонент, в нашем проекте их даже три, поэтому формы переименуем следующим образом:

Имя, которое

было

Имя, на которое

необходимо изменить

Почему так сделали?

Form1

FormGeneral

Наша главная форма (General  — переводится как «главный»).

Form2

FormOptions

Форма для изменения различных установок программы (Options  — переводится как «опции», «установки»).

Form3 FormAbout

Информационная форма. Здесь находится информация о программе и о разработчике. (About  — переводится  как «О чём-то…»).

  1. Нажмите комбинацию клавиш Ctrl+F12. Перед вами появится окно просмотра списка модулей в алфавитном порядке (рисунок 2а). В этом окне можно перейти на любой модуль проекта.
  2. Нажмите комбинацию клавиш Shift+F12. Перед вами появится окно просмотра списка форм в алфавитном порядке (рисунок 2б). В этом окне можно перейти на любую форму проекта.

Запомните эти две комбинации клавиш.

а)image008 б) image010
Рисунок 2

  1. Создайте интерфейс для первой формы. Расположите компоненты, как показано на рисунке 3а, и измените значения их свойств согласно рисунку 3б.

а)image012 б) image014
Рисунок 3

Какие операции необходимо реализовать в этой форме?

  • В однострочном редакторе должен вводиться текст. Автоматически, по мере ввода текста, в метке под однострочным редактором будет отображаться число введенных символов.
  • При нажатии на кнопку «Опции» открывается форма настроек (опций) программы. В ней пользователь сможет выбирать цвет интерфейса и название заголовка главной формы.
  • При нажатии на кнопку «О программе» появляется информация о назначении приложения и об его авторе.
  • При нажатии на кнопку «Закрыть» приложение закрывается.
  1. Теперь создадим интерфейс для второй формы.

Перейдите на форму FormOptions. Расположите компоненты, как показано на рисунке 4а, и измените значения их свойств согласно рисунку 4б.

а)image016 б) image018
Рисунок 4

Здесь мы столкнёмся с двумя новыми компонентами  — RadioButtonimage019 и GroupBoximage020 из категории Standard.

Вначале поместите на форму компонент GroupBox. Этот компонент выполняет те же функции, что и компонент Panel (панель), только заголовок отображается не в центре, а в левом верхнем углу. Затем внутрь этого компонента поместите четыре компонента RadioButton.

RadioButton  — это зависимый переключатель (в отличие от компонента CheckBox). Он в единичном экземпляре бесполезен. Их должно быть, как минимум, два. Выбранный переключатель обозначен чёрной точкой.

Так как по умолчанию будет выбран белый цвет для всех форм, то у соответствующего компонента RadioButton измените значение свойства Checked на True. При этом в белом кружке появится чёрная точка, говорящая о выборе данного переключателя (рисунок 4б).

В однострочном редакторе продублируем заголовок главной формы  — «Форма1» (рисунок 4б).

  1. Теперь создадим интерфейс для последней, третьей, формы.

Перейдите на форму FormAbout. Расположите компоненты, как показано на рисунке 5а, и измените значения их свойств согласно рисунку 5б.

а)image022 б) image023
Рисунок 5

Обратите внимание, что оба текста написаны с помощью всего двух меток (Label). Дело в том, что в компоненте Label можно писать многострочные тексты, как в компоненте Memo, только без возможности их редактирования. Для этого у обоих компонентов Label значение свойства AutoSize установите False (чтобы отключить автоматический размер), а значение свойства WordWrap поставьте True (чтобы включить перенос по словам). А потом наберите тексты и измените мышью размер каждой метки так, чтобы они в них помещались.

  1. Назначьте осмысленные имена всем компонентам:

Имя, которое было

Имя, на которое необходимо изменить

Имена компонентов для формы FormGeneral (рисунок 6а)

Button1

ButtonOptions

Button2

ButtonAbout

Button3

ButtonExit

Edit1

EditIn

Label1

LabelEdit

Label2

LabelOut

Имена компонентов для формы FormOptions (рисунок 6б)

Button1

ButtonIzmen

Button2

ButtonCancel

Button3

ButtonOk

GroupBox1

GroupBox

Edit1

EditCaption

Имена компонентов для формы FormAbout (рисунок 6в)

Button1

ButtonClose

Label1

LabelInfo

Label2

LabelAutor

а)image025 б)image027 в) image029
Рисунок 6

2. Установка внешнего вида форм

  1. Для того чтобы формы появлялись в центре экрана, установите значение свойства Position (позиция) в poScreenCenter (в центре экрана) для каждой формы.
  2. Для формы FormGeneral значение свойства BorderStyle измените на bsSingle. Это значение не позволяет форме изменять размеры в режиме RunTime.

Для форм FormOptions и FormAbout значение свойства BorderStyle измените на bsToolWindow. Это значение также не позволяет форме изменять размеры и оставляет в области заголовка только кнопку закрытия окна.

Отметим, что форма FormGeneral является главной, т.е. при запуске приложения она создаётся первая. Закрыть главную форму  — означает закрыть всё приложение.

Интерфейс приложения сделан. Остаётся его «оживить».

3. Вычисление длины строки

  1. Для того чтобы вычислить длину введенной в однострочный редактор строки, напишите обработчик для события OnChange компонента EditIn:
procedure TFormGeneral.EditInChange(Sender: TObject);
Var L:Integer;
begin

  // Вычисляем длину строки
  L := Length( EditIn.Text );

  // Выводим длину строки в метку
  LabelOut.Caption := 'Длина строки = ' + IntToStr( L );

end;

Листинг 1

Событие OnChange возникает каждый раз, когда происходят изменения содержимого однострочного редактора.

В теле процедуры сначала мы вычисляем длину строки, которая находится в компоненте EditIn, а потом выводим это значение в метку LabelOut.

  1. Запустите приложение и попробуйте ввести какой-либо текст. При этом сразу же появится в метке надпись, информирующая о количестве символов во введенном тексте.
  2. Закройте приложение.

4. Начальные установки приложения

  1. При первом запуске приложения метка LabelOut отображает своё имя (LabelOut). Нам же необходимо, чтобы она отображала нулевое значение длины строки. Для этого напишите обработчик события OnCreate (данное событие возникает у формы после её создания в памяти компьютера) формы FormGeneral:
procedure TFormGeneral.FormCreate(Sender: TObject);
begin

  // Обращаемся к событию OnChange компонента EditIn
  EditInChange(Sender);

end;

Листинг 2

  1. Запустите приложение. В метке сразу же появится надпись, информирующая о том, что в однострочном редакторе находится ноль символов.
  2. Закройте приложение.
  3. Напишите уже давно знакомый обработчик события для кнопки «Закрыть».

5. Как показать дополнительную форму?

  1. Напишите обработчик события OnClick, для кнопки «О программе»:
procedure TFormGeneral.ButtonAboutClick(Sender: TObject);
begin

  FormAbout.ShowModal;

end;

Листинг 3

Здесь мы вызываем метод ShowModal формы FormAbout (переводится как «показать модально»). Этот метод показывает на экране форму в модальном режиме. Значит, пока пользователь не закроет это окно, доступ к другим окнам приложения будет заблокирован.

  1. Запустите приложение. При этом программа не запустится, а выдаст следующее сообщение:

image031
Рисунок 7

Это означает, что форма FormAbout, а точнее, соответствующий ей модуль Unit3 не прописан в списке подключённых модулей формы FormGeneral, и Delphi запрашивает разрешение на автоматическое её подключение. Нажмите на кнопку «Yes». При этом в программном коде появится следующая строка (выделена жёлтым):

implementation

uses Unit3;

{$R *.dfm}

Листинг 4

Она говорит о том, что модуль Unit3 подключен к модулю Unit1.

  1. Запустите приложение заново. Когда оно запустится, нажмите на кнопку «О программе». Откроется форма FormAbout. Вы не сможете вернуться обратно в главное окно приложения, пока не закроете это окно с помощью крестика в правом верхнем углу. Закройте окно, а потом и всё приложение.
  2. Напишите обработчик события для кнопки «Закрыть» формы FormAbout.
  3. Напишите обработчик для события OnClick, кнопки «Опции»:
procedure TFormGeneral.ButtonOptionsClick(Sender: TObject);
begin

  FormOptions.Show;

end;

Листинг 5

Запись означает, что при нажатии на кнопку «Опции» откроется окно FormOptions, только в отличие от предыдущего случая не модально. То есть, открыв это окно, можно работать с главным окном.

  1. Запустите приложения и включите модуль Unit2 в код модуля Unit1 (см. шаг 2 текущего пункта).
  2. Перейдите к форме FormOptions. Создайте для кнопки «Отмена» обработчик события OnClick. Кнопка должна закрывать эту форму.

6. Как работать с несколькими формами?

  1. Напишите обработчик события OnClick для кнопки «Ок» (ButtonIzmen), находящейся на форме FormOptions:
procedure TFormOptions.ButtonIzmenClick(Sender: TObject);
Var Color:TColor;
begin

  // Изменение значения переменной Color, в зависимости от выбранного переключателя
  If RadioButton1.Checked then Color := clWhite;
  If RadioButton2.Checked then Color := clRed;
  If RadioButton3.Checked then Color := clAqua;
  If RadioButton4.Checked then Color := clYellow;
  // Изменение цвета фона на Color, для всех форм
  FormGeneral.Color := Color;
  FormOptions.Color := Color;
  FormAbout.Color   := Color;
  // Изменение заголовка главной формы
  FormGeneral.Caption :=  EditCaption.Text;
  // Закрытие формы
  Close;

end;

Листинг 5

Поясним код:

  • вводим новую локальную переменную Color типа TСolor (выделено жёлтым). Этот тип является записью названий цветов;
  • проверяем, какой из зависимых переключателей активен, и переменной Color присваиваем соответствующий цвет (выделено зелёным);
  • меняем цвет фона всех форм на значение цвета Color (выделено голубым);
  • меняем заголовок главной формы на то, что написано в однострочном редакторе EditCaption (выделено красным);
  • закрываем форму FormOptions.
  1. Запустите теперь уже готовое приложение. Откройте опции и измените значения зависимого переключателя и текст в однострочном редакторе. Нажмите на кнопку «Ок».

7. Коротко о главном

Комбинация клавиш Ctrl+F12 открывает окно просмотра списка модулей в алфавитном порядке.

Комбинация клавиш Shift+F12 открывает окно просмотра списка форм в алфавитном порядке.

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

Для того чтобы не запутаться в формах приложения, необходимо им давать осмысленные имена.

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

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

RadioButton — это зависимый переключатель (в отличие от компонента CheckBox). Он в единичном экземпляре бесполезен. Их должно быть как минимум два. Выбранный переключатель обозначен чёрной точкой.

GroupBox — компонент-контейнер. Выполняет те же функции, что и компонент Panel (Панель), только заголовок отображается не в центре компонента, а в левом верхнем углу.

Событие OnChange возникает в момент изменения содержимого компонента.\

8. Выполнение заданий

Особенности задания

Во всех формах предусмотреть кнопку «Закрыть».

Задания I уровня сложности

  1. Создать приложение, состоящее из двух форм. На первой форме расположить:
  • четыре однострочных редактора, в которых задаются координаты вывода второй формы, её ширина и высота;
  • кнопку «Форма 2», при нажатии на которую открывается 2-я форма. Она располагается в заданном месте экрана и заданных размеров.

Причём, если координаты формы либо её размеры заданы так, что она будет выходить за границы экрана, то форма открываться не будет, а в заголовке главного окна должно выводиться сообщение «Ошибка открытия формы».

  1. Создать приложение, состоящее из двух форм. На первой форме расположить:
  • кнопку «Показать форму 2»;
  • четыре кнопки: «Вверх», «Вниз», «Влево» и «Вправо».

При нажатии на какую-либо из последних четырёх кнопок форма 2 перемещается на 3 пикселя в соответствующие стороны. Форма 2 должна находиться всегда поверх всех окон.

Когда форма 2 не показана, эти кнопки не активны.

  1. Создать приложение, состоящее из двух форм. На первой форме расположить:
  • кнопку «Показать форму 2»;
  • две кнопки: «Увеличить» и «Уменьшить».

При нажатии на какую-либо из последних двух кнопок форма изменяет (увеличивает либо уменьшает) свои размеры на 5 пикселей. Форма 2 должна находиться всегда поверх всех окон. Когда форма 2 не показана, последние две кнопки не активны.

  1. Создать приложение, состоящее из двух форм. На первой форме расположить:
  • кнопку «Показать форму 2»;
  • кнопку «Прижать».

При нажатии на кнопку «Показать форму 2» в центр экрана поверх всех окон выводится вторая форма без возможности изменения размеров. При нажатии на кнопку «Прижать» вторая форма «прижимается» верхней стороной своего окна к верхнему краю экрана и цвет её фона изменяется на красный (изначально цвет второй формы — чёрный).

  1. Создать приложение, состоящее из двух форм. На первой форме расположить:
  • однострочный редактор, в котором задаётся имя пользователя;
  • кнопку «Показать форму 2».

При нажатии на кнопку «Показать форму 2» отображается вторая форма и в её заголовке будет написано приветствие с введенным в однострочный редактор именем (например, «Привет, Вася!»).

  1. Создать приложение, состоящее из двух форм. Первая форма имеет неизменные размеры и располагается в левом верхнем углу экрана. Расположить на ней кнопку «Регистрация». При нажатии на неё открывается модальное диалоговое окно с надписью «Регистрация», на котором расположены два текстовых поля и кнопка «Регистрация».
    В тестовые поля пользователь должен ввести свою фамилию и имя. При нажатии на кнопку «Регистрация» необходимо проверить заполнение текстовых полей и, если они заполнены, только тогда закрыть форму 2. После её закрытия в заголовке первой формы должны появиться введенные имя и фамилия. Форма 2 не должна иметь кнопок закрытия и не должна изменять свои размеры.
  2. Создать приложение, состоящее из двух форм. На первой форме расположить:
  • три радиокнопки (с заголовками: «Жёлтый», «Зелёный» и «Синий»), расположенные в контейнере GroupBox с заголовком «Цвет фона»;
  • три радиокнопки (с заголовками: «Жёлтый», «Зелёный» и «Синий»), расположенные в контейнере GroupBox с заголовком «Цвет текста»;
  • кнопку «Показать форму 2».

При нажатии на кнопку «Показать форму 2» показывается вторая форма с заданным в первой форме цветом фона. Вторая форма содержит надпись «Привет!» с заданным в первой форме цветом текста.

  1. Создать приложение, состоящее из двух форм. На первой форме расположить:
  • кнопку «Показать форму 2», при нажатии на которую отображается вторая форма;
  • кнопку «Закрыть форму 2» , при нажатии на которую закрывается вторая форма.

На второй форме расположить кнопку «Закрыть всё», при нажатии на которую вся программа завершает работу.

  1. Создать приложение, состоящее из двух форм. На первой форме расположить:
  • четыре радиокнопки (с заголовками: «Левый верхний», «Левый нижний», «Правый верхний», «Правый нижний»). Расположите эти кнопки в контейнере GroupBox с заголовком «Прижать вторую форму»;
  • кнопку «Показать форму 2», при нажатии на которую модально отображается вторая форма, прижатая к указанному углу экрана.
  1. Создать приложение, состоящее из трёх форм. На первой форме расположить кнопку «Показать». При нажатии на эту кнопку появляется вторая форма. Если её закрыть, то вместо неё появится третья. Если закрыть третью, то появится опять вторая и т. д. На первой форме должна находиться метка, которая должна информировать, какая из форм (вторая или третья) активна.

Задания II уровня сложности

  1. Создать приложение, состоящее из трёх форм. На первой форме расположить:
  • два пустых однострочных редактора, в которые вводятся фамилия и имя;
  • кнопку «Показать», которая в момент запуска программы не активна.

Если однострочные редакторы заполнены, то кнопка «Показать» становится активной. При её нажатии отображаются дополнительные две формы. В первой отображается фамилия, а во второй форме — имя. Отображение происходит в компоненте Label. Форма с фамилией должна быть «приставлена» к первой форме сверху, а форма с именем — снизу. Т. е. левый нижний угол второй формы должен совпадать с левым верхним углом первой формы, а левый верхний угол третьей формы должен совпадать с левым нижним углом первой формы.

  1. Создайте приложение, состоящее из двух форм. На первой форме расположите:
  • кнопку «Открыть»;
  • четыре радиокнопки (с заголовками: «Лево», «Право», «Верх», «Низ»). Расположите эти кнопки в контейнере GroupBox с заголовком «Прижать вторую форму».

При нажатии на кнопку «Открыть» показывается вторая форма, прижатая к выбранной части экрана. Причём она растягивается на всю длину этой части с фиксированной толщиной в 100 пикселей. Кнопка «Закрыть» всегда расположена в центре второго окна. Цвет второй формы будет зависеть от того, к какой части экрана она прижата: верх — красная, низ — жёлтая, лево — зелёная, право — белая. Вторая форма не изменяет свои размеры.

  1. Создайте приложение, состоящее из пяти форм. На первой форме находится кнопка «Расположить», при нажатии на которую появляются ещё четыре формы (изначально жёлтого цвета) и располагаются на экране следующим образом:
Форма2 Форма3
Форма1
Форма4 Форма5

Причём, если какая-либо форма становится активной, то её цвет изменяется на красный.

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