Бильфельд Н.В., Затонский А.В. Основы разработки интерфейсов: Реализация в системе Borland Delphi
Подождите немного. Документ загружается.
50
End;
If B Then S:='Обычный';Label1.Caption:=S;
end;
procedure TForm1.ToolButton14Click(Sender: TObject);
{ Для кнопки Button 14}
begin
ToolBar1.Buttons[5].Down:=Not ToolBar1.Buttons[5].Down;
ToolButton6.Click;
end;
После запуска программы (рис.33) при наведении мыши на одну из
первых четырех кнопок пиктограмма кнопки меняется с бледной на яркую.
Деактивировать эти кнопки можно с помощью кнопки «Актив» При этом
поменяются пиктограммы как на первых четырех кнопках, так и состояние
кнопки «Актив». Выбрав кнопку «Font» получим в метке состояние
выбранного шрифта. С помощью контекстного меню последней кнопки
можно активизировать любую из первых четырех кнопок.
Рис. 33. Внешний вид рабочей программы примера № 10
Компонент ActionList
Это последний компонент на странице Standart палитры компонентов.
Он применяется, когда программа обрабатывает большое число
всевозможных событий, и одни и те же операции выполняются
всевозможными обработчиками, как, например, из основного и контекстного
меню, а также при помощи дублирующих кнопок.
Создание обработчиков осуществляется следующим образом. Открыть
редактор коллекции щелчком по компоненту (рис. 34).
Выполнить контекстное меню New Action – создать обработчик
собственного события или New Standard Action – создать стандартное
событие. Активизировать событие OnExecute созданного обработчика и
написать необходимый код.
Распространенный подход при программировании интерфейсов (без
использования данного компонента) заключался в том, что обработчик
оформлялся отдельной процедурой, а для кнопок и пунктов меню
указывалось обращение к данной процедуре.
51
Рис. 34. Редактор коллекции компонента ActionList
В данном случае обработчики пишутся в событии OnExecute, а для
кнопок и пунктов меню в свойстве Action указывается ссылка на данный
обработчик. Это существенно упрощает исходный код программы, позволяя
не загромождать его лишними обработчиками используемых компонентов.
Основные свойства
Checked – признак пометки (используется для пунктов меню,
переключателей, флажков).
ImageIndex – номер картинки из списка ImageList.
ShortCut – горячая клавиша – отличается от быстрых клавиш тем, что
позволяет вызвать нужное действие, даже когда на форме нет
соответствующих видимых объектов.
Пример № 12
10
Создадим форму (рис. 35).
Поместим в ImageList1 бледные пиктограммы стрелок, а в ImageList2
яркие пиктограммы стрелок. Выполним для ToolBar контекстные меню:
NewButton – 4 раза
NewSeparator
NewButton
10
Рабочий вариант и исходный текст в папке ActionList.
52
Рис. 35. Внешний вид формы примера № 12
Создадим главное и контекстное меню, как показано на рис. 36.
Рис. 36. Главное и контекстное меню программы
Назначим для ToolBar следующие свойства:
Autosize=True
Flat=True
HotImages= ImageList2
Images= ImageList1
ShowCaptions=True
Transparent=True
Назначим для первых четырех кнопок следующие свойства:
AllowAllUp=True
Grouped=True
Style=TbsCheck
Назначим для шестой кнопки следующие свойства:
53
DropDownMenu=PopupMenu1
Style=tbsDropDown
Назначим для ActionList:
Images=ImageList1
Кликнем по компоненту ActionList. Выполним команду NewAction 4
раза. Установим для каждого объекта коллекции ImageIndex равным 0, 1, 2, 4
соответственно. В результате получим коллекцию (рис. 37).
Рис. 37. Объекты коллекции
Теперь для каждого объекта коллекции необходимо сформировать
событие. Активизируем для первого объекта событие OnExecute и в
обработчике напишем следующий код:
begin
Label1.Caption:='Кн1';
end;
Аналогичные обработчики напишем для остальных объектов
коллекции указав значение «Кн2», «Кн3» и т.д.
Осталось установить ссылки на эти события для соответствующих
кнопок и пунктов меню. Для этого выберем компонент ToolButton1 и в
раскрывающемся списке свойства Action выберем «Action1». Выберем для
главного меню пункт «Кн1» и в раскрывающемся списке свойства Action
также выберем «Action1». Аналогично поступим с остальными кнопками и
пунктами меню, выбирая соответственно «Action2», «Action3» и «Action4».
Заметим, что при этом изменились надписи на кнопках и соответствующие
пункты меню.
Форма будет выглядеть следующим образом (рис. 38):
54
Рис. 38. Внешний вид формы после назначения свойств объектам коллекции
После запуска программы вывод соответствующих сообщений в метке
будет осуществляться как по кнопкам, так и по командам главного и
контекстного меню.
Чтобы названия кнопок и соответствующие пункты меню приняли
первоначальные значения необходимо указать их один раз в свойстве Caption
соответствующих строк коллекции компонента ActionList.
Необходимо добавить, что первоначально названия кнопок можно
было не указывать.
В заключении изменим свойство Caption шестой кнопки на «Выбор». В
результате рабочий вариант программы будет выглядеть следующим образом
(рис. 39):
Рис. 39. Внешний вид рабочей программы примера № 12
После запуска программы необходимое действие можно выполнить из
главного и контекстного меню, а также с помощью соответствующей кнопки.
При этом обработчики пунктов меню и кнопок в исходном тексте программы
отсутствуют.
Пример № 13
11
11
Рабочий вариант и исходный текст в папке ActionList1.
55
Необходимо управлять процессом (включать и выключать) анимацию
при помощи обычных кнопок, радиокнопок и соответствующих пунктов
меню. При этом, если процесс запущен его можно только остановить и
наоборот. При этом свойства Checked и Enabled соответствующих
компонентов (кнопок, пунктов меню и т.д.) должны устанавливаться в
соответствующие состояния.
Если использовать обычный подход программирования и писать
обработчики для каждого компонента, получиться достаточно громоздкий
код. Например, код для кнопки включить выглядел бы следующим образом:
Begin
Animate1.Active:=True;
Button1.Enabled:=False;
Button2.Enabled:=True;
RadioButton1.Enabled:=False;
RadioButton2.Enabled:=True;
RadioButton1.Checked:=True;
RadioButton2.Checked:=False;
MainMenu1.Items[0].Checked:=True;
MainMenu1.Items[1].Checked:=False;
MainMenu1.Items[0]. Enabled:=False;
MainMenu1.Items[1]. Enabled:=True;
End;
В результате, таких фрагментов в программе будет 6 (для двух кнопок,
радиокнопок и пунктов меню). Если учесть строку кода для создания формы,
то получим 67 строк кода, которые необходимо ввести вручную.
Используя компонент ActionList все можно реаловать намного проще.
Создадим форму (рис. 40):
Рис. 40. Внешний вид формы примера № 13
Создадим меню из двух пунктов.
В редакторе коллекций компонента ActionList выполним дважды
контекстное меню NewAction(рис. 41).
56
Рис. 41. Редактор коллекций компонента Action
Назначим свойствам Action значения, приведенные в табл. 3.
Таблица 3
Свойства, установленные объектам Action
Caption Enabled Checked
Action1 Включить True False
Action2 Выключить False True
Укажем в свойствах Action необходимых компонентов (кнопок,
радиокнопок и пунктов меню) ссылку на соответствующие объекты Action.
Напишем свою процедуру:
Procedure TForm1.Process(Sender: TObject);
Begin
Action1.Checked:=Not Action1.Checked;
Action1.Enabled:=Not Action1.Enabled;
Action2.Checked:=Not Action2.Checked;
Action2.Enabled:=Not Action2.Enabled;
Animate1.Active:=Not Animate1.Active;
End;
Создадим обработчики событий OnExecute объектов Action1 и Action2 и
поместим в них следующий код:
procedure TForm1.Action1Execute(Sender: TObject);
begin
Process(Sender);
end;
procedure TForm1.Action2Execute(Sender: TObject);
begin
Process(Sender);
end;
В процедуре создания формы укажем и загрузим анимационный файл:
procedure TForm1.FormCreate(Sender: TObject);
begin
Animate1.FileName := ExtractFilePath(Application.ExeName) + 'cool.avi';
end;
57
Как видно из примера, достаточно вручную ввести всего восемь строк
кода (вместо 67), чтобы все функционировало.
Компонент CoolBar
Компонент сочетает в себе возможности компонента TToolBar и
TControlBar. Он имеет свойство Bands, представляющих собой коллекцию
элементов класса TCoolBand (плавающих панелей). С помощью этого
свойства можно вручную формировать содержимое и внешний вид каждой
плавающей панели.
Основные свойства класса TCoolBar
Bitmap – фоновый рисунок.
EdgeBorders, EdgeInner, EngeOuter – наличие и оформление окаймляющей
линии панели.
FixedOrder – имеет значение True, если пользователю разрешено перемещать
объекты на панели.
FixedHeight – имеет значение True, если размер полос перетаскивания
фиксирован для всех объектов на панели.
Images – список пиктограмм, которые будут использоваться в качестве полос
перетаскивания.
ShowText – имеет значение True, если рядом с каждой плавающей панелью
отображается текстовая строка
Vertical – имеет значение True, если порядок плавающих панелей
определяется сверху вниз. Иначе порядок определяется слева направо.
Работа с конкретными плавающими панелями осуществляется с
помощью свойства Bands (класс TCoolBands) представляющего собой
коллекцию объектов наследников класса TCoolBand. Как и любую
коллекцию, это свойство можно менять с помощью редактора коллекций.
Основные свойства класса TCoolBand
Bitmap – фоновый рисунок.
Break – имеет значение True, если данная панель будет располагаться с новой
стоки.
Control – элемент управления, расположенный на панели.
FixedBackground – имеет значение True, если фоновое изображение
выравнивается по всему размеру панели.
Height – высота панели в пикселях.
HorizontalOnly – имеет значение True, если данную панель необходимо
прятать, когда свойство Vertical родительской панели принимает значение
True.
ImageIndex – номер картинки, которая отображается в качестве полосы
перетаскивания.
MinWidth, MinHeight – минимально допустимые ширина и высота панели при
изменении ее размера.
58
Text – текст, отображаемый в левой части панели (название панели) когда у
родительского объекта свойство ShowText имеет значение True.
Пример № 14
12
Разработаем интерфейс, который содержал бы панель с кнопками
основных операций, панель выбора и несколько панелей дублирующих
кнопок, расположенных на различных страницах.
Поместим на форму компонент CoolBar. Поместим на компонент
CoolBar два компонента: ToolBar и ComboBox. Откроем редактор коллекций
и в свойстве Text соответствующих объектов введем «Основные операции»,
«Выбор», «Компоненты» (рис. 42).
Рис. 42. Редактор коллекций компонента CoolBar
Для объекта «Выбор» установим свойство Break=True, чтобы объекты
можно было расположить на одной строке. Сгенерируем на компоненте
ToolBar1 три кнопки. Используя компонент ImageList, поместим в кнопки
какие-нибудь пиктограммы. Установим свойство List в истину, чтобы
надписи располагались справа от пиктограмм. Поместим на компонент
ToolBar2 компонент PageControl. Создадим в данном компоненте три
страницы. На каждую страницу поместим по компоненту ToolBar. На каждом
компоненте ToolBar создадим по нескольку кнопок ToolButton и поместим в
них какие-нибудь пиктограммы. В результате должен получиться интерфейс
с многостраничными группами кнопок (рис. 43).
Рис. 43. Внешний вид интерфейса примера № 14
12
Рабочий вариант и исходный текст в папке CoolBar.
59
После запуска программы можно менять панели местами, изменять
размеры панели, выбирать станицы с дублирующими кнопками.
Пример разработки интерфейса для Internet Explorer
Рассмотрим конкретный пример, в котором используются все
рассмотренные выше компоненты создания интерфейсов и основные
подходы по написанию оптимального кода. Разработаем простейший Web
Browser, который, на первый взгляд, практически ничем не отличается от
стандартного Internet Explorer.
Компонент TWebBrowser
Для этого нам понадобиться компонент WebBrowser (страница
Internet), который ранее не рассматривался т.к. не имеет отношения к
разработке интерфейсов. Работа с данным компонентом максимально проста.
Чтобы загрузить станицу достаточно вызвать единственный метод
компонента: Navigate, указав в качестве параметра адрес страницы.
Вот простейший код.
Var F:OleVariant;S:String;
begin
S:='http://www.uralfd-pb.ru/'; WebBrowser1.Navigate(WideString(S),F,F,F,F);
end;
Также для контроля загрузки страниц нам потребуется три события
компонента:
OnBeforeNavigate2 – выполняется до перехода к новому ресурсу.
OnDownloadBegin – выполняется перед началом загрузки.
OnDownloadComplete – выполняется по окончании загрузки.
Пример № 15
13
Поместим на форму следующие компоненты: CoolBar, StatusBar,
MainMenu, ImageList – 4 штуки, WebBrowser (станица Internet). Поместим на
CoolBar следующие компоненты: ToolBar – 2 штуки, ComboBox, Animate.
При этом в редакторе коллекций компонента автоматически создастся 4
объекта TCoolBand. Назначим им свойства, приведенные в табл. 4.
Таблица 4
Установленные компонентам TCoolBand свойства
Break Control Text FixedSize
CoolBand1 False ToolBar1 False
CoolBand2 False Animate1 True
CoolBand3 True ComboBox1 Адрес False
CoolBand4 True ToolBar2 Страница False
В результате редактор будет иметь вид, приведенный на рис. 44.
13
Рабочий вариант и исходный текст в папке Web2.