§5 Создание приложений

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. Создание меню

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

  • главное меню с выпадающими списками разделов;
  • каскадные меню, в которых раз­делу первичного меню ставится в со­ответствие список подразделов;
  • контекстные меню, появляющие­ся при нажатии правой клавишей мыши на объекте.
В PascalABC.Net меню создают­ся компонентами (главное меню) и (контекстное меню), расположенными на панели Меню и панели инструментов. Во время выполнения программы сами компоненты не видны, поэтому раз­мещаются в специальной области под формой (пример 5.9). На этапе выпол­нения программы главное меню будет помещено на свое стандартное место — наверху формы, контекстное меню по­явится только после нажатия правой кнопки мыши по тому компоненту, к которому оно относится.

Для добавления новых пунктов ме­ню нужно кликнуть левой клавишей мыши в верхней части формы (там, где обычно располагается меню). За­тем заполнить ячейки, соответствую­щие пунктам меню (пример 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;

 

1. Дополните проект Блокнот следующими возможностями:

1. Пункт меню Сохранить файл заменить двумя: Сохранить и Сохранить как…
2. Добавить Пункт меню Переносить по словам.
3. Добавьте  возможность  управления  полосами  прокрутки:  установить 
горизонтальную, вертикальную, обе.4∗. Добавьте  следующие  диалоги:  Параметры  страницы,  Печать,  Поиск, 
Замена и соответствующие пункты в меню.
5. Добавьте  контекстное  меню  для  управления  компонентом  Memo.  Команды  контекстного  меню,  дублирующие  команды  основного  меню, 
должны вызывать те же обработчики.
6. Предложите свои возможности.

2. Для проекта Графический редактор добавьте следующие возможности:

1. Рисовать отрезки, овалы и прямоугольники. 
2. Предложите свои возможности.

3. Для проекта Калькулятор добавьте следующие возможности:

1. Возможность работы с вещественными числами.
2. Возможность  вычислять  значения  функций:  извлечение  квадратного корня, тригонометрические функции (для градусов и радиан) и др.
3∗. Возможность перевода чисел в другие системы счисления.

 

Проверь себя