Рисунок 9.52. Создание новой вкладки в компоненте PageControl
Будет создана первая вкладка с заголовком TabSheet1 (рисунок 9.53).
Рисунок 9.53. В компоненте PageControl создана первая вкладка
Каждая вкладка в компоненте PageControl представлена объектом класса TTabSheet. Свойства отдельной вкладки устанавливаются в окне свойств. Характерные свойства кратко описаны в таблице 9.17.
Свойство Описание
BorderWidth Ширина внутреннего отступа.
391
Caption |
Надпись на закладке. |
Highlighted |
Подсветка закладки цветом. |
ImageIndex |
Номер значка в списке Images компонента PageControl. |
|
Значок отображается рядом с названием закладки. |
|
Отрицательное значение свойства ImageIndex говорит о |
|
том, что для закладки значок не задан. |
PageControl |
Ссылка на компонент PageControl, которому принадлежит |
|
вкладка. Доступно только из программы. |
PageIndex |
Номер вкладки в массиве Pages компонента PageControl. |
TabIndex |
Номер вкладки среди видимых вкладок. Если вкладка не |
|
видна, то свойство TabIndex равно -1. Свойство доступно |
|
только программно и только для чтения. |
TabVisible |
Определяет, видна ли закладка. |
OnHide |
Происходит при переключении на другую вкладку. |
OnShow |
Происходит при активизации вкладки. |
Таблица 9.17. Важнейшие свойства компонента TTabSheet
Шаг 4. Перейдите к окну свойств и замените текст закладки, вписав в свойстве Caption значение Mathematics. Действуя аналогично, добавьте вкладки Physics и Chemistry
(рисунок 9.54).
Рисунок 9.54. В компоненте PageControl созданы три вкладки
Шаг 5. Ну вот, у нас уже есть три пустых вкладки и можно приступать к наполнению их содержанием. Сначала щелчком мыши активизируйте вкладку Mathematics. Затем поместите на нее группу взаимоисключающих переключателей — компонент RadioGroup.
392
Заголовок группы будет содержать условие вопроса, а текст переключателей — возможные варианты ответа. Вопрос по математике будет из области тригонометрии (рисунок 9.55).
Рисунок 9.55. Содержимое первой вкладки
Шаг 6. Чтобы группа переключателей выглядела так, как на рисунке, подберите ей соответствующие размеры и установите значения следующих свойств:
Caption = The right expression is (правильным является выражение)
Items = sin 50° < cos 50° sin 50° > cos 50° sin 50° = cos 50°
ItemIndex = 0 (номер варианта принимаемый по умолчанию) Tag = 1 (номер правильного варианта, считая от нуля)
Свойство Tag не несет смысловой нагрузки в компонентах среды Delphi. Поэтому его можно использовать по своему усмотрению. Помещая в него номер правильного ответа, мы заботимся об упрощении подсчета оценки. Когда пользователь укажет ответ, мы сравним значения свойств ItemIndex и Tag. Ответ будет считаться правильным лишь в том случае, если номера совпадут.
Шаг 7. Билет по математике готов, приступим к подготовке билета по физике. Активизируйте вкладку Physics и поместите на нее компонент RadioGroup. Подберите для него подходящие размеры и установите следующие свойства:
Caption = When the ice in water dissolves then (когда лед в воде тает) Items = the level of water becomes higher (уровень воды поднимается)
the level of water becomes lower (уровень воды понижается)
the level of water remains unchanged (уровень воды остается неизменным)
ItemIndex = 0 (номер варианта принимаемый по умолчанию) Tag = 2 (номер правильного варианта, считая от нуля) Результат должен быть таким, как на рисунке 9.56:
393
Рисунок 9.56. Содержимое второй вкладки
Шаг 8. Осталось создать билет по химии. Мы надеемся, что после всех предыдущих испытаний это не составит для вас труда. Кратко поясним, что нужно сделать. Активизируйте вкладку Chemistry и поместите на нее компонент RadioGroup. Подберите для него подходящие размеры и установите следующие свойства:
Caption = The right way of mixing acid and water is (чтобы разбавить кислоту, нужно)
Items = to add acid to water (добавить кислоту в воду) to add water to acid (добавить воду в кислоту)
ItemIndex = 0 (номер варианта принимаемый по умолчанию) Tag = 0 (номер правильного варианта, считая от нуля)
После всех ваших действий вкладка Chemistry будет выглядеть так, как на рисунке 9.57.
Рисунок 9.57. Содержимое третьей вкладки
394
Шаг 9. Все вкладки с экзаменационными билетами вроде бы готовы, но как вы считаете, какая из них будет активной при запуске программы? Конечно та, которая осталась активной при проектировании, т.е. вкладка Chemistry. А надо, чтобы первой оказалась вкладка Mathematics. Поэтому активизируйте ее щелчком мыши. Кроме того, установите у формы свойство ActiveControl в значение RadioGroup1. Компонент, указанный в свойстве ActiveControl первым получает фокус ввода при появлении формы на экране.
Шаг 10. Теперь вас ждет самая ответственная работа — выставление пользователю оценки. Для этого поместите в форму две кнопки (компонент Button). Первая кнопка предназначена для выдачи результата экзамена, сделайте ее свойства такими:
Name = ResultButton
Caption = Result
Default = True
Вторая кнопка служит для закрытия окна, ее сделайте такой:
Name = CloseButton
Caption = Close
Cancel = True
Рисунок 9.58. Кнопка Result выдает оценку, кнопка Close завершает диалог
Шаг 11. Создайте для кнопок следующие обработчики события OnClick:
395
procedure TExamForm.ResultButtonClick(Sender: TObject); const
MarkText: array[0..3] of string =
('Неудовлетворительно', 'Удовлетворительно', 'Хорошо', 'Отлично');
var
Mark: Integer; begin
Mark := 0;
if RadioGroup1.ItemIndex = RadioGroup1.Tag then Mark := Mark + 1;
if RadioGroup2.ItemIndex = RadioGroup2.Tag then Mark := Mark + 1;
if RadioGroup3.ItemIndex = RadioGroup3.Tag then Mark := Mark + 1;
ShowMessage(MarkText[Mark]); end;
procedure TExamForm.CloseButtonClick(Sender: TObject); begin
Close; end;
Оценка вычисляется элементарно. Сначала предполагается, что она равна нулю (ни одного правильного ответа), а затем она уточняется в соответствии с тем, дал ли пользователь правильный ответ по математике, физике и химии. Под конец вызывается процедура ShowMessage, которая выдает в маленьком окне диалога заключение экзаменатора (рисунок
9.59).
Рисунок 9.59. По щелчку на кнопке Result выставляется оценка
После компиляции и запуска программы предложите своим родственникам или друзьям пройти экзамен. Мы надеемся, что все они получат оценку "отлично".
Поупражняйтесь с компонентом PageControl, например, измените размеры закладок (свойства TabHeight и TabWidth), добавьте больше страниц. Когда закладки перестанут умещаться в одной строке, обнаружится, что их можно прокручивать (рисунок 9.60). Кнопки прокрутки появляются автоматически.
396
Рисунок 9.60. Вкладки могут прокручиваться с помощью кнопок со стрелками
Если это вам не нравится, закладки можно расположить в несколько рядов, установив свойство MultiLine в значение True (рисунок 9.61):
Рисунок 9.61. Вкладки размещены в несколько рядов
А можно ли получить страницы без закладок? Да, для этого в компонентах TTabSheet нужно установить свойство TabVisible в значение False. Заметьте, это свойство не управляет видимостью вкладки, а влияет лишь на ее заголовок — закладку. Переключение между такими страницами становится вашей заботой и осуществляться программно.
В реальной задаче может потребоваться отследить переключения между страницами. Для этого в компоненте PageControl предусмотрены события OnChanging и OnChange. Первое событие — это запрос на переключение страницы, а второе — уведомление о том, что страница переключилась.
9.5.2. Закладки без страниц
397
Для создания многостраничных окон диалога иногда используется еще один компонент — TabControl, который расположен в палитре компонентов по соседству с компонентом
PageControl (рисунок 9.62).
Рисунок 9.62. Компонент TabControl
Характерные свойства компонента TabControl описаны в таблице 9.18.
Свойство |
Описание |
|
|
Align |
Способ выравнивания компонента в пределах |
|
содержащего компонента. |
DockSite |
Определяет, используется ли компонент TabControl для |
|
стыковки других компонентов. |
HotTrack |
Подсвечивает закладку при наведении на нее указателя |
|
мыши. |
Images |
Список значков, отображаемых на закладках. Каждая |
|
закладка получает значок в соответствии со своим |
|
порядковым номером. |
MultiLine |
Располагает закладки в несколько рядов. |
MultiSelect |
Если равно значению True, то пользователь может |
|
выбрать сразу несколько закладок, удерживая клавишу |
|
Ctrl. Работает только в том случае, если свойство Style |
|
содержит значение tsFlatButtons или tsButtons. |
OwnerDraw |
Позволяет программно рисовать закладки в |
|
обработчике события OnDrawTab. Если свойство |
|
OwnerDraw равно значению False, то закладки имеют |
|
стандартный вид и событие OnDrawTab не |
|
происходит. |
RaggedRight |
Если равно значению True, то при включенном режиме |
|
MultiLine закладки не выравниваются на ширину |
|
компонента. |
ScrollOpposite |
Способ организации рядов закладок. Если равно |
|
значению False, то все ряды расположены вместе, |
|
например вверху. Если равно значению True, |
|
неактивные ряды переносятся на другую сторону |
|
компонента, например вниз. |
Style |
Стиль закладок: tsTabs — обычные трехмерные |
|
закладки, tsFlatButtons — плоские закладки, tsButtons |
|
— закладки в виде кнопок. |
398
Tabs |
Закладки в виде списка строк. |
TabIndex |
Номер выбранной закладки. Если ни одна закладка не |
|
выбрана, то значение свойства равно -1. |
TabPosition |
Местоположение закладок: tpTop — сверху, tpRight |
|
— справа, tpLeft — слева, tpBottom — снизу. |
TabWidth, |
Ширина и высота закладки. Если эти свойства равны |
TabHeight |
нулю, то ширина и высота каждой закладки |
|
подбирается автоматически по ширине и высоте |
|
содержащегося на ней текста. |
OnChange |
Происходит после смены закладки. |
OnChanging |
Происходит перед сменой закладки. |
OnDrawTab |
Происходит при рисовании закладки на экране. |
|
Требует, чтобы свойство OwnerDraw содержало |
|
значение True. |
OnGetImageInde |
Обработчик этого события должен вернуть номер |
x |
значка для отображаемой закладки. |
OnGetSiteInfo |
Происходит, когда у компонента запрашивается место |
|
для стыковки. |
Таблица 9.18. Важнейшие свойства и события компонента TabControl
Компонент TabControl — это фактически одна страница с множеством закладок. Компонент применяется в том случае, если страницы имеют одинаковый вид, а их переключение влечет лишь изменение отображаемых данных. А ведь так произошло с нашими экзаменационными билетами — все страницы содержали по одному единственному компоненту RadioGroup.
Каждая вкладка в компоненте PageControl потребляет системные ресурсы. Используя компонент TabControl вместо компонента PageControl, мы значительно снизим потребление оперативной памяти в нашем последнем примере, правда, за счет времени и сил, затраченных на программирование. Давайте не поленимся и переделаем пример с экзаменационными билетами так, чтобы в нем использовался компонент TabControl.
Шаг 12. Удалите из формы ExamForm компонент PageControl и поместите на его место компонент TabControl.
399
Рисунок 9.63. Компонент TabControl заменил в форме компонент PageControl
Шаг 13. В окне свойств выберите свойство Tabs и щелкните кнопку с многоточием. На экране появится редактор строк.
Рисунок 9.64. Список закладок для компонента TabControl
Шаг 14. Введите названия закладок и щелчком кнопки OK закройте окно. Закладки появятся на экране (рисунок 9.65).
400