Основы работы в Delphi, или Начало пути 

Среда Delphi включает в себя полный набор визуальных компонентов для быстрой разработки приложений Windows, поддерживающих разработку пользовательского интерфейса. Библиотека визуальных компонентов встроена в среду разработки приложения и представляет собой набор элементов, используемых в качестве фундамента при строительстве приложений (кнопки, однострочные и многострочные редакторы, списки, мультимедийные элементы, различные диалоги и пр.).

Задачи урока

  • Создание и сохранение проекта.
  • Освоение базовых навыков работы с компонентами Delphi.
  • Основы создания приложения Windows с помощью компонентов.
  • Изменение основных свойств компонентов.
  • Использование компонентов Button и Label
  • Запуск приложения.

Выполнение упражнения

В этом уроке мы рассмотрим, как создать приложение — приветствие миру, используя графический интерфейс Windows и стандартные компоненты из состава палитры Delphi (рисунок 1). Оно состоит из кнопки на зелёном фоне, которая пока ничего не делает, и жизнеутверждающей надписи красного цвета на белом фоне. Но всё равно красота!

image003
Рисунок 1. Окно приложения

 

1. Создание проекта

1. Запустите Delphi и создайте новый проект: File (Файл) ? New (Создать) ? Application (Приложение).

2. Сохраните проект в отдельную папку. Папку, чтобы потом не запутаться,  лучше назовите так, как называется урок: «Основы работы». Этого правила следует придерживаться и в дальнейшем.
3. Запустите проект, нажав клавишу F9 или пиктограмму image006 на  панели инструментов. Сначала Delphi немного подумает, создавая EXE-файл, а затем запустит его. На экране появится окно — результат вашей работы (рисунок 2).

4. Это окно, как и обычное, можно  перетаскивать по экрану, изменять размеры, сворачивать и разворачивать, используя стандартные средства Windows по работе с окнами. Проделайте все эти операции и убедитесь в полноценности этого окна.

Рисунок 2. Пустое окно

5. Закройте окно вашего приложения для того, чтобы вернуться в Delphi.

Заметьте, что при запуске приложения у нас будут два практически одинаковых окна. Первое, в сетку,  — на конструктор формы. Второе — на работающее приложение. Не перепутайте их!

Перед продолжением разработки закройте окно работающего приложения.

 

 

2. Выбор компонентов

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

Теперь попробуем «напичкать» его другими компонентами, а точнее одним компонентом — кнопкой. Кнопка (по-английски Button) — это самый распространённый в приложениях Windows компонент с одним очень большим плюсом — на неё можно нажимать! Причём после нажатия обязательно должно происходить что-то очень нужное, но об этом в другом уроке.

1. В палитре компонентов выберите категорию Standard.

2. Наведите мышью на пиктограмму кнопки image010. При этом, через долю секунды, появится всплывающая подсказка с названием компонента (Button).

3. Щёлкните по пиктограмме мышью. Кнопка станет «вдавленной», как показано на рисунке 3.

image012
Рисунок 3. Палитра компонентов

4. Щёлкните мышью по форме. Компонент появится на форме в том месте, где произошёл щелчок. В результате у нас получилась форма с одной кнопкой (рисунок 4).

5. Запустите приложение и увидите ту же самую форму, как и раньше, но только с кнопкой, на которую можно нажимать. Но вот опять беда… кнопка нажимается, но ничего не происходит. Пока не происходит…

6. Закройте приложение.

image013
Рисунок 4

Теперь мы научились помещать нужный компонент из палитры компонентов на форму.

3. Размещение компонентов

1. Выделите кнопку на форме. Обратите внимание, что когда компонент выделен, вокруг него отображаются восемь чёрных квадратиков — маркеров (рисунок 4).

2. Измените положение кнопки на форме, «схватив» её мышью, как показано на рисунке 5а.

3. Потяните за левый нижний квадратик у выделенной кнопки, пока она не станет таких же размеров, как на рисунке 5б.

4. Уменьшите размер формы аналогично тому, как изменяете размер окна Windows.

 

а) image017б)image015
Рисунок 5

В результате вы должны получить окно, аналогичное тому, что показано на рисунке 6а.

 а) image018б)image019
Рисунок 6

5. Поместите на форму метку (Label). Этот компонент используется в приложениях Windows, наверное, ещё чаще, чем кнопка. Он просто и без излишеств выводит на форму произвольный текст, у которого можно менять цвет, шрифт, размер и т. д.  В общем, вещь замечательная, если нужно просто что-то написать на форме! Метка находится в той же вкладке (Standard), что и кнопка, и её значок выглядит следующим образом: image020. В результате получим примерно то, что показано на рисунке 6б.

6. Запустите приложение, нажав клавишу F9 или щёлкнув мышью на соответствующей пиктограмме . Результат выглядит уже симпатичней, чем в предыдущий раз.

7. Закройте приложение.

 

4. Свойства компонентов

МЕНЯЕМ ЗАГОЛОВКИ

Теперь поменяем заголовки (свойство Caption) наших компонентов так, как показано на рисунке 7. Заголовки необходимо поменять у трёх компонентов: Form1 (наше разрабатываемое окно), Label1 (метка) и Button1 (кнопка).

! Не ошибитесь. В момент помещения компонента на форму, его заголовок (свойство Caption) совпадает с именем (свойство Name). Имя для нас пока неприкосновенно!

image021
Рисунок 7.

1. Поменяйте заголовок на кнопке (имя Button1). Для этого:

Выберите на форме кнопку.

В окне Инспектор объектов на вкладке Properties найдите свойство Caption и поменяйте его содержимое на надпись “Моя кнопка!!!” (рисунок 8).

image023
Рисунок 8.

2. Выберите метку (Label1) и аналогичным образом поменяйте её заголовок с “Label1” на “Привет, мир!”.

3. Поменяйте свойство Caption формы (Form1) с «Form1» на «Моя программа». Для этого щёлкните мышью в свободной от компонентов области формы (но не по её заголовку) либо выберите форму в окне Дерево объектов.

Заметьте, что когда вы выбираете разные компоненты, набор свойств на вкладке Propertes окна Инспектор объектов также меняется. Это означает, что каждый компонент обладает своими, присущими только ему, свойствами.

4. Запустите приложение. Теперь оно приобрело более привлекательный вид.

 

МЕНЯЕМ ЦВЕТ

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

5. Выберите форму и найдите свойство Color на вкладке Propertes окна Инспектор объектов. Цвет фона компонентов выбирается с помощью выпадающего списка (рисунок 9). В нём расположена картинка с текущим цветом и его названием на английском языке. Заметьте, что перед названием стандартного цвета, всегда ставятся две буквы — cl (сокращённо Color).

6. Откройте меню выбора цвета. Для этого нажмите мышью на стрелочку вниз, находящуюся справа, и выберите ярко-жёлтый цвет (clYellow).

image025
Рисунок 9. Выбор цвета

В результате наших действий вся форма окрасится в ярко-зелёный цвет.

7. Поменяйте цвет фона метки Label1 на белый (clWhite).

В результате у вас получится нечто вроде рисунка 10.

image026
Рисунок 10.

Отметим один досадный факт: цвет фона кнопки и цвет текста на кнопке изменить нельзя!

 

МЕНЯЕМ  ШРИФТ

За изменения  параметров шрифта  отвечает свойство Font.

8. Выделите кнопку (Button1) и найдите свойство Font на вкладке Propertes окна Инспектор объектов (рисунок 11а).

а)image028б)
Рисунок 11. Изменение свойств шрифта

9. Нажмите на кнопку с изображением трёх точек справа и выберите через стандартное диалоговое окно Шрифт (рисунок 11б), начертание шрифта — жирный,  размер — 14 пт.

10. Для метки (Label1): установите размер шрифта — 24 пт, цвет шрифта — красный.

11. Теперь запустите приложение и полюбуйтесь.

Всё! Поздравляем вас с созданием первого приложения, работающего под управлением ОС Windows. Оно выполняет очень полезные функции — приветствует весь мир и говорит о том, что кнопка, расположенная ниже надписи  — ваша. Но это уже философия…

 

5. Коротко о главном

  • После создания нового проекта его сразу же необходимо сохранить в отдельную папку.
  •  Приложение удобно запускать нажатием на клавишу F9 или щёлкнув по пиктограмме image006на панели инструментов.
  •  Компоненты, помещённые на форму, можно перемещать и изменять их размеры.
  •  Свойство Name и свойство Caption компонента могут совпадать, но это два абсолютно разных свойства.
  •  Параметры шрифта лучше выбирать с помощью стандартного диалогового окна Шрифт.
6. Выполнение заданий:
Особенности задания

Создайте форму по образцу. Опишите компоненты, размещенные на форме, и их свойства.

Задания I уровня сложности

1.
image031


2.
image032


3.
image033


4.
image034


5.
image035


6.
image036


7.
image037


8.
image038


9.
image039


10.
image040


 

Задания II уровня сложности

1. Форма должна быть прозрачной. На рисунке показаны часть рабочего стола и работающее приложение.
image045


2. Форма должна всегда появляться поверх всех окон и в центре экрана. Обратите внимание, что фон метки прозрачный (см. Label).
image043


3. Форма должна содержать пиктограмму в левом верхнем углу, отличную от стандартной, и в работающем состоянии не должна менять свои размеры.
image042