Демонстрация события клика по кнопке

В этом разделе мы добавим события для кнопок: при нажатии кнопки код выполнит определённые операции. Мы покажем два примера: изменить текст кнопки по клику и закрыть окно через вторую кнопку.

Создать новый проект графического интерфейса

Нажмите верхнее главное меню: Project (Проект) → New Project (Новый проект) → Application (Приложение) (также можно создать через File (Файл) → New → Project → Application) — будет создан полностью новый графический проект GUI.

Или

После создания откроются несколько окон: верхняя панель главного меню, левый Инспектор объектов (Object Inspector) и большой Редактор кода (Source Editor), занимающий основную часть экрана.

Добавить две кнопки на форму

Под верхней панелью меню находится панель вкладок категорий элементов управления

Выделенный красной рамкой участок — панель категорий элементов, разделён на вкладки: первая Standard (Стандартные элементы), вторая Additional…

Если вкладка «Standard» не выбрана, щёлкните по ней для активации;

Найдите значок кнопки (прямоугольник с надписью OK), щёлкните по нему, затем кликните по левой части формы Form1 — на форме появится кнопка с именем Button1;

Снова щёлкните по значку кнопки на панели Standard и кликните по правой части формы, чтобы создать вторую кнопку Button2.

Если вы не разобрались с шагами, посмотрите видео предыдущего урока.

Следуйте указанным шагам, чтобы добавить две кнопки.

Настроить текст Button1 и написать событие клика

Щёлкните для выделения Button1 — левый инспектор объектов покажет все его свойства:

Если панель настроек скрыта, нажмите кнопку со стрелкой на панели элементов, чтобы отобразить её (или используйте F12 для переключения между формой и кодом).

После выделения первой кнопки в верхней части левой панели указан активный элемент Button1, а внизу расположены две вкладки: Свойства и События.

Вкладка Свойства отвечает за внешний вид, стиль, размер и другие визуальные параметры кнопки.

Вкладка События позволяет привязать действия для взаимодействия: клик, наведение курсора, выход из области элемента и т.д.

• Найдите верхнее свойство Caption (Заголовок), замените стандартное значение Button1 на Press, нажмите Enter или кликните по пустому месту — текст кнопки обновится сразу;
• Перейдите на вкладку «Events (События)» инспектора объектов: здесь перечислены все срабатываемые события кнопки (клик, наведение, выход курсора…);
• Найдите OnClick (Событие клика), нажмите кнопку с тремя точками ... справа — редактор автоматически перейдёт на страницу кода и создаст пустую функцию обработки клика:

Кликните по пустому участку для подтверждения изменения, текст кнопки на форме сменится.

Оставьте кнопку выделенной и перейдите на вкладку Events (События)

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

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

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

procedure TForm1.Button1Click(Sender: TObject);
begin
  Button1.Caption := 'Press again'; // введите этот код
end;
Code language: JavaScript (javascript)

При запуске программы клик по кнопке запустит код из выделенного блока, мы перейдём в секцию логики Pascal для реализации любых операций. Большинство программ GUI построены по этой модели событийно-ориентированной разработки.

Сочетание клавиш F12 для быстрого возврата в редактор форм.

Настроить текст Button2 и событие закрытия программы

Выделите Button2, в инспекторе объектов измените свойство Caption на Exit;

Также перейдите к событию OnClick, нажмите ... для перехода к коду и введите команду закрытия окна:

procedure TForm1.Button2Click(Sender: TObject);
begin
  Close; // закрыть окно и завершить программу
end;Code language: JavaScript (javascript)

Сохранить проект (сохраняйте регулярно)

В верхнем меню выберите Project → Save Project As (Сохранить проект как), сначала сохраните файл модуля формы (расширение .pas);

Затем появится окно с запросом сохранить файл конфигурации проекта (расширение .lpi).

Важно: имя файла модуля и имя проекта не должны совпадать, иначе при компиляции появится ошибка «повторяющийся идентификатор»

Скомпилировать и запустить программу

Два способа запуска:

• Меню: Run (Запустить) → Run;
• Сочетание клавиш: нажмите F9. IDE автоматически скомпилирует и соберёт код, при отсутствии ошибок сразу запустит готовое приложение.

При запуске откроется чистое окно (без сетки для проектирования) — это главное окно программы:

• Клик по кнопке Press изменит её надпись на Press again;
• Клик по кнопке Exit закроет окно и завершит программу, автоматически вернув вас в редактор форм с сеткой для дальнейшего редактирования кода.