2.2.2. Разработка интерфейса

Рассмотрим следующий этап процесса проектирования приложения - создание экранной формы. Этот этап называют также разработкой интерфейса.

Мы вкладываем в термин разработка интерфейса более узкий смысл - создание такого способа ввода и вывода информации, который был бы максимально прост, удобен и понятен пользователю.

В экранной форме Windows-приложения программистом создаются различные нестандартные элементы, например, текстовые поля, командные кнопки, метки и т. д. Эти элементы, а также сама экранная форма являются объектами языка и системы проектирования Visual Basic.

Объект - одно из основных понятий не только Visual Basic, но и других объектно-ориентированных языков программирования.

Объектом в этих языках называется некая сущность, которая, во-первых, чётко проявляет своё поведение, а во-вторых, является представителем некоторого класса подобных себе объектов.

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

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

Список классов всех объектов Visual Basic можно найти в Окне просмотра характеристик объекта, открыть которое можно, выбрав команду меню View на Главной панели проекта.

В Visual Basic программный код почти всегда привязывается к какому-нибудь событию, которое является сигналом к началу работы алгоритма.

Концепция программирования в системе Visual Basic формулируется так: «Программы управляются событиями». Расшифровать эту фразу можно следующим образом.

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

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

Событие - это ещё одна характеристика объекта (помимо уже знакомого нам свойства).

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

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

Создание экранной формы - не менее важная стадия проектирования, чем программирование, которому эта стадия предшествует.

Разработка интерфейса состоит из следующих шагов:

• создание эскиза экранной формы;

• вход в среду проектирования Visual Basic;

• создание экранной формы и установка значений свойств этой формы;

• создание на форме объектов управления и установка значений свойств этих объектов.

Создание эскиза экранной формы

Как следует из постановки задачи, пользователю необходимо создать окно Windows-приложения, на котором будет четыре текстовых поля: три из них для ввода исходных данных - длины, ширины и высоты комнаты, и одно для вывода результата - площади стен этой комнаты.

Рис. 2.6. Эскиз экранной формы (окна приложения)

Кроме текстовых полей, на экранной форме должны быть все необходимые для пользователя пояснения (точнее, весьма желательно, чтобы они были) в виде заголовка, надписей, расчётной формулы и даже небольшого чертежа.

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

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

Вход в среду проектирования Visual Basic

Теперь, когда эскиз окна будущего приложения готов, можно приступать к ра­боте на компьютере. При этом, разумеется, следует убедиться в том, что на вашем компьютере уже установлена система проектирования Visual Basic 6.

Запуск Visual Basic 6 осуществляется, как правило, из главного меню путём щелчка на пункте Visual Вasic. Появится окно New Project, в нем указан тип программного проекта, объявленный по умолчанию (standard.exe). Затем щелкните на команде Open, чтобы выбрать проект по умолчанию, стандартное 32-битное приложение Visual Вasic, после чего откроется новый проект в среде Visual Вasic вместе с некоторыми окнами и инструментами. Инструменты служат для конструирования новых программ, а строка меню обеспечивает доступ к большинству программ, управляющих средой программирования (рис. 2.7).

Меню и команды работают в соответствии со стандартными соглашениями, общими для всех приложений Windows. Запустить команду меню можно с помощью мыши или клавиатуры. Под строкой меню располагается панель инструментов – набор кнопок, являющихся ярлыками команд, с помощью которых осуществляется работа в среде Visual Basic. Чтобы получить подсказку о функции какой-либо кнопки, поместите на эту кнопку указатель мыши и не перемещайте его некоторое время.

Создание экранной формы и установка значений свойств этой формы

Если наГлавной панели проекта нет Окна экранной формы, откройте его. Сде­лать это можно, выбрав команду меню View.

Рис. 2.7. Главная панель проекта с тремя окнами (Окно инструментов, Окно экранной формы и Окно свойств объекта) на начальной стадии проектирования интерфейса

На рис. 2.7 Окно экранной формы расположено в центре Главной панели и имеет заголовок Project1 - Form1 (Form). По умолчанию в этом окне уже есть заготовка экранной формы. Она имеет заголовок Form1.

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

В языке Visual Basic рассматривается такое понятие, как класс объектов. В частности, рассматривается класс объектов Form (Экранная форма). Это совокупность общих характеристик любой экранной формы. Когда создаётся конкретная экранная форма или какой-нибудь иной конкретный объект, можно использовать уже имеющийся в системе список свойств класса этих объектов. Именно этот список вы и видите в правой части рис. 2.7 - в Окне свойств (Properties).

Если на Главной панели проекта нет Окна свойств, откройте его. Сделать это можно, выбрав команду меню View.

На Главной панели проекта(рис. 2.7), вы видите указанные два окна: экранной формы и свойств этой формы на начальной стадии проектирования интерфейса. Для создания экранной формы приложения «Площадь стен комнаты» вам понадобятся именно эти окна, с их помощью Вы будете устанавливать значения различных свойств этой формы.

Прежде всего, установите значения её размеров — свойств Width (Ширина) и Height (Высота). Можно, конечно, установить эти значения с помощью окна Properties, внося конкретные числа в правую колонку таблицы, находящейся в этом окне. Но лучше это сделать «на глаз», «растягивая» мышью стороны экранной формы. При этом значения в таблице Окна свойств будут изменяться автоматически!

Значения свойств положения формы на экране — свойств Left (Левый край) и Тор (Верхний край) легко установить тоже «на глаз», с помощью Окна располо­жения формы. Открыть это окно можно, выбрав команду меню View.

А вот для установки значений имени формы, надписи в строке заголовка формы, цвета фона формы Окно свойств будет необходимо.

Этими свойствами соответственно являются:(Nате), Caption, BackColor. Значения первых двух из этих свойств установите такими: FПлощадьСтен, Площадь стен комнаты. Эти значения набираются с помощью клавиатуры. А значение последнего свойства BackColor выбирается с помощью раскрывающейся панели с двумя закладками (рис. 2.8) после щелчка кнопки в строке BackColor Окна свойств.

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

Рис.2.8 Раскрывающаяся панель

для установки значения свойства

Black Color экранной формы

Создание на экранной форме объектов управления и установка значений свойств этих объектов

Устанавливаем следующие объекты на экранной форме: шесть объектов класса Метка, четыре объекта класса Текстовое поле, по одному объекту классов Изображение и Командная кнопка. Для их создания понадобится Окно инструментов Тоо1Ьох. Если этого окна ещё нет на Главной панели, следует его открыть, например, выбрав команду меню View.

Начните с установки объектов Метка. (Все надписи, заголовок и формулу разместите в нескольких таких объектах.)

В Окне инструментов находятся пиктограммы (инструменты), с помощью которых можно создать любое количество объектов управления одного и того же класса. В частности, с помощью инструмента Label можно создать любое количество объектов Метка (А – пиктограмма этого инструмента).

Рассмотрим технологию создания меток на примере размещения на экранной форме одной из них.

Щёлкните пиктограмму Label в окне Тоо1Вох. Поместите указатель мыши в то место экранной формы, где будет находиться левый верхний угол будущего объекта. При нажатой левой клавише мыши «протащите» указатель в то место, где будет находиться правый нижний угол будущего объекта. Этот процесс будет сопровождаться растяжением пунктирной рамки - границы создаваемого объекта. Создайте ещё пять объектов Метка таким же способом. Перейдём к размещению текстовых полей.

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

—пиктограмма этого инструмента.

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

Точно таким же способом поместите на экранную форму ещё два объекта: объект Командная кнопка и объект Изображение. Используйте для этого инструменты CommandButton и 1таge

—пиктограмма инструмента СоттапdButton.

—пиктограмма инструмента 1таge.

Окончательный вид экранной формы после размещения на ней всех объектов управления показан на рис. 2.9.

А теперь позаботьтесь о наполнении созданных нами многочисленных объектов конкретным содержанием. Это содержание, как вы теперь знаете, определяется значением их свойств.

Заметим, что в каждый момент проектирования только один объект является выделенным (активным). На экранной форме (рис. 2.9) данный объект окружён рамкой из восьми маркеров.

В Окне свойств на Главной панели вы видите список свойств именно активного объекта. Стоит только щёлкнуть мышью по другому объекту экранной формы, как к этому объекту переходит вся активность и мгновенно изменяется содержимое Окна свойств!

Рис. 2.9. Окно Object с экранной формой приложения

«Площадь стен комнаты»

Вы будете наполнять объекты содержанием (т. е. задавать значения их свойств) по порядку. Для этого следует по порядку их активировать и работать с Окном свойств каждого активного объекта.

Начните с меток. (Все надписи, заголовок и формулу разместите в шести таких объектах.)

Первым делом, как и для экранной формы, определите для них значения свойства (Nате).

Другим важным свойством объекта Метка является Caption — надпись, которая будет находиться в том месте экранной формы, куда вы эту метку поместили.

В таблице представлены значения свойств (Nате) и Caption всех ваших меток (см. рис. 2.9).

Имя метки по умолчанию	Значение свойства (Name)	Значение свойства Caption
Label1	Метка1	Площадь стен комнаты вычисляется по формуле
Label2	Метка2	S=2*(A+B)*H
Label3	Метка3	Длина(A):
Label4	Метка4	Ширина(B):
Label5	Метка5	Высота(H):
Label6	Метка6	Площадь стен(S):

Выберите для ваших меток тип, размер и цвет шрифта (значения свойств Font и Fore Со1оr), а также цвет фона (значение свойства ВасkСо1оr). Чтобы фон меток сливался с фоном формы, сделайте его белым.

Значения некоторых других свойств (а их немало) попробуйте установить сами, посмотрите, что при этом получится.

А теперь установите значения свойств четырёх текстовых полей (объектов Текстовое поле). У текстового поля много таких же свойств, как и у метки. Устанавливать их значения вы уже умеете.

Свойству (Nате) дайте такие значения: Длина, Ширина, Высота, Площадь.

Но вы, очевидно, сразу заметите, что у текстового поля нет свойства Caption. Вместо него есть свойство Техt. Дело в том, что в текстовое поле можно вводить очень большой объём информации (например, целую главу какой-нибудь книги). А можно, как в нашем случае, вводить в текстовые поля числа (в нашем примере это размеры комнаты). Площадь стен комнаты будет вычислять компьютер и помещать результат тоже в текстовое поле - в качестве значения его свойства Техt.

Установите начальные значения свойства Техt всех четырёх текстовых полей равными нулю (хотя делать это вовсе не обязательно).

Перейдите теперь к объекту Командная кнопка.

Главная его характеристика - это не какое-нибудь свойство, а событие. Оно заключается в щелчке мышью по этой кнопке. Но об этом мы будем говорить далее. А сейчас интересными для нас свойствами являются только (Nате) и Сарtion.

Свойству (Nате) присвойте значение КоманднаяКнопка, а свойству Сарtion - значение в виде фразы «Нажмите на эту кнопку, чтобы узнать площадь стен».

В заключение установите значение всего одного свойства объекта Изображение - свойства Picture.

Этим значением должен быть графический файл, находящийся где-нибудь на вашем компьютере. Вы сами должны позаботиться о существовании этого файла; например, создать его с помощью графического редактора Paint Windows.

После установки значений свойств объектов ваша экранная форма приобретает вид, показанный на рис. 2.10.

Рис. 2.10. Вид экранной формы после установки значений свойств объектов

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