Страницы с закладками

МНОГОСТРАНИЧНЫЕ ОКНА ДИАЛОГА

В сложных компьютерных системах предусмотрена настройка десятка различных параметров, которые пользователь просто обязан установить. Это означает либо перегруженность диалоговых окон, либо слишком большое их количество. Решение этой проблемы заключается в организации многостраничных окон диалога - "картотек". Они создаются с помощью управляющего элемента, который изображается в виде множества перекрывающихся страниц. В каждый момент времени активна лишь одна страница, переключение между ними происходит с помощью закладок.

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

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

Шаг 1. Приступим к реализации примера. Начните новый проект и установите для формы следующие свойства:

Name = ExamForm;

Caption = Examination;

BorderStyle = bsDialog;

Position - poScreenCenter.

Шаг 2. Теперь поместите на форму многостраничный компонент PageControl, найдете его в Палитре Компонентов на странице Win95 (рис. 7.50).

Характерные свойства компонента PageControl кратко описаны в таблице:

Свойство	Описание
ActivePage	Задает активную страницу.
Align	Способ выравнивания многостраничного компонента в пределах владельца.
MultiLine	Если равно True, то закладки располагаются в несколько рядов.
Pages	Массив страниц. Каждая страница является объектом класса TtabSheet. Свойство Pages доступно только из программы.
PageCount	Общее количество страниц. Доступно только из программы.
TabWidth, TabHeight	Ширина и высота закладки. Если эти свойства равны нулю, то ширина и высота каждой закладки подбирается автоматически по высоте и ширине содержащегося на ней текста.

Шаг 3. Первоначально компонент PageControl не содержит ни единой страницы, поэтому вы не видите на нём закладок. Для создания страницы щёлкните правой кнопкой мыши на компоненте и выберете во всплывающем меню команду NewPage.

Будет создана первая страница и появится закладка с надписью TabSheet1.

Каждая страница в компоненте PageControl представлена объектом класса TTabSheet. Свойства страницы устанавливаются в Инспекторе Объектов и кратко описаны в следующей таблице.

СВОЙСТВО	ОПИСАНИЕ
PageControl	Многостраничный компонент, который владеет страницей. Доступно только из программы.
PageIndex	Номер страницы в многостраничном компоненте(смотрите свойство Page компонента PageControl).
TabIndex	Номер страницы, считая по видимым закладкам. Если закладка для данной страницы не видна, то свойство TabIndex равно -1. Доступно только из программы и только для чтения.
TabVisible	Определяет, видна ли закладка страницы на форме, Если нужен многостраничный компонент без закладок, установите свойство TabVisible каждой страницы в значение False/

Шаг 4. Активизируйте Инспектор Объектов и измените надпись на закладке, установив в свойстве Caption значение Mathematics. Действуя аналогично, добавьте страницы с закладками Physics и Chemistry.

Шаг 5. Ну вот, у нас уже есть три пустые страницы с закладками и можно приступать к наполнению страниц содержанием. Сначала активизируйте страницу Mathematics, щелкнув мышью на ее закладке (закладки уже работают!). Затем поместите на нее группу зависимых переключателей — компонент RadioGroup. Заголовок группы будет содержать условие вопроса, а текст на зависимых переключателях — возможные варианты ответа. Догадываемся, что вас интересует, какой же вопрос мы придумали по математике. Ответ на него вы получите, взглянув на следующий рисунок.

Шаг 6. Чтобы группа зависимых кнопок выглядела так, как на рисунке, подберите ей соответствующие размеры и установите значения следующих свойств:

Caption=The right expression is (правильным является выражение)

Items=sin 50° <cos50°

sin 50° >cos50°

sin 50° =cos50°

Itemlndex = 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 (уровень воды остаётся неизменным)

Itemlndex = 0 (номер варианта, принимаемый по умолчанию)

Tag = 2 (номер правильного варианта, считая от нуля)

Результат должен быть таким:

Шаг 8. Осталось определить билет по химии. Мы надеемся, что после всех предыдущих испытаний это не составит для вас труда. Кратко поясним, что нужно сделать. Активизируйте страницу Chemistry и поместите на неё компонент RadioGroup. Подгоните его под размеры страницы и установите следуюшие свойства:

Caption = The right way of mixing acid and water is (чтобы разбавить кислоту, нужно)

Items = to add acid to water (добавить кислоту в воду)

to add water to acid (добавить воду в кислоту)

Itemlndex = 0 (номер варианта, принимаемый по умолчанию)

Tag = 0 (номер правильного варианта, считая от нуля)

После всех ваших действий страница Chemistry будет выглядеть так, как на рисунке.

Шаг 9. Все страницы с экзаменационными билетами вроде бы готовы, но как вы считаете, какая из них будет активной при запуске приложения? Конечно та, которая осталась активной при проектировании, т.е. Chemistry. А надо, чтобы первой оказалась страница Mathematics. Поэтому активизируйте ее, щелкнув мышью на закладке. Кроме того, установите свойство формы ActiveControl в значение RadioGroup1. Управляющий элемент, указанный в свойстве ActiveControl, первым получает фокус ввода при появлении формы на экране.

Шаг 10. Теперь вас ждет самая ответственная работа — выставление пользователю оценки. Для этого поместите на форму два компонента Button. Первая кнопка предназначена для выдачи результата экзамена, сделайте ее свойства такими:

Name= ResultBtn

Caption= Result

Default= True

Вторая кнопка служит для закрытия окна, ее сделайте такой:

Name= CloseBtn

Caption = Close

Cancel = True

Шаг 11. Определите в кнопках следующие обработчики события OnClick:

procedure TExamForm.ResultBtnClick (Sender: TObject);

const

MarkText: array [0..3] of string= ('Bad', 'Satisfactory', 'Good', 'Excellent');

var

Mark:Integer;

Begin

Mark:=0;

if RadioGroupl.ItemIndex = RadioGroupl.Tag then Inc (Mark);

if RadioGroup2.ItemIndex = RadioGroup2.Tag then Inc (Mark);

if RadioGroup3.ItemIndex = RadioGroup3.Tag then Inc (Mark);

ShowMessage (MarkText [Mark] + ' result.');

end;

procedure TExamForm.CloseBtnClick (Sender: TObject);

begin

Close;

end;

Оценка вычисляется элементарно. Сначала предполагается, что она равна нулю (ни одного правильного ответа), а затем она уточняется в соответствии с тем, дал ли пользователь правильный ответ по математике, физике и химии. Наконец вызывается процедура ShowMessage, которая выдаёт в маленьком окне диалога заключение экзаменатора.

После компиляции и запуска проекта предложите своим родственникам или друзьям пройти экзамен. Мы надеемся, что все они получат оценку “отлично”.

Поупражняйтесь с компонентом PageControl, например измените размеры закладок (свойства TabHeight и TabWidth), добавьте в компонент больше страниц. Когда закладки перестанут умещаться в строке, обнаружится, что их можно прокручивать. Для этого автоматически создаются кнопки со стрелками.

Если это вам не нравится, закладки можно расположить в несколько рядов, установив |свойство MultiLine в значение True.

А можно ли получить страницы без закладок? Да, для этого в объектах TTabSheet, описывающих страницы, нужно установить свойство TabVisible в False. Заметьте, это свойство управляет не видимостью страницы (для этого служит свойство Visible), а лишь видимостью закладки. Переключение между такими страницами становится вашей заботой и может осуществляться как угодно, например с помощью кнопок инструментальной панели.

ЗАКЛАДКИ

Для создания многостраничных окон диалога иногда используется еще один компонент — TabControl, который расположен в Палитре Компонентов по соседству.

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

Кадая страница в компоненте PageControl потребляет системные ресурсы Windows. Используя компонент TabControl вместо компонента PageControl, мы значительно снизим потребление оперативной памяти в нашем последнем примере, правда за счет времени и сил, затраченных на программирование. Давайте не поленимся и переделаем пример с экзаменационными билетами так, чтобы в нём использовался компонент TabControl.

Свойство	Описание
Align	Способ выравнивания компонента в пределах владельца.
MultiLine	Если равно True, то закладки располагаются в несколько рядов.
Tabs	Список текстовых строк, отображаемых на закладках.
TabIndex	Номер выбранной закладки. Если ни одна закладка не выбрана, то значение свойства равно -1.
TabWidth, TabHeight	Ширина и высота закладки. Если эти свойства равны нулю, то ширина и высота каждой закладки подбирается автоматически по ширине и высоте содержащегося на ней текста.

Шаг 12. Удалите с формы ExamForm компонент PageControl и поместите на его место компонент TabControl.

Шаг 13. Выберите в Инспекторе Объектов свойство Tabs и щёлкните на кнопке с многоточием в поле значения. На экране появится Редактор Строк.

Шаг 14. Наберите подписи к закладкам и щелчком мыши на кнопке ОК закройте окно. Компонент TabControl немедленно нарисует закладки.

Шаг 15. Теперь поместите на компонент TabControl группу зависимых переключателей и придайте ей соответствующие размеры и положение.

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

На этом визуальная часть проектирования закончена. Всё остальное придётся программировать вручную.

Шаг 16. Сначала нужно позаботиться о хранении содержания вопросов и их ответов, поэтому добавьте следующие описания в текст модуля Main, поместив их перед всеми обработчиками событий:

const

Questions: array[0..2] of string=('The right expression is',

'When the ice in water dissolves then',

'The right way of mixing acid and water is');

Answers: array[0..2,0..2] of string = (('sin 50° < cos 50°',

'sin 50° > cos 500',

'sin 50° = cos 50°'),

('the level of water becomes higher',

'the level of water becomes lower',

'the level of water remains unchanged'),

('to add acid to water',

'to add water to acid',' '));

ValidAnswers: array [0..2] of Integer =(1, 2, 0);

Шаг 17. Для промежуточного хранения ответов пользователя воспользуемся инициализированной переменной-массивом:

var

UserAnswers: array [0..2] of Integer = (0, 0, 0);

Шаг 18. Значения элементов этого массива должны изменяться, когда пользователь выбирает ответ (активизирует зависимый переключатель), поэтому определите в компоненте RadioButton1 следующий обработчик события OnClick:

procedure TExamForm.RadioGrouplClick (Sender: TObject);

begin

UserAnswers [TabControl1.TabIndex]:= RadioGroup1.ItemIndex;

end;

Шаг 19. При смене закладки должен изменяться вопрос экзаменационного билета и возможные варианты ответов. Для этого определите в компоненте TabControl1 обработчик события OnChange:

procedure TExamForm.TabControl1Change (Sender: TObject);

var

I: Integer;

begin

{ Отобразить новый вопрос }

RadioGroupl.Caption:= Questions[TabControll.TabIndex];

{ Стереть прежние варианты ответа }

RadioGroupl.Items.Clear;

{ Добавить новые варианты ответа в группу переключателей}

for I:= 0 to 2 do

if Length(Answers[TabControl1.TabIndex, I]) > 0 then

RadioGroupl.Items.Add(Answers[TabControl1.TabIndex, I]);

{ Установить ответ, принимаемый по умолчанию }

RadioGroupl.ItemIndex:= UserAnswers[TabControl1.TabIndex];

end;

Шаг 20. Все готово? Не совсем. Нужно обеспечить визуализацию первого вопроса при первом появлении формы на экране. Проще всего это можно сделать, вставив вызов метода TabControl1Change в обработчик события создания формы:

procedure TExamForm.FomCreate (Sender: TObject);

begin

TabContol1Change(TabControl1);

end;

А вот теперь скомпилируйте и запустите приложение. С точки зрения пользователя оно не будет отличаться от приложения, созданного ранее с помощью компонента PageControl. Думаем, что получив такой практический опыт, вы сможете сами сделать вывод о том, какой из двух компонентов (PageControl или TabControl) и в каких случаях следует использовать.

Дата добавления: 2015-07-11