Создание интерфейса приложения

Интерфейс приложения составляют компоненты, которые разработчик выбирает из Палитры компонентов и размещает на форме, сами компоненты являются своего рода строительными блоками. При конструировании интерфейса приложения действует принцип WYSIWYG (What You See Is What You Get, что видите, то и получите), и разработчик при создании приложения видит форму почти такой же, как и при его выполнении.

Компоненты являются структурными единицами и делятся на визуальные (видимые) и невизуальные (системные). Понятие видимый и невидимый относятся только к этапу выполнения, на этапе проектирования видны все компоненты приложения.

К визуальным компонентам относятся, например, кнопки, списки или переключатели, а также форма. Так как визуальные компоненты используются пользователем для управления приложением, то эти компоненты также называют управляющими компонентами или элементами управления. Именно визуальные компоненты образуют интерфейс приложения.

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

• выбор компонента в Палитре компонентов и размещение его на форме;

• изменение свойств компонента.

Разработчик выполняет эти операции в окне Конструктора формы, используя Палитру компонентов и Инспектор объектов. При этом действия разработчика похожи на работу в среде графического редактора, а сам процесс создания интерфейса приложения больше напоминает конструирование или рисование, чем традиционное программирование. В связи с этим часто весь процесс создания приложения называют не программированием, а конструированием.

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

В обозначении типа объектов Delphi, в том числе и компонентов, указывается буква т. Часто для обозначения компонентов используются не их названия, а типы. Для обозначения компонентов будем использовать именно названия, а не типы компонентов, то есть Button, а не TButton, Label, а не TLabel.

После размещения компонента на форме Delphi автоматически вносит изменения в файл модуля и файл описания. В описание класса формы (файл модуля) для каждого нового компонента добавляется строчка формата

<Название компонента>: <Тип компонента>;

Название компонента является значением его свойства Name, а тип определяется выбранным компонентом. Например, для кнопки Button эта строчка первоначально будет иметь вид:

Buttonl: TButton;

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

После размещения компонента в форму с помощью мыши можно изменять его положение и размеры. Кроме того, для нескольких компонентов можно выполнять выравнивание или перевод того или иного компонента на передний или задний план. При этом действия разработчика не отличаются от действий в среде обычного графического редактора. Одновременное выделение на форме нескольких компонентов можно выполнить щелчком мыши при нажатой клавише <Shift>.

Внешний вид компонента определяют его свойства, которые доступны в окне Инспектора объектов, когда компонент выделен на форме и вокруг него отображаются маркеры выделения (рис. 15). Доступ к свойствам самой формы осуществляется аналогично, однако в выбранном состоянии форма не выделяется маркерами. Для выделения (выбора) формы достаточно щелкнуть в любом ее месте, свободном от других компонентов.

В ниспадающем списке, расположенном в верхней части окна Инспектора объектов, отображается название компонента и его тип. Выбрать тот или иной компонент и соответственно получить доступ к его свойствам также можно, выбрав этот компонент в списке Инспектора объектов. Такой способ выбора удобен в случаях, когда компонент полностью закрыт другими объектами. В левой части окна Инспектора объектов приводятся названия всех свойств компонента, которые доступны на этапе разработки приложения. Для каждого

Рис. 15. Доступ к свойствам компонента

свойства справа содержится значение этого свойства. Отметим, что, кроме этих свойств, компонент может иметь свойства, которые доступны только во время выполнения приложения.

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

Управление свойствами в процессе проектирования заключается в изменении значений свойств компонентов непосредственно в окне Конструктора формы ("рисование") или с помощью Инспектора объектов.

Разработчик может изменить значение свойства компонента, введя или выбрав нужное значение. При этом одновременно изменяется соответствующий компонент, таким образом уже при проектировании видны результаты сделанных изменений. Например, при изменении значения свойства caption (название) кнопки в процессе редактирования нового названия на поверхности кнопки отображается редактируемое название.

Для утверждения нового значения свойства достаточно нажать клавишу <Enter> или перейти к другому свойству или компоненту. Для отмены изменений необходимо нажать клавишу <Esc>. Если свойству введено неправильное значение, то выдается предупреждающее сообщение, а изменения значения отвергаются. Изменения свойств автоматически учитываются в файле описания формы, используемом компилятором при создании формы, а при изменении свойства Name вносятся изменения и в описание класса формы.

Каждый компонент для большинства своих свойств, например, Color (Цвет), Caption (Заголовок) и visible (Видимость), имеет значения по умолчанию.

Для обращения к компоненту в приложении предназначено свойство Name типа TComponentName, которое указывает имя компонента. Отметим, что тип TComponentName эквивалентен типу string. Каждый новый компонент, помещаемый на форму, получает имя по умолчанию, автоматически образуемое путем добавления к названию компонента его номера в порядке помещения на форму. Например, первый однострочный редактор Edit получает имя Editi, второй — Edit2 и т. д.

На этапе разработки приложения программист может изменить имя компонента по умолчанию на более осмысленное и соответствующее назначению компонента. Существует несколько точек зрения по поводу присвоения имен компонентам. Согласно одной из них, имя образуется из назначения компонента и его названия. Другим вариантом является указание в имени вместо названия компонента его префикса. Префикс является сокращением названия, например, для однострочного редактора Edit префикс может быть edt, для надписи Label — 1, для формы Form — fin. To есть для однострочного редактора, предназначенного для ввода фамилии сотрудника, подходящими именами будут NameEdit ИЛИ edtName. Оба способа являются одинаково допустимыми, и на практике каждый разработчик использует тот, который для него наиболее удобен, или некоторый другой способ.

Для наглядности мы обычно будем использовать в наших примерах в качестве имен визуальных и невизуальных компонентов их имена по умолчанию, например, Labell, Edit2 ИЛИ Button3.

Свойства, связанные с размерами и положением компонента (например, Left и width), автоматически изменяют свои значения при перемещении компонента мышью и смене его размеров.

Если на форме выделено несколько компонентов, то в Инспекторе объектов доступны свойства, общие для всех этих компонентов. При этом сделанные в Инспекторе объектов изменения действуют для всех выделенных компонентов.

Отображаемое в Инспекторе объектов свойство может быть:

• простым (текстовым) — значение свойства вводится или редактируется как обычная строка символов, которая интерпретируется как числовой или строковый тип Delphi. Используется для таких свойств, как Caption, Left, Height И Hint;

• перечислимым — значение свойства выбирается из раскрывающегося списка. Список раскрывается щелчком на стрелке, которая появляется при установке курсора в области значения свойства. Можно не выбирать, а ввести с помощью клавиатуры нужное значение, однако на практике это обычно не делается, так как ввести можно одно из предлагаемых значений. Кроме того, возрастает трудоемкость ввода значения и увеличивается вероятность ошибки. Используется для таких свойств, как FormStyle,Visible И ModalResult;

•множественным — значение свойства представляет собой комбинацию значений из предлагаемого множества. В Инспекторе объектов слева от названия свойства множественного типа содержится знак +. Формирова ние значения свойства выполняется с помощью дополнительного списка, раскрываемого двойным щелчком на названии свойства. Этот список содержит перечень всех допустимых значений свойства, справа от каждого значения можно указать True или False. Выбор True означает, что данное значение включается в комбинацию значений, a False — нет. Используется ДЛЯ таких СВОЙСТВ, как Borderlcons И Anchors;

• объектом — свойство является объектом и, в свою очередь, содержит другие свойства (подсвойства), каждое из которых можно редактировать отдельно. Используется для таких свойств, как Font, items и Lines.

В области значения свойства-объекта в скобках указывается тип объекта, например, (TFont) или (TSrings). Для свойства-объекта слева от названия может содержатся знак +, в этом случае управление его под свойствами выполняется как и для свойства множественного типа через раскрывающийся список. Этот список в левой части содержит названия подсвойств, а в правой — значения, редактируемые обычным способом. В области значения может отображаться кнопка с тремя точками. Это означает, что для данного свойства имеется специальный редактор, который вызывается нажатием на эту кнопку. Так, для свойства Font открывается стандартное окно Windows для установки параметров шрифта.

При выполнении приложения значения свойств компонентов (доступных в окне Инспектора объектов) можно изменять с помощью операторов присваивания, к примеру, в обработчике события создания формы. Например, изменение заголовка кнопки Buttoni можно выполнить следующим образом:

Buttoni.Caption:= 'Закрыть';

Однако это требует большего объема работ, чем в случае использования Инспектора объектов, кроме того, такие установки вступают в силу только во время выполнения приложения и на этапе разработки не видны, что в ряде случаев затрудняет управление визуальными компонентами. Тем не менее, для наглядности во многих примерах значения отдельных свойств нами устанавливаются с помощью операторов присваивания, а не через Инспектор объектов.

Отметим, что существуют свойства времени выполнения, недоступные через Инспектор объектов и с которыми можно работать только во время выполнения приложения. К таким свойствам относятся, например, число записей RecordCount набора данных или поверхность рисования canvas визуального компонента.