Бильфельд Н.В., Затонский А.В. Основы разработки интерфейсов: Реализация в системе Borland Delphi
Подождите немного. Документ загружается.
70
Рис. 54. Интерфейс для работы с комплексными числами
Построенная векторная диаграмма, на основании данных, приведенных
на рис. 54 не нуждается в комментариях. Цвета векторов будут
соответствовать цвету соответствующих операндов (рис. 55).
Рис. 55. Фрагмент векторной диаграммы
Еще один вариант использования данных компонентов эффективен в
случаях, когда интерфейс получается перенасыщенным. Например, при
работе с базами данных пользователю необходимо обеспечить такие
возможности как поиск данных, установка различных фильтров, создание
выборок данных с помощью SQL-запросов и т.д. Для реализации каждой из
перечисленных функций может потребоваться достаточно много
компонентов. В частности для удобной реализации фильтров необходимо
обеспечить выборку поля из списка, выбор значения, визуализировать строку
фильтра для возможности ручной корректировки, предусмотреть кнопки для
установки и отмены фильтрации, показывать количество отфильтрованных
записей и т.д. (рис. 56).
Если сгруппировать перечисленные функции в компонентах GroupBox
или Panel на форме может не хватить места для их размещения.
Реализовать перечисленные функции на отдельных формах, тоже не
лучший вариант, т.к. во-первых, затрачивается время для перехода на другую
71
форму, во-вторых, внешний вид форм практически не будет отличаться, т.к.
основное место клиентской области будет занимать таблица с данными.
Рис. 56. Внешний вид конструктора фильтров
В данном случае удобно использовать наложение компонентов.
Необходимо сделать компоненты GroupBox одинакового размера и просто
наложить их друг на друга (рис. 57).
Рис. 57. Наложение компонентов
Как было сказано раньше, свойства, установленные компоненту Group
Box,
отражаются и на свойствах помещенных в него компонентов. Тогда,
варьируя свойством видимости (Visible) компонента, мы будем иметь в
72
наличии необходимый в данный момент интерфейс.
Внешний вид формы
представлен на рис. 58.
В зависимости от выбранной радио-кнопки будет отображаться та или
иная функциональная группа интерфейса. Код для компонента RadioGroup
выглядит следующим образом:
Case RadioGroup1. ItemIndex Of
0: Begin GroupBox1.Visible:=True; GroupBox2.Visible:=False; End
1: Begin GroupBox1.Visible:=False; GroupBox2.Visible:=True; End
End;
Рис. 58. Внешний вид формы примера № 15
Необходимо добавить, что во избежание неопределенности в
статическом режиме необходимо активизировать первую радиокнопку, и
сделать второй компонент GroupBox невидимым. Оператор Case необходим,
если таких функциональных групп больше двух. В нашем случае можно
просто написать:
GroupBox1.Visible:=Not GroupBox1.Visible;
GroupBox2.Visible:=Not GroupBox2.Visible;
Работа с цветами
Как было сказано раньше, придание элементам интерфейса
определенного цвета улучшает его восприятие и ориентацию. В то же время
использование ярких и броских цветов (когда интерфейс выглядит как
Новогодняя елка) может раздражать пользователя.
73
Работа со стандартными цветами
В стандартной палитре Windows 16 цветов. Это цвета, которые имеют
свое наименование (clRed, clGreen и т.д.). Кроме наименования каждый цвет
характеризуется числом. Для работы со стандартными цветами можно
использовать компонент ColorGrid (страница Samples). Получить номер
цвета можно с помощью стандартной функции ColorToRgb.
Рассмотрим простейший пример получения номера цвета, выбранного
в компоненте ColorGrid.
Поместим на форму компонент ColorGrid и компонент Edit (рис. 59).
Рис. 59. Получение номера стандартного цвета
Напишем для события Change компонента ColorGrid следующий
обработчик:
Begin
Edit1.Text:=IntToStr(ColorToRgb(ColorGrid1.ForegroundColor));
End;
Работа с оттенками цветов.
Использование одних стандартных цветов для реализации эстетичного
интерфейса не достаточно. Во-первых, их не так много, во-вторых, они
слишком яркие и броские. Поэтому лучше использовать оттенки цветов.
Из физики известно, что любой цвет можно получить смешением
красного, зеленого и синего цветов. Например, если смешать красный,
зеленый и синий цвет с одинаковой интенсивностью, то получим белый цвет.
В Delphi цвета представлены тремя восьмиразрядными словами.
Младшее слово характеризует интенсивность красного цвета, среднее
зеленого и старшее синего.
Из этого следует, что интенсивность каждого цвета составляет от 0 до
255.
Следовательно, количество различных оттенков составляет 256⋅256⋅256=
16 777 216
74
К сожалению, оттенки цветов не имеют наименований, а только
числовые значения, в указанном выше диапазоне. Поэтому, при разработке
интерфейсов, знать какого цвета будет оттенок с указанным числовым
значением практически не возможно.
Для визуализации оттенков цветов и получения их числового значения
удобно использовать небольшую вспомогательную программу.
Поместим на форму компонент Panel и три компонента TrackBar (рис.
60).
Рис. 60. Формирование различных оттенков цветов
Назначим для компонентов TrackBar свойство Max = 255.
Подключим модуль ClipBrd (для возможности передачи значений в
буфер обмена). Опишем глобальные переменные R,G,B:Byte;
Напишем функцию:
Function Tform1.RGBToColor(R, G, B: Byte): TColor;
Begin
Result := B shl 16 or G shl 8 or R;
End;
Напишем процедуру:
Procedure TForm1.Pc;
Begin
Panel1.Color:=RGBToColor(R,G,B);
Panel1.Caption:=IntToStr(ColorToRgb(Panel1.Color));
End;
75
Для обработчиков Change компонентов TrackBar напишем следующий код:
procedure TForm1.TrackBar1Change(Sender: TObject);
begin
R:=TrackBar1.Position;Pc;
end;
procedure TForm1.TrackBar2Change(Sender: TObject);
begin
G:=TrackBar2.Position; Pc;
end;
procedure TForm1.TrackBar3Change(Sender: TObject);
begin
B:=TrackBar3.Position; Pc;
end;
Для панели:
procedure TForm1.Panel1Click(Sender: TObject);
{Копируем значение в буфер обмена}
begin
Pc;ClipBoard.AsText:=Panel1.Caption;
end;
После запуска программы, меняя соответствующими движками
составляющие цветов можно получить практически любой оттенок. Номер
оттенка выводиться на панели. Щелкнув по панели можно скопировать
номер в буфер обмена и таким образом установить элементам
разрабатываемого интерфейса практически любой оттенок цветовой гаммы.
Компонент StringGrid
Компонент представляет собой таблицу, в ячейки которой можно
помещать строковые значения. Обычно, таким образом, данный компонент и
используют, забывая о том, что у данного компонента имеется свойство
Canvas, позволяющее выводить в ячейках графические объекты. Используя
данное свойство можно значительно улучшить восприятие интерфейса
пользователем, используя даже такие примитивные подходы, как закраска
определенных ячеек компонента и помещение в них пиктограмм.
Чтобы закрасить ячейку необходимо в событии DrawCell, которое
происходит каждый раз при перерисовке компонента изменить цвет кисти и
вызвать метод FillRect. Предварительно желательно создать массив на тип
Tcolor и при каждом щелчке по ячейке компонента StringGrid устанавливать
76
цвет необходимому элементу массива. Цвет можно устанавливать в
зависимости от активной ячейки компонента ColorGrid.
Рассмотрим несколько примеров работы с данным компонентом,
используя его графические свойства.
Пример № 16
Необходимо, чтобы при щелчке по ячейке компонента StringGrid она
окрашивалась в цвет, установленный в данный момент в компоненте
ColorGrid.
Рис. 61. Внешний вид работы программы примера № 16
Опишем глобальные переменные:
var
A:Array[0..10,0..10] Of TColor;
Для процедуры создания формы:
Var I,J,K:Integer;
{Установим белый цвет для элементов массива}
begin
For I:=0 To 10 Do For J:=0 To 10 Do Begin
K:=Random(255); A[I,J]:=K;
End;
end;
Для события OnSelectCell компонента StringGrid:
Begin
{Установливаем необходимому элементу массива цвет, установленный в
ColorGrid}
A[ACol,ARow]:=ColorGrid1.ForegroundColor;
end;
77
Для события OnDrawCell:
{Закрашиваем ячейку}
begin
With StringGrid1.Canvas do begin
Brush.Color := A[ACol,ARow]; FillRect(Rect);
End;
end;
Пример № 17
Часто, для визуализации решения задачи необходимо закрашивать
ячейки в зависимости от какого-либо условия, например, для визуализации
путей выхода из лабиринта. Рассмотрим следующий пример.
В StringGrid помещен случайный массив из 0, 1 и 2. Необходимо
закрасить ячейки с одинаковыми цифрами конкретным цветом. Поступаем
аналогично, как и в предыдущем примере, но следует иметь в виду, что после
закраски ячейки текстовая информация в ней исчезает. Ее необходимо
вывести заново, но используя уже метод Textout объекта Canvas.
Поместим на форму StringGrid и кнопку. Опишем глобальную
переменную:
var
B:Boolean;
Для процедуры создания формы:
begin
B:=False;
end;
Для кнопки:
Var I,J,K:Integer;
{Генерируем случайный массив из указанных чисел}
begin
For I:=0 To StringGrid1.ColCount-1 Do Begin
For J:=0 To StringGrid1.RowCount-1 Do Begin
K:=Random(3); StringGrid1.Cells[I,J]:=IntToStr(K);
End;
End;
B:=True;
end;
78
Рис. 62. Внешний вид работы программы примера № 17
Для события OnDrawCell:
Var I:Integer;S:String;
{Закрашиваем ячейки в необходимый цвет}
begin
If B Then Begin
With StringGrid1.Canvas do begin
S:=StringGrid1.Cells[ACol,ARow]; I:=StrToInt(S);
Case I Of
0:Brush.Color :=clRed;
1:Brush.Color :=clGreen;
2:Brush.Color :=clBlue;
End;
FillRect(Rect); TextOut(Rect.Left, Rect.Top, S);
End;
End;
end;
Внешний вид работы программы приведен на рис. 62.
Пример №18
Как видно из предыдущего примера, чтобы при запуске программы не
происходила перерисовка компонента и ячейки автоматически не
закрашивались, пришлось ввести дополнительную булевую переменную. Это
не всегда удобно. Очень часто необходимо закрасить определенную ячейку
по какому-либо внешнему событию, которое происходит независимо от
перерисовки компонента. В данном примере будем закрашивать ячейки,
вообще не используя события компонента TStringGrid. Это возможно на
основании того, что компонент имеет свойство Canvas со всеми его методами
79
и свойствами, следовательно, можно закрасить любую прямоугольную
область канвы, изменив цвет кисти и выполнив метод FillRect, параметром
которого является прямоугольная область. Остается только определить
координаты прямоугольной области указанной ячейки.
Создадим форму, приведенную на рис. 63.
Рис. 63. Внешний вид работы программы примера № 18
Для процедуры создания формы пишем следующий код:
Begin
{Отменяем автоматическую перерисовку}
StringGrid1.DefaultDrawing:=False;
end;
Если не отменить автоматическую перерисовку, то при закрашивании
следующей ячейки, закраска предыдущей ячейки будет отменяться.
Для кнопки пишем следующий код:
Var X,Y,R,C:Integer;Rec:TRect;
begin
{Получаем номер строки и столбца}
R:=StrToInt(Edit1.Text);C:=StrToInt(Edit2.Text);
{Определяем координаты прямоугольной области ячейки}
X:=C*(StringGrid1.DefaultColWidth+1);
Y:=R*(StringGrid1.DefaultRowHeight+1);
Rec.Left:=X;Rec.Top:=Y;
Rec.Bottom:=Y+StringGrid1.DefaultRowHeight;
Rec.Right:=X+StringGrid1.DefaultColWidth;
{Устанавливаем цвет пера}
StringGrid1.Canvas.Brush.Color:=ColorGrid1.ForegroundColor;
{Закрашиваем прямоугольную область}
StringGrid1.Canvas.FillRect(Rec);
end;