Обустройство экранной формы

Об авторе

Обустройство экранной формы

В этой главе мы узнаем, как размещать элементы управления в экранной форме, как измеряются расстояния внутри нее. Узнаем, что такое “класс”, и зачем он нужен. Познакомимся с Палитрой элементов и Обозревателем объектов.

Стандартные элементы управления

Мы уже знаем, что приложение строится из объектов. А откуда берутся для этого объекты? Для объектов – элементов управления ответ известен: из Палитры элементов. Как мы уже видели, это инструментальное окно состоит из вкладки (ее имя General – Главная), на которой уже размещены значки 20 элементов управления, называемых стандартными. Но к ним мы можем добавлять и множество других элементов управления: часть из них имеет в своем составе IDE, часть – это компоненты, входящие в состав других приложений.

Как добавлять эти элементы – мы узнаем после. А сейчас наведем указатель мыши на какой-нибудь значок элемента из Палитры. На экране появляется Окно указателя, в котором можно прочесть название элемента (рис. 1):

рис. 1

Чтобы научиться использовать имеющийся у нас в наличии “строительный материал”, давайте сначала научимся узнавать его “в лицо”, – то есть знать, какой значок представляет тот или иной элемент в Палитре. Для этого, растянув Палитру элементов, подпишем у каждого из них его английское название и русский эквивалент (рис. 2):

рис. 2

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

Размещение элемента управления в экранной форме

Имеется два способа размещения элемента в экранной форме.

Способ 1. Делаем двойной щелчок по значку элемента управления в Палитре. Элемент размещается в середине экранной формы, имея некоторые “стандартные” размеры. После этого, при помощи мыши элемент перемещают в нужное место и придают ему нужные геометрические размеры. Как это делается?

Перемещение элемента производится методом перетаскивания (Drag-and-Drop): мы указываем указателем мыши на объект, нажимая левую кнопку мыши, “схватываем” его и, не отпуская нажатую кнопку, перемещаем объект в нужное место (рис. 3):

рис. 3

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

Изменение размеров установленного элемента производят при помощи восьми темных квадратных маркеров, примыкающих к выделенному элементу (рис. 4):

рис. 4

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

Способ 2. Делаем однократный щелчок по значку элемента управления в Палитре и переводим курсор мыши на экранную форму. При этом курсор принимает форму тонкого черного перекрестья. После этого размещаемый элемент “рисуется” на форме точно так же, как прямоугольник в каком-нибудь графическом редакторе (Paint, например). То есть мы помещаем перекрестье указателя в место, где должен быть какой-нибудь угол размещаемого нами элемента, нажимаем левую кнопку мыши и, не отпуская ее, производим протягивание контура размещаемого элемента в ту сторону, где должен быть его противоположный угол. Окно указателя отображает при этом его текущие координаты.

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

Обращение к свойствам и методам

Разместив какой-нибудь элемент управления в экранной форме, мы можем затем разместить еще один такой же элемент, затем еще один и так далее (рис. 5):

рис. 5

Все эти элементы будут являться объектами одного типа, разница будет только в значениях некоторых свойств. Например, имена (свойство Name) у всех этих элементов должны быть разными. А вот надписи на размещенных кнопках (свойство Caption – Заголовок) могут быть и одинаковыми.

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

Command1.Caption = “Выход” ‘Присвоили значение свойству Caption

Command1.SetFocus ‘Вызвали метод SetFocus

А если мы обращаемся из модуля другой экранной формы, чем та, в которой размещен элемент, то надо указать и имя содержащей элемент формы:

Form1.Command1.Move 200 ‘Вызвали метод Move с параметром

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

Объект как класс и как экземпляр

Заглянем в окно свойств(рис. 6):

рис. 6

Оказывается, при его предыдущем описании мы кое-чего “не заметили”. А именно: в строке верхнего списка имеется не только имя выбранного элемента управления Command3, но и второе имя –  CommandButton. Как раз то, которым именовался этот элемент управления в Палитре элементов. Такое же “двойное” наименование можно обнаружить и у остальных элементов управления. Да и вообще у всех объектов.

Это явление объясняется тем, что понятие “объект” имеет два смысла. С одной стороны, это целый класс – прямо как в зоологии. А с другой строны – это и отдельные экземпляры этого класса. Ничего удивительного: мы ведь называем “таксой” и породу собак, и конкретный “экземпляр” этой породы, живущий у соседей по лестничной площадке! Но у “экземпляра” этого есть еще и свое собственное имя – Герда, например.

Итак, говоря об “объекте”, мы в одних случаях имеем в виду класс, в других – экземпляр. Например, если мы говорим, что у объекта Label (Надпись) есть свойство BorderStyle (Тип границы), – мы говорим о классе. Но если говорим, что свойство BorderStyle надписи имеет значение 1, то речь идет об экземпляре, размещаемом на форме.

Обозреватель объектов

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

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

Для этих целей в IDE есть специальное инструментальное окно – Object Browser (Обозреватель объектов). Его можно вызвать в любой момент нажатием на клавишу F2 (рис. 7):

рис. 7

В окне Обозревателя объектов имеется два основных элемента: список классов и список членов (Members) выбранного класса: свойств, методов, событий (а также именованных констант – неизменяемых величин, к которым обращаются по имени). Значки перед именами членов класса обозначают:

 – свойства;

 – методы;

 – события.>

На Панели описания можно прочитать краткое описание выбранного в данный момент в каком-нибудь из этих списков элемента, а полную справку о нем можно получить, нажав клавишу F1.

Когда окна закрывают обзор

В прошлой главе мы написали одну строку кода для нашего первого приложения. И хотя старались сделать ее покороче (даже имя свойства “Caption” написали без указания объекта, поскольку он там единственный). И все равно часть введенной в окне редактора кода строки “ушла” под одно из инструментальных окон. Мы, однако, побоялись тогда щелкать по кнопкам закрытия этих окон: как их потом открывать?

Для вызова Окна свойств, окна Form Layout, Проводника проекта и Обозревателя объектов на стандартной панели инструментов имеются инструментальные кнопки, дублирующие соответствующие команды из выпадающего меню пункта View главного меню (рис. 8):

рис. 8

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

Расстояния внутри формы

Мы уже упоминали о “координатах левого верхнего угла элемента управления”, размещенного в экранной форме. Именно эти координаты и считаются координатами элемента управления. Что же они означают?

Будем считать, что координаты любой точки внутри формы – это два числа: первое из них – расстояние от точки до левой внутренней границы формы, его именуют Left, второе – расстояние от точки до верхней внутренней границы формы, его именуют Top. Записывать координаты точки принято так: (Left, Top). Из нашего определения следует, что координаты верхнего левого угла внутренней области формы равны (0, 0). Такая точка называется началом координат; через нее проводят оси координат – линии, по которым откладывают расстояния (рис. 9):

рис. 9

На этих линиях задается направление в сторону возрастания координат. Горизонтальная ось проходит из начала координат – вправо вдоль верхней стороны; вертикальная ось – вниз вдоль левой стороны формы. По этим осям и будут определяться координаты точек вутри формы. А в каких единицах?

Единицей, заданной по умолчанию, является твип (Twip). Именно это значение установлено по умолчанию свойству ScaleMode формы, определяющему ее внутренний масштаб (рис. 10):

рис. 10

Это очень мелкая единица, соответствующая 1/1440 доле дюйма формы, выведенной на бумагу принтером. Именно в этих единицах всегда, независимо от выбранной в свойстве ScaleMode единицы измерения, выражается в свойствах Width и Height соответственно ширина и высота самой формы (рис. 9).

Если же мы выберем другую единицу измерения, то ширина и высота формы в этих единицах будет выражена свойствами формы ScaleWidth и ScaleHeight соответственно.

Особую роль играет значение (0-User) в первом пункте списка значений ScaleMode. Это значение означает выбор “пользовательского масштаба”. Чтобы перейти к нему, проектировщик устанавливает сначала нужные размеры формы (протягиванием, либо вводом значений свойств Width и Height). А затем вводит новые, удобные ему значения ширины и высоты формы в свойства ScaleWidth и ScaleHeight соответственно. Свойство ScaleMode автоматически перейдет при этом в значение (0-User), если оно не было установлено заранее. Тем самым вводится “пользовательская” шкала измерений для каждой из осей: поделив на Width на ScaleWidth мы можем узнать масштаб (в твипах) новой шкалы для оси X, поделив Height на ScaleHeight – масштаб для оси Y. А как обеспечить, чтобы горизонтальный и вертикальный масштабы совпадали? Для этого надо при выборе значений ScaleWidth и ScaleHeight проследить, чтобы соотношение между ними было бы таким же, как между значениями Width и Height.

После установки “пользовательского масштаба” только что описанным образом, именно в новых единицах будут выражаться координаты (Left и Top) и геометрические размеры (Width и Height) всех размещаемых в форме элементов управления, а также координаты точек формы, рисуемых или проверяемых ее графическими методами на этапе выполнения приложения.

Использование сетки

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

Вызовем диалог Tools=>Options и выберем в нем вкладку General (рис. 11):

рис. 11

На ней имеется группа элементов, озаглавленная Form Grid Settings. С их помощью мы можем:

•  изменять шаг сетки (расстояние между ее узлами в твипах) по горизонтали (Width) и вертикали (Height);

•  включать и отключать отображение сетки (флажок Show Grid);

•  включать и отключать выравнивание по сетке (Align Controls to Grid).

Даже если функция выравнивания отключена, выбранный элемент может быть в дальнейшем выровнен по сетке командой Format=>Align=>to Grid.