Пример 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 – тип компонента (в данном случае – метка).

Для того чтобы изменить текст метки, необходимо в окне ObjectInspector на вкладке 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 – файла. Для его создания ещё раз запустите проект.