Пример 1. Применение стандартных кнопок, меток и полей редактирования

 

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

 

В форме будут присутствовать две метки, одно поле редактирования и две кнопки редактирования.

 

Изменим размеры стартовой формы и название, отображаемое на строке заголовка. Поскольку кроме стартовой формы других компонентов в нашем проекте ещё нет, то в окне Object Inspector отображаются свойства только формы и в раскрывающемся списке этого окна присутствует надпись:

Form1           TForm1,

 

где Form1 – название компонента, TForm1 – тип компонента (в данном случае – форма).

В окне Object Inspector на вкладке Properties необходимо установить следующие значения для свойств формы:

В столбце справа найдём свойство Caption, а в столбце слева изменим его значение, исправив текст «Form1» на «Ввод слова»

Свойство

Значение

Пояснение

Caption

Ввод слова

название, отображаемое на строке заголовка формы

Client Height

110

высота формы – 110 пикселей

Client Width

200

ширина формы – 200 пикселей

Left

300

расстояние от левой границы формы до левой границы экрана

Top

200

расстояние от верхней границы формы до верхней границы экрана

Теперь разместим на форме необходимые компоненты.

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

При наведении курсора мыши к какой-либо пиктограмме компонентов на палитре компонентов появляется подсказка с названием компонента. Также пиктограмма компонента принимает вид нажатой кнопки при её активизации.

Выберем на палитре компонентов компонент Label (метка) и установим его на стартовой форме.

На стартовой форме появится метка с текстом «Label1». Поскольку в данный момент выделена метка, то в раскрывающемся списке окна Object Inspector будет отображаться следующая надпись:

Label1           TLabel,

где Label1 – название компонента, TLabel – тип компонента (в данном случае – метка).

Для того чтобы изменить текст метки, необходимо в окне Object Inspector на вкладке Properties изменить свойство Caption метки. В столбце справа найдём свойство Caption, а в столбце слева изменим его значение, исправив текст «Label1» на «Введите слово»

В окне Object Inspector на вкладке Properties необходимо установить следующие значения для свойств метки:

Свойство

Значение

Пояснение

Caption

Введите слово

название, отображаемое на метке

Left

32

расстояние от левой границы метки до левой границы формы

Top

16

расстояние от верхней границы метки до верхней границы формы

Выберите на палитре компонентов компонент Edit (поле редактирования) и поместите его на форме. На стартовой форме появится метка с текстом «Edit1». Если в данный момент выделено поле редактирования, то в раскрывающемся списке окна Object Inspector будет отображаться следующая надпись:

Edit1             TEdit,

где Edit1 – название компонента, TEdit – тип компонента (в данном случае – поле редактирования).

По умолчанию в поле редактирования будет отображаться следующий текст: «Edit1», необходимо изменить свойства поля редактирования так, чтобы при запуске приложения оно было пустым. Для этого необходимо в окне Object Inspector на вкладке Properties изменить свойство Text метки с «Edit1» на пустую строку.

В окне Object Inspector на вкладке Properties необходимо установить следующие значения для свойств поля редактирования:

Свойство

Значение

Пояснение

Text

 

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

Left

32

расстояние от левой границы поля редактирования до левой границы формы

Top

32

расстояние от верхней границы поля редактирования до верхней границы формы

Снова выберем на палитре компонентов компонент Label (метка) и установим его на стартовой форме.

На стартовой форме появится метка с текстом «Label2». Поскольку в данный момент выделена метка, то в раскрывающемся списке окна Object Inspector будет отображаться следующая надпись:

Label2           TLabel,

где Label2 – название компонента, TLabel – тип компонента (в данном случае – метка).

Обратите внимание, что поскольку в нашем приложении уже есть одна метка и её название заканчивается цифрой 1, то вторая метка имеет аналогичное название, но заканчивающееся цифрой 2. Хотя при желании можно изменить названия обеих меток так, что в их названиях не будет ничего общего со словом «Label».

В окне Object Inspector на вкладке Properties необходимо установить следующие значения для свойств метки:

Свойство

Значение

Пояснение

AutoSize

False

признак того, что размер поля определяется его содержимым

WordWrap

True

признак того, что слова, которые не помещаются в текущей строке, автоматически переносятся на следующую строку

Caption

 

название, отображаемое на метке

Left

32

расстояние от левой границы метки до левой границы формы

Top

56

расстояние от верхней границы метки до верхней границы формы

Height

17

высота метки

Width

121

ширина метки

Следует обратить внимание на свойства AutoSize и WordWrap. Эти свойства нужно использовать, если метка должна содержать несколько строк текста. После добавления к форме компонента Label значение свойства AutoSize равно True, т. е. размер метки определяется автоматически в процессе изменения значения свойства Caption. Если вы хотите, чтобы находящийся в метке текст занимал несколько строк, то надо сразу после добавления к форме компонента Label присвоить свойству AutoSize значение False, свойству WordWrap – значение True. Затем изменением значений свойств Width и Height нужно задать требуемый размер метки. Только после этого можно ввести в свойство Caption текст, который должен быть выведен в метке.

Теперь разместим на форме кнопки. Для того чтобы поместить на форму кнопку, нужно выбрать на палитре компонентов компонент Button, а затем щёлкнуть по форме. Не забудьте, что на форме надо расположить две кнопки.

В окне Object Inspector на вкладке Properties установите следующие значения для свойств кнопок:

 

Button1

Caption

Показать

Left

16

Top

80

 

Button2

Caption

Стереть

Left

112

Top

80

 

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

Конструирование внешнего вида приложения завершено. Ваша форма должна выглядеть следующим образом:

 

Теперь можно приступить к программированию.

Чтобы приступить к созданию процедуры обработки события, надо сначала в окне Object Inspector выбрать компонент, для которого создается процедура обработки события. Затем в этом же окне нужно выбрать вкладку Events (События).

 

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

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

Delphi присваивает функции обработки события имя, которое состоит из двух частей. Первая часть имени идентифицирует форму, содержащую объект (компонент), для которого создана процедура обработки события. Вторая часть имени идентифицирует сам объект и событие. В нашем примере имя формы – Form1, имя командной кнопки – Buttoni, а имя события – Click.

 

В окне редактора кода между словами begin и end можно набрать текст инструкций, реализующих функцию обработки события.

 

Выделите командную кнопку Button1, затем в окне Object Inspector откройте вкладку Events и выполните двойной щелчок напротив события Click. При этом откроется окно редактора кода, причём курсор будет установлен между словами begin и end. Именно сюда и будем набирать текст процедуры.

 

Необходимо, чтобы при нажатии на кнопку Button1 текст, набранный пользователем в Edit1, отображался в Label2. Это означает, что нужно изменить свойство Caption компонента Label2, присвоив ему значение Text компонента Edit1.

Процедура, реализующая данное событие, выглядит следующим образом:
 

procedure TForm1.Button1Click(Sender: TObject);

begin

  Label2.Caption:=Edit1.Text;

end;


Запустите приложение нажатием клавиши F9. Введите в поле редактирования какое-нибудь слово и нажмите кнопку «Показать». Это же слово отобразится под полем редактирования. При нажатии на кнопку «Стереть» никаких изменений происходить не будет, поскольку мы ещё не написали процедуры, обрабатывающей данное событие.

 

Выделите командную кнопку Button2, затем в окне Object Inspector откройте вкладку Events и выполните двойной щелчок напротив события Click.

Процедура обработки события OnClick на кнопке Button2:
 

procedure TForm1.Button2Click(Sender: TObject);

begin

  Label2.Caption:=' ';

end;


Снова запустите приложение. Введите в поле редактирования какое-нибудь слово и нажмите кнопку «Показать». Затем нажмите кнопку «Стереть». Слово должно исчезнуть с метки.
 

Сохраните проект. Для этого на строке меню выберите команду: File ® Save all
 

Появится диалоговое окно, предлагающее сохранить .PAS – файл. Создайте новую папку для сохранения в ней файлов проекта. При нажатии на кнопке «Сохранить» появится ещё одно диалоговое окно, предлагающее сохранить файл проекта, снова нажмите кнопку «Сохранить». Просмотрите содержимое папки, в которую вы сохранили проект, там будет 6 файлов, но среди них не будет .EXE – файла. Для его создания ещё раз запустите проект.