В сложных компьютерных системах предусмотрена настройка десятков различных параметров, которые пользователь просто обязан установить. Это означает либо перегруженность диалоговых окон, либо слишком большое их количество. Решение этой проблемы заключается в организации многостраничных окон диалога. Они создаются с помощью компонента, который изображается в виде множества снабженных закладками страниц, называемых вкладками (рисунок 9.50):
Рисунок 9.50. Пример вкладок в окне диалога
Вкладки относятся к разряду сложных компонентов, но в целом они упрощают пользовательский интерфейс, заменяя несколько связанных по смыслу форм. А чем меньше форм, тем легче пользователю ориентироваться в программе.
Создание вкладок рассмотрим на следующем примере. Представьте, что вкладками являются экзаменационные билеты по трем научным дисциплинам: математике, физике, химии. Каждая вкладка содержит один вопрос с возможными вариантами ответа. Пользователь должен на каждой вкладке выбрать правильный вариант ответа и завершить ввод щелчком на кнопке Result. При всех правильных ответах он получит оценку "отлично", при двух ответах - "хорошо", при ответе лишь на один вопрос - "удовлетворительно", а при всех неправильных ответах - "плохо".
Шаг 1. Приступим к реализации примера. Начните новый проект и установите для главной формы следующие свойства:
- Name = ExamForm
- Caption = Экзамен
- BorderStyle = bsDialog
- Position = poScreenCenter
Размеры формы подберите по своему усмотрению.
Шаг 2. Теперь поместите в форму компонент PageControl. Вы найдете его в палитре компонентов на вкладке Win32 (рисунок 9.51).
Характерные свойства компонента PageControl кратко описаны в таблице 9.16.
| Свойство | Описание |
|---|---|
| ActivePage | Активная вкладка (страница). |
| Align | Способ выравнивания компонента в пределах
содержащего компонента. |
| DockSite | Определяет, используется ли компонент PageControl
для стыковки других компонентов. |
| HotTrack | Подсвечивает закладку при наведении на нее указателя
мыши. |
| Images | Список значков, отображаемых на закладках. Свойство
Images используется совместно со свойством
ImageIndex компонентов TabSheet. Компонент
PageControl автоматически назначает каждой
закладке номер значка в соответствии с очередностью
добавления вкладок, однако программист может вручную
указать номер значка. |
| MultiLine | Располагает закладки в несколько рядов. |
| OwnerDraw | Позволяет программно рисовать закладки в обработчике
события OnDrawTab. Если свойство OwnerDraw равно значению False, то закладки имеют стандартный вид
и событие OnDrawTab не происходит. |
| Pages | Массив вкладок (страниц). Каждая вкладка является
объектом класса TTabSheet. Свойство Pages
доступно только из программы. |
| PageCount | Общее количество вкладок. Доступно только из
программы. |
| RaggedRight | Если равно значению True, то при включенном режиме
MultiLine закладки не выравниваются на ширину
компонента. |
| ScrollOpposite | Способ организации рядов закладок. Если равно
значению False, то все ряды расположены вместе, например
вверху. Если равно значению True, неактивные ряды
переносятся на другую сторону компонента, например
вниз. |
| Style | Стиль закладок: tsTabs - обычные трехмерные
закладки, tsFlatButtons - плоские закладки, tsButtons - закладки в виде кнопок. |
| TabIndex | Номер выбранной закладки (первая закладка имеет
номер 0). |
| TabPosition | Местоположение закладок: tpTop - сверху, tpRight - справа, tpLeft - слева, tpBottom - снизу. |
| TabWidth, TabHeight | Ширина и высота закладок. Если эти свойства равны
нулю, то размеры закладок подбираются автоматически,
исходя из размеров надписей. |
| OnChange | Происходит после смены закладки. |
| OnChanging | Происходит перед сменой закладки. |
| OnDrawTab | Происходит при рисовании закладки на экране.
Требует, чтобы свойство OwnerDraw содержало
значение True. |
| OnGetImageIndex | Обработчик этого события должен вернуть номер значка
для отображаемой закладки. |
| OnGetSiteInfo | Происходит, когда у компонента запрашивается место
для стыковки. |
Шаг 3. Первоначально компонент PageControl не содержит ни единой вкладки. Для создания вкладки щелкните правой кнопкой мыши на компоненте и выберите в контекстном меню команду New Page (рисунок 9.52).
Рисунок 9.52. Создание новой вкладки в компоненте PageControl
Будет создана первая вкладка с заголовком TabSheet1 (рисунок 9.53).
Рисунок 9.53. В компоненте PageControl создана первая вкладка
Каждая вкладка в компоненте PageControl представлена объектом класса TTabSheet. Свойства отдельной вкладки устанавливаются в окне свойств. Характерные свойства кратко описаны в таблице 9.17.
| Свойство | Описание |
|---|---|
| BorderWidth | Ширина внутреннего отступа. |
| Caption | Надпись на закладке. |
| Highlighted | Подсветка закладки цветом. |
| ImageIndex | Номер значка в списке Images компонента
PageControl. Значок отображается рядом с
названием закладки. Отрицательное значение свойства
ImageIndex говорит о том, что для закладки значок
не задан. |
| PageControl | Ссылка на компонент PageControl, которому
принадлежит вкладка. Доступно только из программы. |
| PageIndex | Номер вкладки в массиве Pages компонента
PageControl. |
| TabIndex | Номер вкладки среди видимых вкладок. Если вкладка не
видна, то свойство TabIndex равно -1. Свойство доступно
только программно и только для чтения. |
| TabVisible | Определяет, видна ли закладка. |
| OnHide | Происходит при переключении на другую вкладку. |
| OnShow | Происходит при активизации
вкладки. |
Шаг 4. Перейдите к окну свойств и замените текст закладки, вписав в свойстве Caption значение Mathematics. Действуя аналогично, добавьте вкладки Physics и Chemistry (рисунок 9.54).
Рисунок 9.54. В компоненте PageControl созданы три вкладки
Шаг 5. Ну вот, у нас уже есть три пустых вкладки и можно приступать к наполнению их содержанием. Сначала щелчком мыши активизируйте вкладку Mathematics. Затем поместите на нее группу взаимоисключающих переключателей - компонент RadioGroup. Заголовок группы будет содержать условие вопроса, а текст переключателей - возможные варианты ответа. Вопрос по математике будет из области тригонометрии (рисунок 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:
Рисунок 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. Содержимое третьей вкладки
Шаг 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:
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). Кнопки прокрутки появляются автоматически.
Рисунок 9.60. Вкладки могут прокручиваться с помощью кнопок со стрелками
Если это вам не нравится, закладки можно расположить в несколько рядов, установив свойство MultiLine в значение True (рисунок 9.61):
Рисунок 9.61. Вкладки размещены в несколько рядов
А можно ли получить страницы без закладок? Да, для этого в компонентах TTabSheet нужно установить свойство TabVisible в значение False. Заметьте, это свойство не управляет видимостью вкладки, а влияет лишь на ее заголовок - закладку. Переключение между такими страницами становится вашей заботой и осуществляться программно.
В реальной задаче может потребоваться отследить переключения между страницами. Для этого в компоненте PageControl предусмотрены события OnChanging и OnChange. Первое событие - это запрос на переключение страницы, а второе - уведомление о том, что страница переключилась.