5.1. Разработка оконных приложений

Создание любого оконного прило­жения осуществляется, как правило, в три этапа:

1. Создание интерфейса приложе­ния, т. е. средств взаимодействия поль­зователя с программой.
2. Разработка сценария работы бу­дущего приложения. На этом этапе определяют, какая информация будет выводиться на экран, какие события будут происходить при использовании различных компонентов, как прило­жение должно завершить работу, ка­кие результаты и в каком виде сохра­нить и т. д.
3. Разработка алгоритма решения поставленной задачи.

Большинство приложений в опера­ционной системе Windows выглядят и ведут себя сходным образом. Компа­ния Microsoft предложила рекомен­дации для разработки программного обеспечения, направленные на то, чтобы пользователь не тратил время на освоение нюансов пользователь­ского интерфейса новой программы, а сразу начал продуктивно ее исполь­зовать. Эти рекомендации основаны на психофизиологических особенно­стях человека и существенно облегчат жизнь будущим пользователям вашей программы.

Приведем некоторые рекомендации по разработке графического интерфей­са оконных приложений (пример 5.1).

5.2. Стандартные диалоги

Практически любое приложение Windows использует стандартные диа­логи, встроенные в операционную си­стему, для открытия и сохранения файлов, выбора атрибутов шрифта или установки цвета, поиска текста, печати. В библиотеку VCL включены компоненты, реализующие соответ­ствующие окна Windows. Они раз­мещены на панели Диалоговые окна (пример 5.2). В примере 5.3 приведен перечень компонентов для реализа­ции стандартных диалогов.

Объекты на странице Диалоговые окна невидимы во время выполнения, поэтому они размещаются в специаль­ной области под формой (пример 5.4). Внешний вид окна диалога зависит от версии Windows.

Вызов и обработка диалогов про­исходит программно. Для всех диа­логов определен метод ShowDialog() (пример 5.5). С помощью этого мето­да происходит открытие окна соот­ветствующего диалога. В свойствах компонента-диалога запоминается выбор пользователя, который затем можно обработать.

Диалоги для открытия и сохране­ния файлов используются в различ­ных приложениях. Основное свойство компонентов OpenDialog и SaveDialog, в котором возвращается в виде строки имя файла, — это свойство FileName. Если задать данное свойство на этапе конструирования в окне инспектора объектов, то при открытии диалога

может выбрать имя шрифта, его стиль, размер. Основное свойство ком­понента — Font.

Для вызова стандартного окна установки цвета используется компо­нент ColorDialog (пример 5.8). В нем можно выбрать цвет из базовой па­литры. Основное свойство компонен­та ColorDialog — Color. Это свойство соответствует тому цвету, который пользователь выбрал в диалоге.

5.3. Создание меню

Практически любое приложение должно иметь меню, которое дает удоб­ный доступ к функциям программы. Существует несколько типов меню:

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

Для добавления новых пунктов ме­ню нужно кликнуть левой клавишей мыши в верхней части формы (там, где обычно располагается меню). За­тем заполнить ячейки, соответствую­щие пунктам меню (пример 5.10).

Каждый пункт меню является от­дельным объектом. Список всех ком­понентов, относящихся к меню, мож­но увидеть в выпадающем списке в инспекторе объектов. Названия пунк­тов меню прописываются в свойстве Text в окне инспектора объектов (при­мер 5.11).

Для каждого пункта меню основ­ным событием является событие Click.

Создание контекстных меню анало­гично созданию главного меню. Снача­ла нужно выбрать компонент на ниж­ней панели, а затем заполнить ячейки. Для того чтобы при щелчке правой кнопкой мыши на некотором компо­ненте появлялось контекстное меню, нужно написать имя контекстного ме­ню в свойстве ContextMenuStrip для выбранного компонента (пример 5.12).

Написание обработчиков для меню и диалогов будет рассмотрено в сле­дующих пунктах.

5.4. Создание приложения «Блокнот»

Программа Блокнот должна давать возможность открыть и сохранить текстовый файл, выбрать цвет текста и цвет фона.

Разместить на форме (пример 5.13) следующие компоненты:

• рабочая область для текста — TextBox1;
• диалоги работы с файлами — OpenFileDialog1, SaveFileDialog1;
• диалоги для настройки внешне­го вида приложения — FontDialog1, ColorDialog1;
• главное меню —

Компонент TextBox1 предназначен для набора и редактирования текста. Текст может набираться в несколько строк, поэтому нужно установить зна­чение true для свойства MiltiLine. Для того чтобы компонент занимал всю клиентскую часть формы, необходимо установить у свойства Dock значение Fill (пример 5.14). Установить значе­ние Vertical для свойства ScrollBars (вертикальная полоса прокрутки).

Структура меню представлена в примере 5.15. Для написания обработ­чиков пунктов меню нужно в инспек­торе объектов выбрать соответствую­щий пункт меню, перейти на вкладку Events и выбрать событие Click. По­скольку событие Click является собы­тием по умолчанию, то двойной клик по пункту в редакторе меню создаст процедуру-обработчик.

Окно работающего приложения по­казано в примере 5.16.

Обработчики событий для каждого из пунктов меню представлены в при­мере 5.17.

Для сохранения и загрузки файлов опишем глобальную переменную F_N: var F _ N: String;

Обработчик пункта меню Новый (StripMenuItem4) очищает строки компонента TextBox1 от введенного ранее текста.

Обработчики пунктов меню От­крыть (StripMenuItem5) и Сохранить (StripMenuItem6) работают с файлом. Имя файла добавляется к заголовку окна.

Обработчик пункта меню Выход (StripMenuItem8) закрывает главную форму проекта.

Обработчик пункта меню Шрифт (StripMenuItem9) приписывает шриф­ту, связанному с компонентом TextBox1, свойства, выбранные пользователем.

Обработчики пунктов меню Цвет текста (StripMenuItem10) и Цвет фо­на (StripMenuItem11) устанавливают для TextBox1 цвета текста и фона, вы­бранные пользователем.

Для компонента TextBox определе­ны следующие действия: Копировать (Ctrl + C), Вырезать (Ctrl + X), Вста­вить (Ctrl + V), Отменить (Ctrl + Z).

5.5. Создание приложения «Графический редактор»

Программа «Графический редактор» должна давать возможность открыть и сохранить файл, выбрать цвет линии и цвет фона, установить толщину ли­нии. Рисование производится выбран­ным цветом линии при нажатой левой клавише мыши. Клик правой клави­шей мыши внутри замкнутой области используется для заливки ограничен­ной области выбранным цветом фона.

Сначала спроектируем форму, раз­местив на ней следующие компоненты (пример 5.18):

• область для рисования — PictureBox;
• компоненты, отображающие вы­бранный цвет для рисования и цвет фона — Panel1, Panel2;
• кнопки для смены цвета;
• компонент выбора цвета — ColorDialog1;
• компонент для выбора толщины линии — numericUpDown1 (панель компонентов Стандартные элементы управления);
• главное меню — menuStripl и компоненты для работы с файлами — OpenFileDialog1, SaveFileDialog

На этапе конструирования устано­вить значение свойства BackColor у компонентов Panel1 и Panel2 — Black и White соответственно.

У свойств Value и Minimum для компонента numericUpDown1 устано­вить значение 1.

Структура меню показана в при­мере 5.19. Создание рисунка и загруз­ка файла в приложение приведены в примере 5.20.

В обработчике события Load для формы прописаны первоначальные установки для создания графического объекта, заданы параметры кисти и карандаша.

В обработчике события MouseDown для компонента PaintBox1 задаем пе­ременной m_d значение true — кнопка нажата. Здесь же запоминаем коорди­наты точки, поскольку от этой точки начнем строить линию. В обработчике MouseUp — значение переменной m_d = false — кнопка не нажата.

Для отслеживания траектории дви­жения мыши по компоненту PaintBox1 создаем обработчик события MouseMove. Если кнопка нажата, то можем стро­ить линию. Параметры e.x, e.y воз­вращают координаты точки, в кото­рой произошло нажатие кнопки.

Для перемещения мыши нужно использовать метод DrawLine (x1, y1, e.x, e.y) — рисование линии, соеди­няющей две точки. После прорисовки обновляем координаты.

Толщина линии определяется зна­чением свойства Value для компонента numericUpDown1. Обработчик собы­тия — ValueChanged.

Обработчики событий для компо­нентов OpenFileDialog1, SaveFileDialog1 вызываются из соответствующих пунктов меню и аналогичны обработ­чикам, описанным для программы Блокнот. Для сохранения и загрузки файлов нужно описать глобальную строковую переменную FileName. Приложение может сохранять и за­гружать файлы формата BMP.

С помощью компонента ColorDialog1 можно выбрать цвет линии или за­ливки. Пункты меню Цвет позволяют выбрать цвет линии или заливки соответственно.

В примере 5.21 приведено описа­ние глобальных переменных, которые используются для создания прило­жения «Графический редактор». Об­работчики всех описанных событий приведены в приложении.

5.6. Создание приложения «Калькулятор»

Создание калькулятора начнем с конструирования формы. На ней нуж­но разместить: поле TextBox для ввода/ вывода чисел, 10 кнопок с цифрами, 4 кнопки с арифметическими дей­ствиями, кнопку «=» и кнопку «С» — очистить (пример 5.22).

При нажатии на кнопку с цифрой программа должна дописать эту циф­ру к числу в поле TextBox. При на­жатии на кнопку с арифметическим действием нужно запомнить число, которое в данный момент находится в поле TextBox, и очистить поле для ввода второго числа. Числа будем хра­нить в двух переменных n1, n2 типа integer. Знак операции будем хранить в переменной znak типа char. Пере­менные описываются как глобальные. При нажатии на кнопку «=» выполня­ется арифметическое действие и выво­дится результат.

Кнопки могут содержать рисунок на поверхности (например, изображе­ния с цифрами). Свойство для разме­щения рисунка — BackgroundImage.

Установить значение FixedSingle для свойства FormBorderStyle формы. В этом случае граница формы не по­зволит менять ее размеры.

Коды процедур-обработчиков при­ведены в примере 5.23.

Для каждой кнопки на форме нуж­но создать обработчик события Click.

Обработчики событий для всех цифровых кнопок будут идентичны.

Обработчики для кнопок арифме­тических действий будут отличаться

только значением запоминаемой опе­рации.

Основные вычисления происходят в обработчике кнопки «=». Преобра­зуем в число n2 значение поля Edit и выполняем арифметическую опера­цию в зависимости от значения пере­менной znak. После этого обнуляем переменные.

В обработчике кнопки «С» (от англ. clear — очистить) происходит обнуле­ние переменных и очистка поля Edit.

Созданный калькулятор имеет большое количество ограничений в своей работе, поскольку рассчитан на вычисления только с натуральными числами.

Пример 5.1. Рекомендации по созда­нию оконных приложений.

1. В приложении рекомендуется раз­местить главное меню и инструмен­тальную панель быстрых кнопок, дуб­лирующих основные разделы меню.
2. Желательно, чтобы объекты при­ложения обладали контекстными меню, появляющимися при нажатии правой клавишей мыши на объекте.
3. Для объектов рекомендуется про­писать подсказки, всплывающие при наведении указателя мыши на объект.
4. Рекомендуется реализовать строку состояния, используемую для выдачи различной информации.
5. При нажатии клавиши F1 должен загружаться файл справки.
6. В программе желательно реализо­вать возможность настройки и сохра­нения настроек, чтобы при следующем сеансе работы их не пришлось устанав­ливать заново.
7. Если результат работы приложе­ния зависит от каких-либо параметров, обязательно укажите значения по умол­чанию. Они позволят ускорить взаимо­действие пользователя с программой, а также являются примером того, в ка­ком формате данные следует вводить.

Мощным воздействием на психи­ку человека является цвет, поэтому с ним нужно обращаться очень осторож­но. Нужно стремиться использовать ограниченный набор цветов и уделять внимание их правильному сочетанию. Восприятие цвета у человека очень индивидуально, поэтому не стоит на­вязывать всем свое видение цвета. Же­лательно, чтобы основной цвет формы был нейтральным (например, у боль­шинства приложений Microsoft это светло-серый цвет).

Пример 5.2. Панель Диалоговые окна

Пример 5.3. Список некоторых стан­дартных диалогов.

Пример 5.4. Диалоговые компоненты и кнопки для их вызова на форме:

Пример 5.5. Стандартное обращение к диалогу:

<имя диалога>. ShowDialog();

Пример 5.6. Стандартный диалог для открытия файла:

Пример 5.7. Стандартный диалог для настроек шрифта:

Пример 5.8. Стандартный диалог для выбора цвета:

Пример 5.9. Меню:

Пример 5.10. Редактирование меню:

Если в качестве значения свойства Caption ввести «—», то вместо пункта меню появится разделитель.

Пример 5.11. Название пункта меню в инспекторе объектов:

Пример 5.12. Контекстное меню для компонента Button1:

Пример 5.13. Форма на этапе кон­струирования:

Пример 5.14. Настройка клиентской области:

Пример 5.15. Структура меню:

Пример 5.16. Работающее приложение:

Пример 5.17. Обработчики событий для пунктов меню:

var s:string; procedure Form1.toolStripMenuItem4_Click (sender: Object; e: EventArgs); begin TextBox1.Clear; //Файл — Новый end; procedure Form1.toolStripMenuItem5_Click (sender: Object; e: EventArgs); begin openFileDialog1.ShowDialog(); //Файл — Открыть s := openFileDialog1.FileName; Text := ‘Блокнот ‘ + s; TextBox1.Lines := ReadAllLines(s); end; procedure Form1.toolStripMenuItem6_Click (sender: Object; e: EventArgs); begin saveFileDialog1.ShowDialog(); //Файл — Сохранить F_N := saveFileDialog1.FileName; WriteAllLines(F_N, TextBox1.Lines); Text := ‘Блокнот ‘ + F_ N; end; procedure Form1.toolStripMenuItem8_Click (sender: Object; e: EventArgs); begin close; //Файл — Выход end; procedure Forml.toolStripMenuItem9_Click (sender: Object; e: EventArgs); begin fontDialogl.ShowDialog(); //Формат — Шрифт TextBoxl.Font := fontDialogl.Font; end; procedure Forml.toolStripMenuIteml0_ Click(sender: Object; e: EventArgs); begin colorDialogl.ShowDialog(); //Формат — Цвет текста TextBoxl.ForeColor := colorDialogl.Color; end; procedure Forml.toolStripMenuItemll_ Click(sender: Object; e: EventArgs); begin colorDialogl.ShowDialog(); //Формат — Цвет фона TextBoxl.BackColor := colorDialogl.Color; end;

Пример 5.18. Форма на этапе конструирования:

Пример 5.19. Структура меню:

Пример 5.20. Работающее приложе­ние:

Пример 5.21. Описание глобальных переменных.

var gr: Graphics; bm: Bitmap; p_c: Pen; s_b: SolidBrush; c_f, c_b: Color; w: decimal; x1, y1, x2, y2: integer; m_d : boolean; F_N: string;

Пример 5.22. Форма на этапе кон­струирования:

Пример 5.23. Обработчики событий:

var n1, n2: integer; //описание глобальных переменных znak: char; procedure Form1.button1_Click (sender: Object; e: EventArgs); begin TextBox1.Text := TextBox1.Text + ‘1’; //приписывание цифры к числу end; procedure Form1.button9_Click (sender: Object; e: EventArgs); begin TextBox1.Text := TextBox.Text1 + ‘2’; //приписывание цифры к числу end;

Для остальных цифровых кнопок нужно изменить только ‘1’ на соответ­ствующую цифру.

procedure Form1.button12_Click (sender: Object; e: EventArgs); begin n1 := StrToInt(TextBox1.Text); znak := ‘+’; //запоминание знака операции TextBox1.Clear; end;

Для остальных кнопок со знаками арифметических действий нужно из­менить только ‘+’ на соответствующий знак.

procedure Form1.button16_Click (sender: Object; e: EventArgs); begin n2 := StrToInt(TextBox1.Text); case znak of ‘+’: TextBox1.Text:= IntToStr(n1 + n2); ‘-‘: TextBox1.Text:= IntToStr(n1 – n2); ‘*’: TextBox1.Text:= IntToStr(n1 * n2); ‘/’: TextBox1.Text:=IntToStr(n1 div n2); end; n1 := 0; n2 := 0; znak := ‘ ‘; end;

procedure Form1.button15_Click (sender: Object; e: EventArgs); begin TextBox1.Clear; n1 := 0; n2 := 0; znak :=’ ‘; end;