§ 2. Визуальная среда разработки программ

Работа по созданию оконных приложений рассматривается в среде про­граммирования PascalABC.Net.

2.1 Структура проекта

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

  • файл формы (1), содержащий опи­сание внешнего вида окна приложения;
  • файл программного модуля (2), со­держащий описание функций-обработ­чиков для объектов на форме;
  • файл проекта (3), позволяющий связать структурные элементы проек­та между собой.

(Рассмотрите пример 2.1.)

Файлы одного проекта обычно хра­нятся внутри отдельной папки. При компиляции приложения создается файл с расширением .exe и именем, совпадающим с именем проекта. Этот файл запускает работающее приложе­ние без загрузки среды программи­рования. (Как скомпилировать при­ложение, чтобы файл с расширением .exe не удалялся после закрытия окна, см. в Приложении, с. 102).

Для создания проекта в среде PascalABC.Net нужно выполнить ко­манды Файл • Новый проект • При­ложение Windows Form (пример 2.2).

При создании проекта файлы сохра­няются автоматически (пример 2.3).

2.2 Интерфейс среды программирования

Полное окно среды программиро­вания PascalABC.Net при создании приложений Windows Form можно посмотреть в Приложении (с. 102).

Рассмотрим основные элементы.

Основное меню и панель быстрого доступа (пример 2.4) содержат коман­ды для управления проектом: сохра­нение, загрузка, выполнение и др.

Форма (пример 2.5) служит для визуального отображения окна при­ложения. Во время проектирования приложения на форме отображается точечная сетка, позволяющая вырав­нивать помещаемые на форму компо­ненты.

Инспектор объектов (пример 2.6) отображает свойства (или события) выбранного объекта.

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

Вкладка События содержит список событий для объекта. Для каждого события может быть определен свой обработчик. Если обработчик для события определен, напротив собы­тия будет прописано имя процедуры (функции) обработчика.

В нижней части инспектора объек­тов размещено описание выбранного свойства или обработчика событий.

Палитра компонентов (пример 2.7) содержит список визуальных компо­нентов, объединенных в группы. Рас­крытие группы происходит по щелч­ку с названием группы.

2.3. Работа с формой

Форма является объектом и служит для визуального отображения окна приложения. Как любой объект, фор­ма обладает свойствами (пример 2.8).

Свойство Назначение
Text Заголовок формы отобража­ется в строке заголовка окна при запуске приложения. По умолчанию — Form1
BackColor Цвет формы. Может быть вы­бран один из стандартных (пе­речислены в списке) или за­дан вручную тремя числами, соответствующими RGB
Size
Высота и ширина формы. Можно указать два числа че­рез «;» или развернуть свой­ство, нажав значок , и получить возможность ввода значений Width и Height
Location

Горизонтальная и вертикаль­ная координаты положения верхнего левого угла окна фор­мы на экране. Можно указать два числа через «;» или раз­вернуть свойство, нажав зна­чок , и получить возмож­ность ввода значений X и Y
(Name) Имя (внутреннее) формы. Ис­пользуется в программном коде для обращения к объекту. Является идентификатором
Для создания обработчика событий формы нужно в инспекторе объектов перейти на вкладку События (), вы­брать событие. Процедура генерирует­ся автоматически при двойном клике мышью в пустой строке напротив вы­бранного события. После этого среда переключается на страницу, на кото­рой пишется код (пример 2.9).

Имя процедуры-обработчика состо­ит из названия компонента, над кото­рым происходит событие, и названия события (Form_Click).

Для каждого объекта определен об­работчик по умолчанию, который соз­дается при двойном клике по объекту. Для формы таким обработчиком будет Form1_Load — событие, которое про­исходит при загрузке формы.

Для переключения между окном программного кода и конструктором дизайна формы можно использовать вкладки Дизайнер и Код в верхней части окна приложения: .

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

BackColor := Color.Red;

Система Pascal позволяет упро­стить ввод сложных имен в код про­граммы. После того как вы наберете часть сложного имени, на экране по­явится список со всеми свойствами и методами, которые относятся к этому объекту (пример 2.10).

Пример 2.9. Создание обработчика события Click (клик левой клавишей мыши) для формы.

Пример 2.11. Создать обработчик события для щелчка левой клавишей мыши по форме, в результате которо­го цвет формы должен поменяться на красный (продолжить работу с приме­ром 2.8).

Этапы выполнения задания

  1. Перейти на вкладку Events в ок­не инспектора объектов.
  2. Выполнить двойной щелчок в по­ле напротив события OnClik.
  3. В окне редактора кода в про­цедуре

Form1.Form1_Click(sender: Object; e: EventArgs);

вписать команду

BackColor := Color.Red;

Все изменения свойств формы, кото­рые производили в примере 2.8, мож­но описать программно. Для этого созда­ется обработчик события Form1_Load.

  1. Сохранить изменения в проекте.

Пример 2.1. Файлы проекта:

Пример 2.2. Создание проекта в PascalABC.Net:

Пример 2.3. Создание и выполнение проекта:

  1. Создать папку с именем Primer
  2. Создать проект
  3. Запустить проект на выполнение.

Вид окна приложения:

Для сохранения изменений использу­ют команду Сохранить все (кнопка ).

Пример 2.4. Меню и панель быстрого доступа:

Пример 2.5. Форма:

Пример 2.6. Инспектор объектов. Отображаются свойства формы:

Пример 2.7. Палитра компонентов:

Пример 2.8. Изменение свойств фор­мы в инспекторе объектов:

Свойство Значение
Text Пример 1
BackColor clAqua (выбрать из списка на вкладке Интернет)
Size
250; 250
Location 250;200

После изменения значений свойств в инспекторе объектов изменится внеш­ний вид формы:

Пример 2.9. Создание обработчика события Click (клик левой клавишей мыши) для формы.
1. Выбор события в инспекторе объектов:

2. Окно программного кода со встав­ленным обработчиком:

Пример 2.10. Подсказка системы при вводе свойств объекта:

Если вы введете первые буквы назва­ния свойства (метода), то курсор переме­стится в списке к тем свойствам и мето­дам, названия которых начинаются на эти буквы. После этого нужное свойство можно вставить в программу щелчком мыши или нажатием клавиши Enter. Если список не появился, его можно вы­звать комбинацией клавиш Ctrl + пробел.

Пример 2.11. Код процедуры-обра­ботчика:

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

Форма после запуска проекта:

Форма после щелчка мыши по ней:

1. Какие элементы среды PascalABC отображаются на экране после создания проекта?
2. Какие файлы входят в состав приложения, создаваемого в PascalABC?
3. Для чего предназначена форма?
4. Для чего используют инспектор объектов?
5. Какие свойства форм вы можете назвать?
6. Как создать обработчик события?

Упражнения

1. Внесите изменения в проект из примера 2.11 так, чтобы цвет формы менялся случайно. Изменять цвет можно с помощью функции FromArgb. У этой функции четыре параметра: прозрачность (альфа-канал, интенсивность красного цвета, интенсивность зеленого цвета, интенсивность синего цвета). Генерация случайных чисел происходит следующим образом. Сначала создается переменная, являющаяся объектом класса Random (команда var rnd: Random := new Random();). Каждое новое случай ное число можно получить, обращаясь к методу next(x), где x задает полуинтервал [0, x). Команда смены цвета будет выглядеть следующим образом:

BackColor := Color.FromArgb (255, rnd.next(256), rnd.next(256), rnd.next(256));

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

  1. Создайте и сохраните в новой папке проект.
  2. Измените свойство Text формы на Упражнение 2.
  3. Создайте обработчик события мыши DblClick.
  4. Для изменения ширины и высоты формы можно воспользоваться командами:

Width := Width + 5;

Height := Height + 5;

  1. Сохраните изменения в проекте.
  2. Запустите проект и проверьте его работу.

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

  1. Измените свойство Text у формы на Упражнение 3.
  2. Установите желтый цвет формы.
  3. Создайте обработчики для двух событий мыши: MouseEnter и MouseLeave.
  4. В коде события MouseEnter установите зеленый (Green) цвет формы, а коде события MouseLeave — желтый (Yellow).
  5. Сохраните изменения в проекте.
  6. Запустите проект и проверьте его работу.

Проверь себя