Обработка событий, или Ура! Заработала!

Всё в мире состоит из определённого рода событий и наших реакций на них. Например, на улице пошёл дождь и вы открыли зонт. То же самое происходит и в жизни компьютерных приложений. У них также возникают события, которые провоцируют пользователь либо операционная система, и они по-своему на них реагируют согласно заложенному в них программному коду.

Задачи урока

  • Обработка события OnClick.
  • Научиться назначать компонентам осмысленные имена.
  • Работа с компонентом.

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

В этом уроке мы напишем первое приложение, реагирующее на событие — нажатие на кнопку. Оно будет состоять из двух кнопок («Ок» и «Закрыть»), одного однострочного редактора Edit и одной метки Label (рисунок 1). При нажатии на первую — «Ок» — в однострочном редакторе появляется надпись «Ура! Заработала!», а при нажатии на — вторую «Закрыть» — приложение закрывается (аналог крестика в правом верхнем углу).

image076
Рисунок 1. Окно приложения

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

  1. Разместите компоненты, как показано на рисунке 2, и измените их свойство Caption в соответствии с рисунком 1. Как видно из рисунка, на форме находятся один компонент метки Label1, один компонент однострочного редактора Edit1 и две кнопки Button1 и Button2.
  2. У компонента Edit1 очистите свойство Text.

image080
Рисунок 2

2. Назначение компонентам имён

  1. Поменяйте свойства Name у всех компонентов, как показано ниже:

Имя, которое

было

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

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

Для чего мы так сделали ?

Form1

Form1

Ничего не изменили, т. к. форма одна. А если мы уберём 1, то будет ошибка, т. к. слово Form — зарезервировано

Label1

Label1

Также ничего не изменили ( метка одна ). Если уберём 1, то будет ошибка, т. к. слово Label — зарезервировано

Edit1

editOut

Out — означает вывод. Т. е. в этот компонент будем выводить текст

Button1

buttonOk

Ok — обычно так называется кнопка, выполняющая какое-либо действие
Button2 buttonExit

Exit (Выход) — кнопка, которая завершает работу приложения

 

  1. Откройте окно Дерево объектов. Посмотрите, как изменились имена (рисунок 3). Теперь вы можете выбирать компоненты через дерево, уже точно зная, что делает каждый компонент.

image082
Рисунок 3

3. Обработка событий

Итак, на форме мы расположили две кнопки, метку и однострочный редактор.

Рассмотрим самое распространённое событие большинства приложений — это нажатие на кнопку. Называется оно OnClick. Обработаем это событие на кнопках ButtonOk и ButtonExit .

  1. Выберите кнопку ButtonOk (через окно Дерево объектов, либо непосредственно на форме).
  2. Активируйте окно Инспектор объектов, щёлкнув на нём мышью (либо клавишей F11, если он находится не в пределах видимости).
  3. В Инспекторе объектов откройте вкладку Events и два раза щёлкните по правому столбцу напротив события OnClick (находится почти в самом верху). В результате среда Delphi автоматически сгенерирует процедуру с именем ButtonOkClick (Листинг 1).

Текст этой процедуры будет находиться в специальном окне кода.

Имя процедуры состоит из имени кнопки и названия события. Оно генерируется автоматически и может быть изменено пользователем непосредственно в окне Инспектор объектов. Нам не требуется его изменять, т. к. оно и так вполне осмысленное (ButtonOkClick читается как «Кнопка Ок Щелчок»).

procedure TForm.ButtonOkClick(Sender: TObject);
begin
end;

Листинг 1

Теперь между зарезервированными словами begin end можно записать действие, которое произойдет, если нажать на кнопку.

  1. Чтобы отобразить в компоненте с именем EditOut текст «Ура! Заработала!», необходимо записать код:
procedure TForm.ButtonOkClick(Sender: TObject);
begin
EditOut.Text:='Ура! Заработала!';
end;

 Листинг 2

  1. Создайте процедуру для события OnClick кнопки ButtonExit. Это событие должно приводить к завершению работы приложения. Для этого в созданной процедуре ButtonExitClick необходимо обратиться к методу Close (переводится как «закрыть») для нашей формы (Form1). Код процедуры выглядит следующим образом:
procedure TForm.ButtonExitClick(Sender: TObject);
begin Form1.Close;
end;

Листинг 3

  1. Теперь запустите проект и, нажимая на кнопки, насладитесь торжеством разума!

 

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

Для работы с событиями служит вкладка Events окна Инспектор объектов. Там перечислены все события для выбранного компонента.

Самое распространённое событие большинства компонентов — OnClick (нажатие на компонент).

5. Выполнение задания

Особенности задания
  • Перед размещением компонентов на форме желательно нарисовать их расположение на листе бумаги.
  • Кнопка выхода из приложения — обязательна, хотя в заданиях она не указана.
  • В заданиях второго уровня сложности вам потребуется Оператор условного перехода.

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

1. Создайте приложение «Разговор с миром» с полем ввода Edit и двумя кнопками: «Привет» и «Пока». При нажатии на кнопку «Привет» в поле ввода должна появиться надпись «Здравствуй, мир», а при нажатии на кнопку «Пока» — «До свидания, мир».


2. Создайте приложение с полем ввода Edit и двумя кнопками: «Имя» и «Очистить». При нажатии на кнопку «Имя» в компоненте Edit должно отобразиться ваше имя. А при нажатии на кнопку «Очистить» поле ввода должно быть очищено.


3. Создайте приложение «Заголовок, который ты выбираешь!». В поле ввода Edit пользователь заносит текст, и при нажатии на кнопку этот текст должен отобразиться в заголовке формы, которая изначально имеет надпись «впиши своё название».


4. Создайте приложение, где в поле ввода Edit пользователь заносит текст. При нажатии на кнопку этот текст должен отобразиться в компоненте Label, который изначально имеет надпись «Нет сообщений».


5. Создайте приложение «Меню» с полем ввода Edit и тремя кнопками: «Первое», «Второе» и «Компот». При нажатии на кнопку «Первое» в поле ввода отображается первое блюдо, например, суп. При нажатии на кнопку «Второе» — второе блюдо, например, каша. При нажатии на кнопку «Компот» — в поле ввода появляется текст «и компот !!!».


6. Создайте приложение с двумя метками Label и двумя кнопками: «Заголовок1» и «Заголовок2». При нажатии на кнопку «Заголовок1» заголовок формы меняется на содержимое первой метки. При нажатии на кнопку «Заголовок2» — на содержимое второй метки.


7. Создайте приложение «Царский приказ» с меткой Label и двумя кнопками: «Казнить», «Помиловать». При нажатии на кнопку «Казнить» текст метки становится «КАЗНИТЬ, нельзя помиловать!», а при нажатии на кнопку «Помиловать» — «Казнить нельзя, ПОМИЛОВАТЬ!»


8. Создайте приложение с меткой Label и двумя кнопками: «Красный», «Синий». При нажатии на кнопку «Красный» в метке должен отобразиться текст «красный» и цвет метки должен измениться на красный. При нажатии на кнопку «Синий» — текст «синий» и цвет метки, соответственно, синий.


9. Создайте приложение «Русско-английская поддержка» с двумя кнопками. Вначале на первой кнопке должно быть написано «English», а на второй кнопке — «Русский». При нажатии на первую кнопку названия кнопок меняются на «English» и «Russian», а при нажатии на вторую кнопку — на «Английский» и «Русский» для первой и второй кнопки соответственно.

 

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

1. Создайте приложение «Переключатель» с меткой Label и кнопкой. Вначале на кнопке должно быть написано «Включить», а в метке — «Выключено». Нажатие на кнопку приводит к появлению текста «Включено», а надпись на кнопке меняется на «Выключить». Повторное нажатие возвращает исходный текст «Выключено», а надпись на кнопке снова становится «Включить».