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

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

Элементами управления называ­ются объекты, которые используются для отображения данных или органи­зации взаимодействия между пользо­вателем и приложением с помощью мыши или клавиатуры. Они собраны в специальные библиотеки компонен­тов, которые ОС использует для обе­спечения единообразного интерфейса

Для элементов управления использу­ется и другое название — виджеты. Сло­во употребляется примерно с 1920-х гг. в американском английскомприкладных программ. Наиболее рас­пространенными элементами управ­ления являются: кнопки, редактируе­мые поля, списки выбора, флажки, переключатели и т. д.

Компоненты библиотеки размеща­ются на различных страницах пали­тры компонентов. Каждая страница имеет свое название. На странице Стандартные элементы управления (пример 3.1) размещены наиболее упо­требляемые компоненты:

  • Кнопка (Button)
  • Надпись (Label)
  • Поле для ввода текста (TextBox)
  • Флажок (CheckBox)
  • Радиокнопка (RadioButton)
  • Список (ListBox)
  • Выпадающий список (ComboBox)
  • Рисунок (PictureBox)

Внешний вид этих компонентов на форме был представлен в примере 1.4.

Другие страницы палитры компо­нентов показаны в примерах 3.2 и 3.3.

Одним из наиболее используемых компонентов палитры Компоненты является компонент Таймер (Timer).

Палитра Меню и панели инстру­ментов содержит компоненты, необ­ходимые для создания главного меню программы или контекстных меню для различных объектов, помещен­ных на форму.

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

Палитра Данные содержит ком­поненты для работы с таблицами баз данных.

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

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

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

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

Основным событием кнопки явля­ется Click. Для создания обработчика события Click для кнопки можно по­ступить так же, как и при создании аналогичного обработчика для формы: выбрать событие на вкладке События () и выполнить двойной щелчок в

поле напротив события Click. Можно просто выполнить двойной щелчок по кнопке. (Для формы основным со­бытием является событие Load, поэ­тому при двойном щелчке по форме создается обработчик события Load.)

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

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

  1. Создать на форме две кнопки.
  2. Изменить свойство Text у кноп­ки button1 на Изменить цвет.
  3. Изменить свойство Text у кноп­ки button2 на Восстановить цвет.
  4. Создать обработчик события Click для кнопки button1 и изменить цвет формы. Команда

BackColor := Color.Blue;

  1. Создать обработчик события Click для кнопки button2 и изменить цвет формы на первоначальный (на­звание цвета формы указано в поле Color инспектора объектов). Команда

    BackColor := Control;

  2. Сохранить изменения в проекте.

Название цвета SystemColors. Control задает не какой-то определен­ный цвет. Это цвет элемента управ­ления, заданный цветовой схемой Windows. Поэтому он не обязательно будет серым.

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

Компонент метка предназначен для отображения текста на форме. На па­нели компонентов Стандартные эле­менты управления метка изображена в виде , имя объекта — label. Кнопка, помещенная на форму, полу­чает имя labelN, где N — номер 1, 2, 3… (пример 3.7).

Некоторые свойства метки, отлич­ные от свойств кнопки, перечислены в таблице (пример 3.8). Основным со­бытием для метки является Click.

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

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

    1. Изменить свойство Text формы на «Работаем с кнопкой и меткой».
    2. Добавить на форму кнопку button1.
    3. Изменить свойство Text кнопки на «Приветствие».
    4. Добавить на форму метку label1.
    5. Изменить свойства шрифта для компонента labell. Нажать кнопку в поле Font (цвет шрифта — синий, раз­мер — 20, стиль — жирный курсив).
    6. Очистить поле Text у метки.
    7. Установить значение true у свой­ства метки Autosize.
    8. В обработчик события Click для кнопки button1 вписать команду

label1.Text := ‘Здравствуй, мир!‘;

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

Текстовое поле — компонент, кото­рый предназначен для ввода и выво­да текстовой информации. На панели компонентов Стандартные элементы управления текстовое поле изобра­жено в виде , имя объекта — TextBox.

получает имя TextBoxN, где N — номер 1, 2, 3… (пример 3.10).

В отличие от ранее рассмотренных компонентов, свойство Text у текстового поля по умолчанию пусто (у других — совпадает с именем компонента). Не­которые свойства компонента TextBox приведены в таблице (пример 3.11).

Значение свойства Text компонен­та текстовое поле может изменяться программно или при вводе с клавиату­ры. Основным событием для TextBox является TextChanged, которое про­исходит при изменении компонента. Наиболее часто программируют собы­тие KeyPress, которое позволяет опре­делить, какая клавиша была нажата.

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

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

  1. Изменить свойство Text у формы на «Знакомство».
  2. Разместить на форме две метки и текстовое поле.
  3. Изменить свойство Text у label1 на «Введите свое имя и нажмите кла­вишу Enter».
  4. Очистить поле свойства Text у Label

5. Написать обработчик события KeyPress для компонента Edit1, кото­рый будет проверять нажатие клави­ши ввода (код клавиши Enter — 13). Если клавиша нажата, то поменять свойство Text у label2:

if e.KeyChar = #13 then label2.Text := TextBoxl.Text +‘, приятно с Вами познакомиться!‘;

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

Название функции Действие
Ввод с помощью Edit
StrToInt Преобразование строки в целое число
StrToFloat Преобразование строки в зна­чение с плавающей запятой
Вывод с помощью Edit
IntToStr Преобразование целого чи­сла в строку
FloatToStr Преобразование веществен­ного числа в строку

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

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

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

  1. Изменить свойство Text у формы на «Квадрат и корень».
  2. Разместить на форме три метки, три текстовых поля и кнопку.
  1. Изменить свойство Text у Label1 на «Введите неотрицательное число».
  2. Изменить свойство Text у Label2 на «Квадрат».
  3. Изменить свойство Text у Label3 на «Корень».
  4. Изменить свойство Text у Button1 на «Расчет».
  5. Написать обработчик Click для кнопки.

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

Флажок используется в приложе­ниях для включения или выключе­ния каких-либо опций. На панели компонентов

Стандартные элементы управления флажок изображен в ви­де , имя объекта — CheckBox. Флажок, помещенный на форму, по­лучает имя checkBoxN, где N — но­мер 1, 2, 3… (пример 3.14). Некоторые свойства компонента checkBox приве­дены в таблице (пример 3.15).
Аналогичным образом использу­ется компонент Переключатель (ра­диокнопка). На панели компонентов Standard радиокнопка изображена в виде , имя объекта — RadioButton. Переключатель, по­мещенный на форму, получает имя radioButtonN, где N — номер 1, 2, 3… (пример 3.14).

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

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

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

  1. Поместить на форму текстовые поля (3), надписи (3), флажок и кнопку.
  2. Для компонента textBox3 уста­новить значение true для свойства ReadOnly.
  3. Изменить свойство Text у компо­нентов label («Делимое», «Делитель», «Частное»).
  4. Изменить свойство Text компо­нента button1 на «Разделить».
  5. Изменить свойство Text компо­нента checkBox1 на «Целочисленное деление».
  6. Написать обработчик события Click для компонента button
    • Проверить, что поля компо­нентов textBox1 и textBox2 не пу­сты. Иначе вывести сообщение «Од­но из полей не заполнено».
    • Проверить состояние пере­ключателя checkBox. Если он вклю­чен, то выполнить целочисленное деление, иначе обычное деление.
    • Вывести результат.
  7. Выполнить программу для раз­личных значений. Проверить рабо­ту приложения, когда одно из полей textBox1 или textBox2 (или оба поля) пустые.

Для элементов управления используется и другое название — виджеты.  Слово  употребляется  примерно  с  1920-х  гг. Для элементов управления используется и другое название — виджеты. Слово  употребляется  примерно  с  1920-х  гг. в американском английском для обозна­чения простой, но необходимой вещи, маленького изделия. Одним из вари­антов происхождения этого слова счи­тается словослияние «window gadget» (букв. «оконное приспособление»), так­же произошедшее в начале XX в.

Пример 3.1. Палитра Стандартные элементы управления:

Пример 3.2. Палитра Компоненты:

Пример 3.3. Палитра Диалоговые окна:

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

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

Некоторые свойства кнопки Button
Название функции Назначение
Text Заголовок (внешнее имя) кноп­ки, текст, который отображает­ся на кнопке. По умолчанию — button1
Font Свойства шрифта для подпи­си заголовка. Свойство Font является сложным, о чем сви­детельствует значок > , при нажатии на который раскры­ваются все свойства шрифта
Size Высота и ширина кнопки
Location Горизонтальная и вертикальная координата положения верхнего левого угла кнопки на форме
(Name) Имя (внутреннее) кнопки. Ис­пользуется в программном коде для обращения к объекту. Является идентификатором
Enabled Значение True этого свой­ства обеспечивает доступность кнопки для мыши или клавиа­туры
Visible Значение True этого свой­ства обеспечивает видимость кнопки во время выполнения приложения

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

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

Свойство кнопки BackColor позво­ляет менять ее цвет. Для обращения к этому свойству в программе использу­ют запись: button1.BackColor.

Свойство кнопки BackgroundImage позволяет вставить на кнопку изо­бражение, хранящееся в графическом файле. Для вставки можно использо­вать кнопку . Далее выбрать файл с рисунком.

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

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

Свойство Назначение
Text Отображает введенный текст на форме
BackColor Устанавливает цвет фона метки, который по умол­чанию совпадает с цветом формы. Фон метки можно сделать прозрачным, задав свойству BackColor значе­ние Color.Transparent
AutoSize Значение true этого свой­ства приводит к автомати­ческому изменению разме­ров метки в соответствии с длиной текста
TextAlign Выравнивание текста отно­сительно границ метки:

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

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

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

Свойство Назначение
BorderStyle Определяет границу вокруг текстового поля: None (нет границы), FixedSingl или Fixed3d (есть граница)
MaxLength Ограничивает количество символов, которые можно ввести в TextBox
ReadOnly Значение true запрещает редактирование текста, отображаемого в TextBox
Text Содержит вводимый или выводимый текст

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

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

Свойство Multiline определяет, ка­ким будет редактор — однострочным или многострочным.

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

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

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

Обработчик события OnCkick для Button1:

procedure Form1. button1_Click
(sender: Object; e: EventArgs);
var a, b: integer;
c: real;
begin
a := StrToInt(TextBox1.Text);
b := a * a;
c := sqrt(a);
TextBox2.Text : = IntToStr(b);
TextBox3.Text : = FloatToStr(c);
end;

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

Пример 3.14. Компоненты флажок и радиокнопка на форме:

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

Свойство Назначение
Checked
Значение true у этого свойства показывает, что установлена галочка — , пустое окно индика­тора — соответствует значению false
Text Надпись возле компонен­та checkBox
RightToLeft Определяет, с какой сто­роны кнопки размещает­ся надпись: Yes (надпись слева), No (надпись справа)
CheckState
Определяет состояние ком­понента: Unchecked — не выделен, Checked — выде­лен, Indeterminate () — промежуточное состояние. Первые два состояния соот­ветствуют свойству Checked

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

Обработчик события OnCkick для Button1:

procedure Form1.button1_Click (sender: Object; e: EventArgs);
var a, b, c : integer;
d : real;
begin
if (TextBox1.Text <> ”) and (TextBox2.Text <> ”) then
begin
a := StrToInt(TextBox1.Text);
b := StrToInt(TextBox2.Text);
if  CheckBox1.checked then
begin
c := a div b;
TextBox3.Text := IntToStr(c); end else
begin
d := a / b;
TextBox3.Text := FloatToStr(d);
end;
end else MessageBox.Show(‘Одно из полей не заполнено‘);
end;

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

 
1. Какие компоненты относят к элементам управления?
2. Как поместить компонент на форму?
3. Какие свойства компонента button вы можете назвать?
4. Какое событие является основным для компонента button?
5. Для чего предназначен компонент label?
6. В каких случаях используется компонент TextBox?
7. Для чего предназначены компоненты checkBox и radioButton?

Упражнения

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

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

Компонент Свойство Значение свойства
buttonl Text Да
buttonl Visible False
button2 Text Нет
button2 Visible False
label3 Text Вы хотите работать в ИТ?
label3 Visible False
label4 Text Замечательно! Успехов в изучении информатики! Она Вам понадобится!
label4 Visible False
label5 Text Другие профессии тоже требуют знания информатики
label5 Visible False

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

procedure Form1.textBox1_KeyPress(sender: Object; e: KeyPressEventArgs);
begin
if e.KeyChar = #13 then
begin
label2.Text := TextBox1.Text + ‘, приятно с Вами познакомиться!‘;
Label3.Visible := True;
Button1.Visible := True;
Button2 .Visible := True;
end;
end;

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

Форма на этапе проектирования Работающее приложение после запуска
Работающее приложение до ответа на вопрос Работающее приложение
после ответа на вопрос

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

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

Форма на этапе проектирования Работающее приложение после запуска

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

Форма на этапе проектирования Работающее приложение после запуска

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

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

Проверь себя