6.2.6. Рекомендации по созданию графического интерфейса

Для отображения диаграммы валютного эквивалента исходной суммы по курсу заданных стран необходимо:

1. Создать в проекте новую форму Form2 c помощью команды Файл/Новый/Форма и сохранить ее под именем Graphic в папке «KR» с помощью команды Файл/Сохранить как… После сохранения формы имя второго модуля появится в раздела implementation первого модуля Tabl в виде его подключения к разделу uses Graphic, а во втором модуле Graphic раздела implementation необходимо объявить первый модуль Tabl, путем соответствующей записи^:

. . .

implementation

{$R *.dfm}

uses Tabl; //объявляется при наборе символов с клавиатуры

. . .

2. Разместить на форме Form2 компоненты, обеспечивающие требуемые режимы работы приложения (см. рис.12). Например:

• графический образ Image1 (2) – для вывода диаграммы (легенды);

• кнопки Bitbtn1..4 или MainMenu1 – как средства перехода к таблице, построения диаграммы, очистки экрана и завершения работы;

Image1

Рис.12. Графический интерфейс в режиме запуска

3. Для всех компонентов, включая саму форму, установить свойства, соответствующие выполняемым ими функциям.

4. Создать необходимые обработчики событий.

4.1. Для построения диаграммы создать обработчик события OnClick для кнопки «Построить», при выполнении которого в графическом образе Image1 должна отобразиться диаграмма пересчета денежных сумм. При этом необходимо учесть, что величина суммы выдачи может колебаться в весьма значительном диапазоне, и может составлять как десятки единиц, так и миллионы, а область построения графика фиксирована. В этой связи целесообразно ввести масштабируемый коэффициент, учитывающий отображение больших и малых величин конвертируемой валюты в ограниченных образом Image1 пределах построения диаграммы.

В разделе объявлений предусмотреть массивы:

• цветов столбиков диаграммы, заданных по варианту,

• значений категорий, считанных с последнего столбца «Сумма выдачи» таблицы StringGrid1,

• процентов категорий в общей сумме (с целью создания масштабирующего эффекта для разных по величине сумм выдачи),

• высот столбиков для построения диаграммы.

В теле процедуры предусмотреть:

• проверку наличия расчетных данных в столбце «СуммаВыдачи», необходимых для построения диаграммы и выдачи сообщения в окно диалога в случае активизации кнопки «Построить» до того, как произошло вычисление суммы выдачи в таблице StringGrid1;

• вычисление общей суммы, процент каждой категории в общей сумме, категорию с максимальным значением конвертируемой валюты, высоту столбиков по отношению к максимальному значению;

• задаться шириной столбиков и расстоянием между ними, прямоугольной областью построения диаграммы, заливкой фоном области построения гистограммы и стилем контура столбика, по варианту;

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

Аналогично осуществить построение легенды. При этом в качестве поясняющих надписей категорий валют целесообразно вывести коды заданных стран (см. рис.12). Легенду можно строить как в одном образе Image1 с диаграммой так в отдельном компоненте Image2.

Цвет, стиль шрифта выбираются по желанию, но с учетом наглядного представления атрибутов надписей на диаграмме.

4.2. Для отображения таблицы создать обработчик события OnClick для кнопки «к Таблице», при выполнении которого отображается первая форма проекта Form1.Show.

4.3. Для очистки области построения диаграммы создать обработчик события OnClick для кнопки «Очистить», при выполнении которого поверхность графического образа Image1 освобождается от диаграммы.

Если для отображения диаграммы использовать компонент Image1, а для легенды – компонент Image2, то для очистки графического образа, например Image1, можно использовать процедуру FillRect (clientrect). Так, например, инструкция

Image1.Canvas.FillRect(Rect(0,0,Image1.Width,Image1.Height));

очистит всю прямоугольную область графического образа Image1, начиная с точки X,Y (0, 0), а значение True свойства Transparent обеспечит сохранность других изображений. Таким образом, можно очищать экран от диаграммы независимо от легенды, которая может отображаться постоянно. Если для построения диаграммы и легенды использовать один контейнер, то при его очистке и график и легенда уничтожаются одновременно.

4.4. Для завершения работы с диаграммой создать обработчик события OnClick для кнопки «Завершить», при выполнении которого вторая форма проекта становится не видимой: Form2.Visible:=false.

5. Сохранить изменения и произвести компиляцию проекта.

7. Запустить проект и проверить его работоспособность.

8. С помощью Image Editor (IDE) или программ Paint, Photoshop создать пиктограммы в виде битовых матриц, размером 16х16 с графическим изображением адекватных команд ко всем кнопкам или пунктам меню. Сохранить их в папке «KR» под именами, соответствующими выполняемым функциям (например, Clear.bmp, Exit.bmp…).

9. Используя для кнопок свойство Glyph, открыть пиктограммы в окне Редактора Рисунка и загрузить их в соответствующие кнопки BitBth1- BitBthN. Если органы управления выполнены с помощью компонента MainMenu1, то, используя свойство BitMap загрузить пиктограммы в соответствующие пункты меню.

10. Используя Image Editor, создать уникальный значок приложения, сохранить его под именем Icon1.ico в папке «KR» и заменить им в своем приложении стандартный значок Delphi (см п. 6.2.2).

При выполнении проекта в среде Lazarus (FreePascal) задание с созданием уникального значка приложения не выполнять.