Бильфельд Н.В., Затонский А.В. Основы разработки интерфейсов: Реализация в системе Borland Delphi
Подождите немного. Документ загружается.
60
Рис. 44. Внешний вид редактора коллекций компонента CoolBar
Создадим на ToolBar1 4 кнопки. Создадим на ToolBar2 4 кнопки.
Поместим в ImageList1 бледные пиктограммы кнопок: Arrow1L.bmp,
Arrow1R.bmp, Bulbon.bmp, Grphpie.bmp. Поместим в ImageList2 яркие
пиктограммы этих же кнопок. В качестве последней пиктограммы поместим
в оба компонента яркую пиктограмму Bulbon.bmp (рис. 45).
Рис. 45. Пиктограммы помещенные в ImageList1 и ImageList2
Поместим в ImageList3 бледные иконки кнопки Clear.bmp. Поместим в
ImageList4 яркие иконки кнопки Clear.bmp. Создадим систему меню,
приведенную в табл. 5.
Таблица 5
Созданная система меню
Файл Вид Выбор
Выход Панель Назад
Статус Вперед
-------------------------
Стоп
Повтор
Создадим в редакторе коллекций компонента AcnionList четыре
объекта Action (рис. 46).
61
Рис. 46. Редактор коллекций компонента AcnionList
Создадим в редакторе коллекций компонента StatusBar объект
StatusPanel (рис. 47).
Рис. 47. Редактор коллекций компонента StatusBar
Назначим для компонента ActionList свойство Images=ImageList1.
Назначим для созданных в редакторе коллекций компонента ActionList
объектов Action следующие свойства, приведенные в табл. 6.
Таблица 6
Свойства, назначенные объектам Action
Caption Checked Enabled ImageIndex
Action1 Назад False True 0
Action2 Вперед False False 1
Action3 Стоп False True 2
Action4 Повтор False True 3
Назначим для объекта Action2 свойство FixedSize=True. Назначим для
компонента CoolBar свойство AutoSize=True. Назначим для компонента
ToolBar1 следующие свойства:
AutoSize=True
Transparent=True
HotImages=ImageList2
Images=ImageList1
Flat=True
ShowCaption=True
Назначим для компонента ToolBar2 следующие свойства:
AutoSize=True
Transparent=True
HotImages=ImageList3
Images=ImageList4
62
Flat=True
ShowCaption=True (показывать надпись на кнопке)
List=True (заголовки справа от пиктограмм)
Назначим для компонента Animate следующие свойства:
AutoSize=True;
Назначим для компонента WebBrowser свойство Align=alClient. В
результате внешний вид формы должен соответствовать рис. 48.
Рис. 48. Внешний вид формы
Можно запустить программу. При наведении курсора мыши на кнопки,
должна измениться пиктограмма данной кнопки (из бледной превратиться в
активную пиктограмму). Закроем программу и продолжим разработку.
Необходимо сказать, что чем чаще мы будем запускать программу при
завершении написания отдельных функциональных блоков, тем проще будет
процесс ее отладки. После каждого такого удачного запуска проект
необходимо сохранять.
Назначим для свойств кнопок BoolButton значения, приведенные в
табл. 7.
Таблица 7
Значения свойств объектов TButton
Action Caption Hint
ToolButton1 Action1
ToolButton2 Action2
ToolButton3 Action3
ToolButton4 Action4
ToolButton5 Страница 1 http://www.rambler.ru
ToolButton6 Страница 2 http://www.uralfd-pb.ru
ToolButton7 Страница 3 http://www.uralfd-pb.ru
ToolButton8 Страница 4 http://slova.ndo.ru
63
Назначим указанным в табл. 8 пунктам меню следующие свойства.
Таблица 8
Свойства, назначенные пунктам меню
Action Checked
Панель True
Статус True
Стоп Action3 False
Повтор Action4 False
Назад Action1 False
Вперед Action2 False
В результате надписи отдельных кнопок и их активность изменятся
(рис. 49).
Замечание. При запуске программы все кнопки и пункты меню, для
которых было установлено свойство Action, стали неактивными. При
наведении курсора мыши на первые четыре кнопки пиктограммы кнопок
также меняться не будут. Пусть это Вас не пугает. Все так и должно быть,
пока мы не напишем обработчики событий OnExecute для объектов Action.
Рис. 49. Надписи и активность отдельных кнопок изменились
Пишем код. Объявим константу:
const
CM_HOMEPAGEREQUEST = WM_USER + $1000;
Объявим в разделе Privat глобальные переменные и свои процедуры:
HistoryIndex: Integer;
HistoryList: TStringList;
UpdateCombo: Boolean;
procedure FindAddress;
procedure HomePageRequest(var message: tmessage);
message CM_HOMEPAGEREQUEST;
Пишем код для процедуры FindAddress:
64
Procedure TForm1.FindAddress;
{Своя процедура}
Var Flags:OLEVariant;
Begin
Flags:=0;
UpdateCombo:=True;
WebBrowser1.Navigate(WideString(ComboBox1.Text),Flags,Flags,Flags,Flags);
End;
Пишем код для процедуры HomePageRequest:
procedure TForm1.HomePageRequest(var Message: TMessage);
{Своя процедура}
begin
ComboBox1.Text := ‘http://www.rambler.ru/’;
FindAddress;
end;
Для процедуры создания формы:
procedure TForm1.FormCreate(Sender: TObject);
{Создание формы}
begin
Animate1.FileName := ExtractFilePath(Application.ExeName) + 'cool.avi';
HistoryIndex := -1;
HistoryList := TStringList.Create;
PostMessage(Handle, CM_HOMEPAGEREQUEST, 0, 0);
end;
Этих процедур уже достаточно, чтобы программа запустилось и в
компоненте WebBrowser вывелось содержание страницы
http://www.rambler.ru. (Internet должен быть доступен). Запустим программу
и проверим загрузку страницы.
Напишем общий обработчик для кнопок выбора страниц. Для этого
выделим все кнопки на нижней панели и активизируем событие OnClick. Для
обработчика события напишем следующий код:
begin
if (Sender as TToolButton).Hint = '' then Exit;
ComboBox1.Text := (Sender as TToolButton).Hint;
FindAddress;
end;
Снова запустим программу и проверим, что при нажатии на
соответствующие кнопки открываются соответствующие страницы сайтов.
Пока при открытии страниц мы не видим процесс загрузки (компонент
Animate не реагирует).
Напишем основные обработчики событий для компонента WebBrowser.
Для события OnBeforeNavigate2:
65
Var NewIndex:Integer;
begin
NewIndex := HistoryList.IndexOf(URL);
if NewIndex = -1 then begin
if (HistoryIndex >= 0) and (HistoryIndex < HistoryList.Count - 1) then
while HistoryList.Count > HistoryIndex do HistoryList.Delete(HistoryIndex);
HistoryIndex := HistoryList.Add(URL);
end
else HistoryIndex := NewIndex;
if UpdateCombo then begin
UpdateCombo := False;
NewIndex := ComboBox1.Items.IndexOf(URL);
if NewIndex = -1 then ComboBox1.Items.Insert(0, URL)
else ComboBox1.Items.Move(NewIndex, 0);
end;
ComboBox1.Text := URL;
Statusbar1.Panels[0].Text := URL;
end;
Для события OnDownloadBegin:
begin
ToolButton3.ImageIndex := 4; Animate1.Active := True;
end;
Для события OnDownloadComplete:
begin
ToolButton3.ImageIndex := 2; Animate1.Active := False;
end;
Снова запустим программу. Откроем отдельные страницы с помощью
кнопок на панели «страницы». Теперь процесс загрузки виден по реакции
компонента Animate. Также все открываемые страницы попадают в список
компонента ComboBox.
Чтобы страницы можно было открыть повторно, выбирая их из списка
компонента ComboBox, напишем обработчики событий OnClick и
OnKeyDown для данного компонента.
Для события OnClick:
begin
FindAddress;
end;
Для события OnKeyDown:
begin
if Key = VK_Return then FindAddress;
end;
66
Снова запустим программу. Откроем отдельные страницы с помощью
кнопок на панели «страницы». Выберем открываемые страницы из списка
компонента ComboBox. При этом они должны открыться повторно.
Напишем обработчики событий OnExecute и OnUpdate объектов Action.
Данные объекты мы ранее связали с отдельными кнопками и пунктами меню.
(см. табл. 7 и 8).
Для события OnExecute объекта Action1:
begin
ComboBox1.Text:=HistoryList[HistoryIndex-1]; FindAddress
end;
Для события OnExecute объекта Action2:
begin
ComboBox1.Text:=HistoryList[HistoryIndex+1]; FindAddress;
end;
Для события OnExecute объекта Action3:
begin
WebBrowser1.Stop;
end;
Для события OnExecute объекта Action4:
begin
FindAddress;
end;
Для события OnUpdate объекта Action1:
begin
if HistoryList.Count > 0 then Action1.Enabled:=HistoryIndex>0
else Action1.Enabled := False;
end;
Для события OnUpdate объекта Action2:
begin
if HistoryList.Count > 0 then Action2.Enabled := HistoryIndex <
HistoryList.Count-1
else Action2.Enabled := False;
end;
Снова запустим программу. Теперь можно пользоваться кнопками
«Вперед» и «Назад» для открытия сайтов, которые попали в наш список, а
также соответствующими пунктами меню. Осталось добавить несколько
сервисных штрихов к нашей программе, чтобы сделать возможным, скрывать
панель инструментов и строку состояния по желанию пользователя и снова
их активизировать. Это должно быть реализовано в обработчиках пунктов
меню «Панель» и «Статус». Также необходимо корректно завершить
программу, а именно удалить из памяти созданный список сайтов.
Для пункта меню «Панель» пишем следующий код:
67
begin
with Sender as TMenuItem do begin
Checked := not Checked;
Coolbar1.Visible := Checked;
end;
end;
Для меню «Статус» пишем следующий код:
begin
with Sender as TMenuItem do begin
Checked := not Checked;
StatusBar1.Visible := Checked;
end;
Для события OnDestroy формы пишем следующий код:
begin
HistoryList.Free;
end;
На этом можно считать проект завершенным. Можно снова запустить
программу и проверить функционирование удаления панели инструментов и
строки состояния. Также можно изменить размеры формы и убедиться, что
компоненты и кнопки на панелях управления автоматически
перегруппировываются (рис. 50). Можно простым «перетаскиванием»
мышью расположить панели инструментов по своему усмотрению (рис 51).
Рис. 50. При уменьшении ширины формы кнопки панели «Страницы»
автоматически расположились в два ряда
68
Рис. 51. Панели «Страницы» и «Адрес» поменялись местами
Использование компонентов Group Box и Panel
Как было сказано раньше, данные компоненты предназначены для
группировки других компонентов по каким-либо функциональным
признакам. Такая группировка улучшает функциональность интерфейса и
позволяет более быстро в нем ориентироваться.
Но есть и еще одно достоинство использования данных компонентов, а
именно увеличение скорости разработки самого интерфейса. Увеличение
скорости разработки происходит по двум факторам:
• Возможность копирования групп с последующим незначительным
изменением только отдельных свойств.
• Возможность изменения свойств самой группы, например таких, как
шрифт, цвет, который будет отражаться на всех, помещенных в группу
компонентах.
В качестве примера рассмотрим создание интерфейса калькулятора
комплексных чисел.
Основные особенности интерфейса следующие:
Числа, над которыми будет производиться математическая операция,
необходимо вводить в двух операндах.
• Результат операции должен выводиться в третьем операнде.
• Числа можно вводить как в алгебраической форме (действительная и
мнимая части), так и в показательной форме (амплитуда и фаза).
• Преобразование представления комплексного числа должно
осуществляться в пределах самого операнда.
69
•
Планируется строить векторные диаграммы комплексных чисел
используемых в операции и вектор результата.
Согласно приведенной постановке необходимо сформировать три,
практически одинаковые группы, для ввода исходных данных и вывода
результата. Группы должны быть представлены разным цветом, тогда очень
легко будет ориентироваться в векторной диаграмме, а именно цвет вектора
должен совпадать с цветом группы. Тогда не потребуется никаких
дополнительных надписей в векторной диаграмме.
Рассмотрим последовательность создания такого интерфейса.
Создадим группу, приведенную на рис. 52
Рис. 52. Интерфейс группы операнда
Установим для компонента Group Box1 размер шрифта, равным 12, и
цвет шрифта – синий. В результате данные свойства отразятся на всех
компонентах группы (рис. 53).
Рис. 53. Вид группы после изменения свойств шрифта
Как видно из рис. 53, стиль и цвет шрифта изменился у всех
компонентов группы, даже у надписей кнопок.
Скопируем компонент GroupBox1 в буфер обмена и дважды поместим
его на форму. У данных компонентов достаточно поменять только цвет и
заголовок самой группы. В результате получим интерфейс, приведенный на
рис. 54.