Печатать книгуПечатать книгу

§ 3. Проектирование интерфейса оконного приложения с использованием элементов управления

Сайт: Профильное обучение
Курс: Информационные технологии. 11 класс (Базовый уровень)
Книга: § 3. Проектирование интерфейса оконного приложения с использованием элементов управления
Напечатано:: Гость
Дата: Пятница, 3 Май 2024, 20:56

Оглавление

3.1. Основные элементы управления

Элементами управления называются объекты, которые используются для отображения данных или выполнения операций с данными. Действия с элементами управления можно осуществлять с помощью мыши или клавиатуры. Управление различными программами более или менее единообразно, потому что в составе ОС имеется набор элементов управления: типовых кнопок, редактируемых полей, списков выбора, флажков, переключателей и т. д. Все элементы управления собраны в специальные библиотеки компонентов. Среда разработки программ Delphi использует библиотеку VCL (Visual Component Library) — библиотеку визуальных компонентов.

Компоненты библиотеки VCL размещаются на различных страницах палитры компонентов (пример 2.7.). Каждая страница имеет свое название. На страницах Standard (пример 3.1.) и Additional (пример 3.2.) размещены наиболее употребляемые компоненты.

Расположение компонентов по страницам палитры компонентов запоминать необязательно. Можно воспользоваться поиском (пример 3.3.).

Каждому элементу управления в среде Delphi соответствует один или несколько компонентов.

Пример 3.1. Палитра компонентов Standard:

Пример 3.2. Палитра компонентов Additional:

Пример 3.3. Поиск компонента Button:

3.2. Элемент управления Button (кнопка)

Компонент Button (кнопка) относится к элементам управления. На панели компонентов Standard кнопка изображена в виде , имя объекта — Button. Кнопка, помещенная на форму, получает имя ButtonN, где N — номер 1, 2, 3… (пример 3.4). При необходимости кнопку можно переместить в любое место формы. Ключевые точки позволят установить нужный размер кнопки.

Некоторые свойства компонента Button перечислены в таблице (пример 3.5).

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

Основным событием компонента Button является OnClick. Для создания обработчика события OnClick для кнопки можно поступить так же, как и при создании аналогичного обработчика для формы: выбрать событие на вкладке Events и выполнить двойной щелчок в поле напротив события OnClick. Можно просто выполнить двойной щелчок по кнопке. (Для формы основным событием является событие OnCreate, поэтому при двойном щелчке по форме создается обработчик события OnCreate)

Пример 3.6. Создать проект, разместив на форме две кнопки. При нажатии на одну из них цвет формы должен измениться на синий, а при нажатии на вторую — должен восстановиться исходный цвет.

Этапы выполнения задания

  1. Поместить на форму две кнопки.
  2. Изменить свойство Caption у кнопки Button1 на Изменить цвет.
  3. Изменить свойство Caption у кнопки Button2 на Восстановить цвет.
  4. Создать обработчик события OnClik для кнопки Button1 и  изменить цвет формы. Команда
    Form1.Color := clBlue;
  5. Создать обработчик события OnClik для кнопки Button2 и изменить цвет формы на первоначальный (название цвета формы указано в поле Color инспектора объектов). Команда
    Form1.Color := clBtnFace;
  6. Сохранить изменения в проекте.

Пример 3.4. Компонент Button на форме:

Пример 3.5. Свойства компонента Button.

Свойство

Назначение

Caption

Заголовок (внешнее имя) кнопки, текст, который отображается на кнопке. По умолчанию — Button1

Font

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

Height

Высота кнопки

Weight

Ширина кнопки

Left

Горизонтальная координата положения верхнего левого угла кнопки на форме

Top

Вертикальная координата положения верхнего левого угла кнопки на форме

Name

Имя (внутреннее) кнопки. Используется в программном коде для обращения к объекту. Является идентификатором

Enable

Значение True этого свойства обеспечивает доступность кнопки для мыши или клавиатуры

Visible

Значение True этого свойства обеспечивает видимость кнопки во время выполнения приложения

Пример 3.6. Внешний вид формы в режиме конструктора дизайна:

Внешний вид формы при выполнении:

Кроме кнопок Button в Delphi применяются кнопки  и , расположенные на палитре компонентов Additional.

Кнопки BitBtn — кнопки с изображением. Свойство Kind данного объекта позволяет выбрать кнопку с одним из стандартных изображений.

Кнопки SpeedBtn (кнопки с фиксацией и графикой) применяются  тогда, когда требуется фиксация нажатого состояния.

Свойство Glyph позволяет вставить изображение из файла на кнопках BitBtn и SpeedBtn.

3.3. Элемент управления Label (метка)

Компонент Label (метка) предназначен для отображения текста на форме. На панели компонентов Standard метка изображена в виде , имя объекта — Label. Метка, помещенная на форму, получает имя LabelN, где N — номер 1, 2, 3… (пример 3.7).

Некоторые свойства компонента Label (метки), отличные от свойств компонента Button (кнопки), перечислены в таблице (пример 3.8).

Основным событием для компонента Label является OnClick.

Пример 3.9. Создать проект, в котором будет реализовано следующее действие: при щелчке мыши по кнопке «Приветствие» появляется «Здравствуй мир».

Этапы выполнения задания

  1. Изменить свойство Caption формы на «Работаем с кнопкой и меткой».
  2. Добавить на форму кнопку Button1.
  3. Изменить свойство Caption кнопки на «Приветствие».
  4. Добавить на форму метку Label1.
  5. Изменить свойства шрифта для компонента Label1. Нажать кнопку  в поле Font (цвет шрифта — синий, размер — 20, стиль — жирный курсив).
  6. Очистить поле Caption у метки.
  7. В обработчик события OnClick для кнопки Button1 вписать команду
    Label1.Caption := 'Здравствуй, мир';

Пример 3.7. Компонент Label на форме:

Пример 3.8. Свойства компонента Label:

Свойство

Назначение

Caption

Отображает введенный текст на форме

Color

Устанавливает цвет фона метки. Работает только, если у свойства Transparent установлено значение false

Alignment

Горизонтальное выравнивание текста относительно границ метки: taCenter (по центру), taLeftJustify (по левому краю), taRightJustify(по правому краю)

AutoSize

Значение true этого свойства приводит к автоматическому изменению размеров метки в соответствии с длиной текста

LayOut

Вертикальное выравнивание текста относительно границ метки: tlCenter (по центру), tlBottom (по верхнему краю), tlTop (по нижнему краю)

Transparent

Значение true (установлено по умолчанию) задает прозрачный фон метки

WordWrap

Значение true этого свойства обеспечивает автоматический перенос слов по строкам

Пример 3.9. Форма на этапе конструирования:

Работающее приложение:

 

3.4. Элемент управления Edit (текстовое поле)

Edit (текстовое поле) — компонент, который предназначен для ввода и вывода текстовой информации. На панели компонентов Standard текстовое поле изображено в виде , имя объекта — Edit.

Компонент Edit, помещенный на форму, получает имя  EditN, где N — номер 1, 2, 3… (пример 3.10).

В отличие от других рассмотренных компонентов, компонент Edit не обладает свойством Caption. Некоторые свойства компонента Edit приведены в таблице (пример 3.11).

Значение свойства Text можно задать на этапе конструирования, изменив его в инспекторе объектов. При выполнении программы пользователь, который вводит текст в компонент Edit, меняет значение свойства Text. Также свойство Text компонента Edit может изменяться программно. Основным событием компонента Edit является OnChange, которое происходит при изменении компонента. Наиболее часто программируют событие OnKeyPress, которое позволяет определить, какая клавиша была нажата.

Пример 3.12. Создать проект, в котором пользователя попросят ввести его имя (например, Елизавета), а затем, после нажатия клавиши Enter, будет выдано сообщение «Елизавета, приятно с Вами познакомиться!».

Этапы выполнения задания

  1. Изменить свойство Caption у формы на «Знакомство».
  2. Разместить на форме две метки и текстовое поле.
  3. Изменить свойство Caption у Label1 на «Введите свое имя и нажмите клавишу Enter».
  4. Очистить поле свойства Caption у Label2.
  5. Очистить поле свойства Text у Edit1.
  6. Написать обработчик события OnKeyPress для компонента Edit1, который будет проверять нажатие клавиши ввода (код клавиши Enter — 13). Если клавиша нажата, то поменять свойство Caption у Label2:

  if key = #13 then
Label2.Caption := Edit1.Text +
', приятно с Вами познакомиться!';

Текстовое поле Edit используется также для ввода и вывода чисел. При этом необходимо использовать функции для преобразования строк в числа и чисел в строки. Эти функции приведены в таблице (пример 3.13).

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

В русскоязычной версии Windows в качестве разделителя целой и дробной части числа по умолчанию используется запятая. Если при вводе чисел в текстовые поля использовать точку, то будет возникать ошибка преобразования типов.

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

Этапы выполнения задания

  1. Изменить свойство Caption у формы на «Квадрат и корень».
  2. Разместить на форме три метки, три текстовых поля и кнопку.
  3. У компонентов Edit1, Edit2, Edit3 очистить поле свойства Text.
  4. Изменить свойство Caption у Label1 на «Введите неотрицательное число». Для размещения текста в две строки необходимо установить значение True у свойства WordWrap.
  5. Изменить свойство Caption у Label2 на «Квадрат числа».
  6. Изменить свойство Caption у Label3 на «Корень из числа».
  7. Изменить свойство Caption у Button1 на «Расчет».
  8. Написать обработчик OnClick для кнопки.

Пример 3.10. Компонент Edit (текстовое поле) на форме:

Пример 3.11. Свойства компонента Edit:

Свойство

Назначение

BorderStyle

Определяет границу вокруг текстового поля: bsNone (нет границы), bsSingle (есть граница). Внешний вид границы можно изменять с помощью свойств BevelInner, BevelKind, BevelOuter

MaxLength

Ограничивает количество символов, которые можно ввести в Edit

ReadOnly

Значение True запрещает редактирование текста, отображаемого в Edit

Text

Содержит вводимый или выводимый текст

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

  • копирование выделенного текста в буфер обмена (комбинация клавиш Ctrl+С);
  • вырезание выделенного текста в буфер обмена (комбинация клавиш Ctrl+Х);
  • вставка текста из буфера обмена в позицию курсора (комбинация клавиш Ctrl+V);
  • отмена последней команды редактирования (комбинация клавиш Ctrl+Z).

Пример 3.12. Форма на этапе конструирования:

Работающее приложение:

Пример 3.13. Функции преобразования чисел и строк:

Название функции

Действие

Ввод с помощью Edit

StrToInt

Преобразование строки в целое число

StrToFloat

Преобразование строки в значение с плавающей запятой (соответствует типу экспоненциальный в Excel)

Вывод с помощью Edit

IntToStr

Преобразование целого числа в строку

FloatToStr

Преобразование вещественного числа в строку

FloatToStrf

Преобразование вещественного числа в строку по заданному формату. Например, FloatToStrf(d, ffFixed,5,2) позволит вывести число занимающее 5 позиций, из которых 2 отводятся для дробной части числа

Пример 3.14. Форма на этапе конструирования:

Обработчик события OnClick для Button1.

procedure TForm1.Button1Click(Sender: TObject);

var a, b: integer;

    c: real;

begin

  a := StrToInt(Edit1.Text);

  b := a * a;

  c := sqrt(a);

  Edit2.Text := IntToStr(b);

  Edit3.Text := FloatToStrF(c,
              FFfixed, 7, 3 );

end;

Работающее приложение:

Вместо двух компонентов Label и Edit можно использовать один LabeledEdit, сочетающий в себе свойства обоих компонентов. Находится компонент на палитре Additional: .

3.5. *Элементы управления CheckBox (флажок) и RadioButton (переключатель)

Компонент CheckBox (флажок) используется в приложениях для включения или выключения каких-либо опций. На панели компонентов Standard флажок изображен в виде , имя объекта — CheckBox. Флажок, помещенный на форму, получает имя CheckBoxN, где N — номер 1, 2, 3… (пример 3.15). Некоторые свойства компонента CheckBox приведены в таблице (пример 3.16).

Компонент RadioButton (переключатель, радиокнопка) используется в приложениях для включения или выключения каких-либо опций. На панели компонентов Standard радиокнопка изображена в виде , имя объекта — RadioButton. Переключатель, помещенный на форму, получает имя — RadioButtonN, где N — номер 1, 2, 3… (см. пример 3.15).

Свойства Caption, Alignment и Checked у радиокнопки совпадают с аналогичными свойствами флажка.

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

Пример 3. 17. Создать проект для вычисления частного от деления одного целого числа на другое. Числа задаются в текстовых полях. Результат вычисляется при нажатии на кнопку «Разделить» и помещается в третье текстовое поле. В зависимости от состояния флажка в результате выдается целое или вещественное значение частного.

Этапы выполнения задания

  1. Поместить на форму три текстовых поля, три надписи, флажок и кнопку.
  2. Очистить поля Text у всех компонентов Edit.
  3. Для компонента Edit3, в котором будет выводиться ответ, установить значение True для свойства ReadOnly.
  4. Изменить свойство Caption у компонентов Label («Делимое», «Делитель», «Частное»).
  5. Изменить свойство Caption компонента Button1 на «Разделить».
  6. Изменить свойство Caption компонента CheckBox1 на «Целочисленное деление».
  7. Написать обработчик события OnClick для компонента Button1.
    7.1. Проверить, что поля компонентов Edit1 и Edit2 не пусты. Если это не так, то вывести сообщение «Одно из полей не заполнено».
    7.2. Проверить состояние переключателя CheckBox. Если он включен, то выполнить целочисленное деление, иначе обычное деление.
    7.3. Вывести результат.
  8. Выполнить программу для различных значений. Проверить работу приложения, когда одно из полей Edit1 или Edit2 (или оба поля) пустые.

Пример 3.15. Компоненты CheckBox (флажок) и RadioButton (радиокнопка) на форме:

Пример 3.16. Свойства компонента CheckBox (флажок):

Свойство

Назначение

Checked

Значение True у этого свойства показывает, что компонент выделен (установлена галочка — ), при значении False компонент не выделен (пустое окно индикатора — )

AllowGrayed

Значение False у этого свойства (установлено по умолчанию) допускает два состояния флажка: выделен и не выделен, значение True допускает три состояния флажка: выделен, не выделен и промежуточное

State

Позволяет выбрать одно из трех состояний флажка: cbChecked (выделен), cbGrayed(промежуточное значение — ) и cbUnchecked (не выделен) при значении True у свойства AllowGrayed

Caption

Надпись возле компонента CheckBox

Alignment

Определяет с какой стороны кнопки размещается надпись: taLeftJustify (слева), taRightJustify (справа)

Пример 3.17. Форма на этапе конструирования:

Обработчик события OnClick для Button1.

procedure TForm1.Button1Click(Sender: TObject);
var a, b, c : integer;
    d : real;
begin
  if (Edit1.Text <> '') and
     (Edit2.Text <> '') then
  begin
    a := StrToInt(Edit1.Text);
    b := StrToInt(Edit2.Text);
    if CheckBox1.checked then
    begin
      c := a div b;
      Edit3.Text := IntToStr(c);
    end
    else
    begin
      d := a / b;
      Edit3.Text := FloatToStrF(d, ffFixed, 5, 2);
    end;
  end
  else
    ShowMessage('Одно из полей
               не заполнено');
end;

Работающее приложение:

Деление нацело

Вещественный результат деления

Поля не заполнены

Вопросы к параграфу

1. Какие компоненты относят к элементам управления?

2. Как поместить компонент на форму?

3. Какие свойства компонента Button вы можете назвать?

4. Какое событие является основным для компонента Button?

5. Для чего предназначен компонент Label?

6. В каких случаях используется компонент Edit?

7. Для чего предназначены компоненты CheckBox и RadioButton?

Упражнения

   

1. Откройте проект из примера 3.9 и дополните его кнопкой «Очистить»[1] . Кнопка «Очистить» должна удалять текст метки (Свойству Caption присвоить значение пустой строки: ""). Сделайте случайным выбор цвета и размера шрифта у метки.

2. Откройте проект из примера 3.12 и добавьте на форму три метки и две кнопки.

    1. Измените свойства компонентов в соответствии с таблицей.

Компонент

Свойство

Значение свойства

Button1

Caption

Да

Button1

Visible

False

Button2

Caption

Нет

Button2

Visible

False

Label3

Caption

Вы хотите работать в ИТ?

Label3

Visible

False

Label4

Caption

Замечательно! Успехов в изучении информатики! Она Вам понадобится!

Label4

Visible

False

Label5

Caption

Другие профессии тоже требуют знания информатики.

Label5

Visible

False

2. Добавьте в обработчик события KeyPress команду, которая делает надпись Label3 и кнопки видимыми.

procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);
begin
  if key = #13 then
  begin
    Label2.Caption := Edit1.Text + ', приятно с Вами познакомиться!';
    Label3.Visible := True;
    Button1.Visible := True;
    Button2.Visible := True;
  end;
end;

3. Напишите обработчики OnClick для кнопок Button1 и Button2. Сделайте видимыми соответствующие надписи.

Форма на этапе проектирования

Работающее приложение после запуска

Работающее приложение до ответа на вопрос

Работающее приложение после ответа на вопрос

4*. Добавьте в приложение еще один вопрос. Форму ответа выберите самостоятельно.

3. Создайте проект Калькулятор. Разместите на форме три текстовых поля и три надписи: «Первое число», «Второе число», «Результат». Добавьте кнопки для вычисления суммы, разности, произведения и частного. Запретите редактирование в поле с ответом. * Добавьте проверку деления на нуль.

Форма на этапе проектирования

Работающее приложение

4. Создайте проект, в котором вычисляется доход по вкладу. Программа должна обеспечивать расчет денежных сумм для простых или капитализированных вкладов. Если вклад простой, то каждый месяц начисляется одинаковая процентная ставка от исходной суммы. При капитализированном вкладе начисление производится ежемесячно от суммы вклада в предыдущем месяце.

Список компонентов

Форма на этапе проектирования

Работающее приложение

Проверьте, заполнены ли поля с исходными данными. Если нет, то выведите соответствующее сообщение.

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

6. Добавьте в упражнение 5 кнопку «Домой», которая должна передвинуть «убегающую» в верхний левый угол формы.


[1] Перед изменением скопируйте проект в новую папку.