Лабораторная работа № 8 «Создание компонентов. Графический и оконный элемент управления»
Создание графического элемента управления
Создадим графический компонент: графическую кнопку с рамкой и надписью, реагирующую на события мыши. Назовем новый компонентный класс TGraphicButton. Для компонента GraphicButton создадим следующие свойства:
ButtonColor – цвет кнопки;
BorderColor – цвет рамки кнопки;
ButtonText – надпись кнопки;
OverColor – цвет кнопки при наведении указателя мыши.
Объявим унаследованные свойства-события:
OnClick;
OnMouseDown;
OnMouseMove;
OnMouseUp.
Компоненты Delphi хранятся в специальных динамических библиотеках (пакетных библиотеках). Создадим новый проект пакетной библиотеки. Для этого выберем меню File > New > Other. В появившемся окне диалога выбора типа проекта (Рис. 1), выберем значок пакета Package.
Рис.1. Создание нового пакета.
Появится окно нового пакета (Рис. 2). Сохраним его как NPackage.dpk в папку Borland\Delphi7\Lib. В этой папке обычно хранятся дополнительные библиотеки компонентов.
Рис. 2. Пакет NPakage.dpk
Теперь закроем пакет (меню File > Close All), и перейдем к созданию модулю нового компонента (Component > New component). Появится окно диалога мастера модуля компонента (Рис. 3).
Рис. 3. Окно диалога мастера модуля компонента.
В поле Ancestor type указываем имя класса-предка TGraphicControl (базовый класс для создания графических элементов управления). В поле Class name указываем имя нового класса TGraphicButton. В поле Palette page укажем новую страницу для палитры компонентов NEWCOMPONENTS. В поле Unit file name система автоматически сформирует имя модуля компонента, для сохранения его по адресу Borland\Delphi7\Lib\. Подтвердим создание модуля нажатием кнопки «Ok», и на экране появится редактор кода с модулем нового компонента (Рис. 4). Сохраним модуль, выбрав File > Save или нажав Ctrl+S.
Объявим внутренние хранилища (поля) значений создаваемых свойств и методы записи значений, создаваемых свойств в частном разделе объявления структуры класса:
…
type
TGraphicButton = class(TGraphicControl)
private
FButtonColor:TColor;
FButtonText:string;
FBorderColor:TColor;
FOverColor:TColor;
Procedure SetButtonColor(Value:TColor);
Procedure SetBorderColor(Value:TColor);
Procedure SetOverColor(Value:TColor);
Procedure SetButtonText(Value:string);
…
Рис. 4. Редактор кода. Модуль компонента GraphicButton.
Реализуем методы записи значения свойств: ButtonColor, ButtonText, OverColor, BorderColor.
…
implementation
…
Procedure TGraphicButton.SetButtonColor(Value:TColor);
begin
if FButtonColor<>Value then
begin
FButtonColor:=Value;
Color:=Value;
Invalidate;
end;
end;
Procedure TGraphicButton.SetBorderColor(Value:TColor);
begin
if FBorderColor<>Value then
begin
FBorderColor:=Value;
Invalidate;
end;
end;
Procedure TGraphicButton.SetOverColor(Value:TColor);
begin
if FOverColor<>Value then
begin
FOverColor:=Value;
Invalidate;
end;
end;
Procedure TGraphicButton.SetButtonText(Value:string);
begin
if FButtonText<>Value then
begin
FButtonText:=Value;
Invalidate;
end;
end;
…
Объявим созданные нами свойства, и опубликуем унаследованные от класса TControl события:
…
published
property ButtonColor:TColor read FButtonColor write SetButtonColor;
property OverColor:TColor read FOverColor write SetOverColor;
property BorderColor:TColor read FBorderColor write SetBorderColor;
property ButtonText:string read FButtonText write SetButtonText;
property OnClick;
property OnMouseDown;
property OnMouseMove;
property OnMouseUp;
end;
…
Переопределим метод рисования компонента Paint:
…
protected
Procedure Paint; override;
…
Реализуем метод Paint:
…
implementation
…
Procedure TGraphicButton.Paint;
var zx,zy:integer;
begin
// рисуем кнопку текущего цвета (Color – унаследованное свойство)
canvas.Brush.Color:=Self.Color;
canvas.FillRect(rect(0,0,width,height));
// рисуем рамку цвета BorderColor
canvas.Brush.Color:=BorderColor;
canvas.FrameRect(rect(0,0,width,height));
// устанавливаем стиль шрифта – жирный
canvas.Font.Style:=[fsBold];
// вычисляем положение текста
zx:=(width - canvas.TextWidth(ButtonText)) div 2;
zy:=(height - canvas.TextHeight(ButtonText)) div 2;
// устанавливаем цвет фона текста
canvas.Brush.Color:=Self.Color;
// отображаем текст в вычисленную позицию (ZX, ZY)
canvas.TextOut( zx,zy,ButtonText);
end;
…
Для установки первоначальных значений хранилищ свойств, переопределим и реализуем конструктор компонента:
…
public
Constructor Create(AOwner:TComponent); override;
…
implementation
...
Constructor TGraphicButton.Create(AOwner:TComponent);
begin
inherited Create(AOwner); // вызываем унаследованный конструктор
FButtonColor:=clwhite; // цвет кнопки – белый
FBorderColor:=clblack; // цвет рамки – черный
FOverColor:=clyellow; // цвет при наведении указателя мыши – желтый
FButtonText:='Кнопка'; // текст кнопки
Color:=ButtonColor; // текущий цвет – ButtonColor – белый
end;
…
Для того чтобы мы могли использовать константы цвета clWhite, clBlack, clYellow – необходимо подключить модуль Graphics в разделе uses:
…
interface
uses
SysUtils, Classes, Controls, Graphics;
…
Для того чтобы компонент изменял свой цвет при наведении указателя мыши, мы должны переопределить и реализовать метод MouseMove компонента:
…
protected
…
Procedure MouseMove( ShiftState:TShiftState;X,Y:integer); override;
…
implementation
…
Procedure TGraphicButton.MouseMove( ShiftState:TShiftState;X,Y:integer);
begin
Color:=OverColor; // текущим цветом становится цвет OverColor (цвет при наведении)
// вызываем унаследованный метод MouseMove, так как он запускает событие OnMouseMove
// если этого не сделать, то обработчик события OnMouseMove просто не будет запускаться –
// механизм события не будет работать
inherited MouseMove(ShiftState,X,Y);
end;
…
При наведении указателя мыши на область графической кнопки ее цвет изменится. Для того чтобы вернуть первоначальный цвет ButtonColor, после того как указатель покинет графическую область кнопки – необходимо объявить и реализовать обработчик сообщения CM_MOUSELEAVE операционной системы:
…
private
…
procedure CMMouseLeave(var Message: TMessage); message CM_MOUSELEAVE;
…
implementation
…
procedure TGraphicButton.CMMouseLeave(var Message: TMessage);
begin
inherited; // вызываем унаследованный метод- обработчик сообщения
Color:=ButtonColor; // текущим цветом становится цвет ButtonColor
Invalidate; // компонент перерисовывается
end;
…
Так как мы используем с вами идентификатор сообщения CM_MOUSELEAVE и тип TMessage, то необходимо подключить модуль Messages:
…
interface
uses
SysUtils, Classes, Messages, Controls, Graphics;
…
Теперь модуль компонентного класса полностью готов и мы должны зарегистрировать компонент в среде разработки. Для этого выберем меню Component > Install component. В появившемся окне диалога выберем вкладку Into existing package. В поле Unit file name укажем путь к модулю компонентного класса TGraphicButton (Borland\Delphi7\Lib\…). В поле Package file name укажем путь к созданному нами пакету Npackage.dpk (Borland\Delphi7\Lib\…).(Рис. 5). После подтверждения система спросит, о том нужно ли компилировать пакет - необходимо ответить Yes. После чего появится информационное окно, говорящее о регистрации компонента (Рис. 6).
Если в модуле есть ошибки, то будет показана ошибка. После исправления ошибки, необходимо перейти к окну редактора пакета (Рис. 7) и запустить компиляцию (кнопка Compile).
Рис. 5. Окно диалога инсталляции компонента.
Рис. 6. Информационное окно. Зарегистрирован компонент TGraphicButton.
Рис. 7. Окно редактора пакета
После того как на экране появится информационное окно об успешной регистрации компонента, закройте проект пакетной библиотеки (меню File > Close All). Если потребуется сохранить изменения, сохраните.
Создадим приложение с использованием нового компонента GraphicButton. Выберем File > New > Application. Перейдем на вкладку NEWCOMPONENTS и поместим на форму компонент GraphicButton (Рис. 8).
Рис. 8. Редактируемая форма. Компонент GraphicButton
Настройте свойства компонента и запустите приложение.
Задание
Создайте и зарегистрируйте компонент, который будет являться оконным элементом управления, учитывая следующие требования:
фиксация получения фокуса компонентом должна выражаться в изменении его графического облика (появление черной рамки в области компонента);
должна фиксироваться потеря фокуса компонентом (исчезновение черной рамки в области компонента);
при получении фокуса компонентом, для него должна быть доступна клавиатура;
при нажатии символьной клавиши, в сфокусированном компоненте должен отображаться символ клавиши;
должны быть опубликованы унаследованные свойства: OnEnter, OnExit, OnKeyPress.